Writing HTML
In order to create or edit pages for the Libraries' web site, you must have a basic understanding of HTML. Staff Learning & Development offers courses and resources for learning HTML. Course packet: HTML 101 [PDF]
Quick Reference
Frequently Used HTML
| Example HTML: | What Users See: |
|---|---|
| <em>Italics</em> (NOT <i>Italics</i>) |
Italics |
| <strong>Bold</strong> (NOT <b>Bold</b>) |
Bold |
| <ul> <li>First item</li> <li>Second item</li> </ul> |
|
| <ol> <li>First item</li> <li>Second item</li> </ol> |
|
Coding Special Symbols
Symbols like <, >, &, ©, ’ and " must be coded in HTML so that they will display correctly in various browsers.| Example HTML: | What Users See: |
|---|---|
| & | & |
| > | > |
| < | < |
| © | © |
| " | " |
| ’ | ’ |
| NOTE: The ampersand must be coded as & EVEN when it appears in the middle of a URL, as in the deep links into Research Port. For a complete list of Special Characters, see the World Wide Web Consortium's Character Entity References in HTML 4. |
|
HTML tips:
- Define the structure of your page through HTML.
Express hierarchy through the various elements.
<h1>Most important heading on my page</h1>
<p>Introduction</p>
<h2>Subheading on my page</h2>
<p>Text for this section</p> - Respect semantics: remember that each HTML tag has "real-life" meaning. In English, the word semantic means "of or relating to meaning." Web Semantics means recognizing that the various elements of your HTML describe not just the look of your Web page but also the meaning of your content. For example, <h1> doesn't just mean "big and bold looking heading" but actually has a real-life significance: "this is the most important heading on the page."
- Close your tags--even <p> and <li> ! With the exception of the <br> and <img> tags, each tag that
you introduce should have a closing tag.
- Use lower case when writing new tags. You may have learned differently, but current wisdom says that lowercase is best.
- Pay attention to the nesting order of your tags.
Nesting refers to the order of your opening and closing tags in relation to other tags on your page. When Tag B is nested inside Tag A, then Tag B should be opened and closed before Tag A is closed.
This is correct nesting:
<h2><a href="link.html">My subtitle is a link</a></h2>.
This is incorrect:
<h2><a href="link.html">My subtitle is a link</h2></a>In this example, the <a href> is nested in the <h2> tag. The <a href> should be opened and closed before the closing </h2>.
