2.7: Well-formed code

Most Web browsers are forgiving of small errors in HTML code. The problem is that Internet Explorer forgives some errors but not all, while other browsers such as Safari forgive a completely different array of errors.

The only sure way to have your page display properly on all browsers is to follow the rules of well-formed code. Well-formed code has these advantages:

  1. It meets the W3C standards for HTML and HTML5.
  2. It is most compatible with all browsers.
  3. It prevents errors that do not “degrade gracefully.𔄭 This means that if a browser does not support some feature of your code, it will not break the rest of the page.

1. Before anything else, set up the minimal HTML5 page

The minimal HTML page comprises:

  1. A document declaration for HTML5 1.0 Strict. This is the first thing in the document, and it appears at the top of every document.
  2. Opening and closing HTML tags. The opening HTML tag <html> is the first thing after the document declaration. The closing HTML tag </html> is the last thing in the document.
  3. HEAD tags: <head></head> The browser loads the information within the head tags before it loads the rest of the page. These are things such as links to scripts or CSS specifications that determine the look and behavior of the page, a good, logical title and meta information.
  4. Beginning and ending BODY tags. All content goes between <body></body>. No content goes between the head tags.

2. Write all tags and attributes in lowercase

  1. HTML isn’t supposed to be case sensitive, but with Cascading Style Sheets, the cases of beginning and ending tags have to match.
  2. The simplest method is to use lower case all the way.
  3. This is incorrect:
    <P>For more information, visit <A HREF="JOE.HTML">Joe's site<A>.</p> 
  4. This is correct:
    <p>For more information, visit <a href="joe.html">Joe's site<a>.</p>

3. Close all tags.

  1. Some HTML tutorials will tell you that the <p> tag does not need a </p>.
  2. With HTML5 and Cascading Style Sheets, though, you must close every tag, including </li> (for list items) and </p>.
  3. This is incorrect:
    <p>Question: What did a Zen master say to the hotdog vendor?  
    <p>Answer: Make me one with everything.
    
  4. This is correct:
    <p>Question: What did the Zen master say to the hotdog vendor?</p>
    <p>Answer: Make me one with everything</p>
    
  5. Some tags do not require a closing tag, but for HTML5 1.0 they do require a closing back slash. Here are three common examples:
    • break tags: <br />
    • image tags: <img src="mel.jpg" width="80" height="120" />
    • link tags: <link rel="stylesheet" href="../style.css" type="text/css" />

RETURN TO TOP

4. Nest your tags properly.

  1. When you place tags within tags, the first tag opened is the last tag closed.
  2. This is wrong:
    <p><em>Life is funny, if you're lucky.</p></em> 
  3. This is correct:
    <p><em>Life is funny, if you're lucky.</em></p>
  4. When you use an anchor tag with other tags, it must be the innermost tag.
  5. This is incorrect:
    <p><a href="http://www.mlb.com"><em>Baseball</em></a></p>  
  6. This is correct:
    <p><em><a href="http://www.mlb.com">Baseball</a></em></p> 

5. Do not enclose “block” tags inside of “phrase” or “inline” tags.

  1. Block tags control logical blocks of text, usually paragraphs; these include:
    • paragraph <p>
    • headings <h1>, <h2> and so on
    • blockquote <blockquote>
    • preformatted text <pre>
    • division <div>
  2. Phrase or inline tags control short pieces of text and include:
    • emphasis <em>
    • strong emphasis <strong>
    • anchor <a href=...>
    • image <img src=... />
    • quotation <q>
    • span <span class=...>
    • subscript <sub>
    • superscript <sup>
  3. This is incorrect:
    <a href="joe.html"><p>For more information, visit Joe's site.</p></a> 
  4. This is correct:
    <p><a href="joe.html">For more information, visit Joe’s site.<a></p>
  5. Block elements can be contained within block elements, and phrase elements can be contained within phrase elements, as in:
    <div align="center">
    <p>
    As <strong><span class="blue">Yogi Berra</span></strong>
    once said, &#8220;When you come to a fork in the road,
    take it.&#8221;
    </p>
    </div>
    Note that all of the tags above are properly nested. Also, make note of the entity codes used to produce typesetter’s quote marks. More on that below.

6. Quote all attribute values

Get in the habit of using quote marks for attribute values. The quote marks will be required in newer versions of HTML and in HTML5.

  1. This is incorrect:
    <img src=thor.jpg alt=The Viking Bold width=200 height=400 />  
  2. This is correct:
    <img src="thor.jpg" alt="The Viking Bold" width="200" height="400" />

RETURN TO TOP

7. Use indents, returns and comments to organize your code.

  1. Web browsers ignore returns and extra spaces, so you can use them to organize your code and make it easier to read.
  2. This type of organization allows you to find and fix things easier.
  3. This code is poorly organized:
  4. <html><head><title>Rules for Good HTML</title><link rel="stylesheet"
    type="text/css" href="style.css"></head><body>
    <p>A coward dies a thousand deaths.</p><p>But a frog croaks every night.</p>
    <body><html>
    
  5. This code is well-organized:
  6. <html>
       <head>
          <title>Rules for Good HTML</title>
          <link rel="stylesheet" type="text/css" href="style.css">
       </head>
    
       <body>
          <!-- CONTENT BEGINS -->
          <p>A coward dies a thousand deaths.</p>
          <p>But a frog croaks every night.</p>
          <!-- CONTENT ENDS -->
    
       <body>
    <html>
    
  7. Comments allow you to insert notes to yourself that the browser cannot read. The browser will not display comments, shown in red above.

8. Delete orphaned end tags

A common mistake is to remove a start tag and forget to remove its associated end tag. In HTML, an orphaned end tag, such as a </strong> or </a> that doesn't have a matching start tag can cause problems later in the page. It has the potential to confuse people or text editors with features to help you understand and edit the HTML source. And it is just plain sloppy.

You should make sure that each end tag is properly matched with a start tag.

9. Use entity codes to render <, > and & symbols

These symbols are used in writing HTML, but you might need to use them as they were first intended; if so, use the entity codes rather than the less-than, greater-than and ampersand characters themselves. For instance, consider this e-mail address as it might easily be copied and pasted into your HTML5 code:

	Michael O’Donnell <mjodonnell@stthomas.edu>

Rendered in HTML5, this is all you would see:

	Michael O’Donnell

The e-mail address has been unintentionally hidden by the less-than and greater-than symbols. Anytime you want to include a raw less-than, greater-than or an ampersand in HTML5, you should use the &lt;, &gt; and &amp; entity codes. The correct HTML5 code for such a line would be:

Michael O’Donnell &lt;mjodonnell@stthomas.edu&gt;

10. Use hexidecimal escape codes for typgraphical details

If you examine the doctype declaration on your minimal HTML5 page, you will see the statement encoding="utf-8". This means the browser should use the Unicode 8-bit standard. An 8-bit standard will allow the use of 256 characters, so to get the full range of typographical detail in your web pages, you should use entity codes for characters such as typesetter quote marks, en and em dashes, ellipses and others.

You can find a discussion of escape sequences and a list of the codes in Chapter 3 of the COJO 258 website. Here is how the code would look for a quote using escape code:

<p>&#8220;You can&#8217;t hit and think at the same time.&#8221;</p>
<p>&#8212; Yogi Berra</p>

Here’s how the browser displays the text:

“You can’t hit and think at the same time.”

— Yogi Berra