Tips on Good HTML Style (Web Design in a Nutshell, 2nd Edition)

8.5. Tips on Good HTML Style

This section offers some guidelines for writing "good" HTML -- code that will be supported by a wide variety of browsers, handled easily by applications expecting correct HTML, and extensible to emerging technologies built on the current HTML specification.

Follow HTML syntax as described by the current available W3C specification.Writing HTML "correctly" may take extra effort, but it ensures that your document displays the way you intend it to on the greatest number of browsers. Browsers vary in how strictly they parse HTML. For instance, if you omit a closing </table> tag, some versions of Internet Explorer display the contents of the table just fine, while Netscape Navigator leaves that portion of your web page completely blank.

The Opera browser is particularly stringent. Simple slips or shortcuts that slide right by Navigator or Internet Explorer may cause your whole web page to self-destruct. If you are careful in the way you write your HTML (minding your <p>s and <q>s!), you will have more success on more browsers.
Validate your HTML. To be absolutely sure about how you're doing, you should run your HTML code through one of the many available online HTML validation services, such as the ones at the W3C (http://validator.w3.org), NetMechanic (http://www.netmechanic.com), Web Design Group (http://www.htmlhelp.com), and Doctor HTML (http://www2.imagiware.com/RxHTML/).
Follow code-writing conventions to make your HTML document easier to read. Although not a true programming language, HTML documents bear some resemblance to programming code in that they are usually long ASCII documents littered with tags and commands. The overall impression can be chaotic, making it difficult to find the specific element you're looking for. There are a few techniques that can make your pages more legible:
- Use comments to delineate sections of code so you can find them quickly.
- Because browsers ignore line breaks, tabs, and extra spaces in the HTML document, they can be used to make your document easier to scan. Be aware, however, that these extra keystrokes add to the size of your document (because blank spaces are transmitted as ASCII just like all other characters), so don't go overboard.
- And last, because HTML tags are not case-sensitive, you may choose to write tags in all capital letters to make them easier to find. However, this technique is discouraged now that the upcoming XHTML standard requires all tags and attributes to be lowercase.
Avoid adding extra or redundant tags. Extra and redundant HTML tags add unnecessary bytes to the size of your HTML file, causing slightly longer download times. They also make the browser work harder to parse the file, further increasing display times. One example of redundant tagging is multiple and identical <font> tags within a sentence, a common side effect of making small edits with a WYSIWYG authoring tool.
Keep good HTML style in mind when naming your files. Consider these guidelines:
- Use the proper HTML document suffix .html (or .htm on a Windows server). Suffixes for a number of common file types can be found in Table 4-1.
- Avoid spaces and special characters such as ?, %, #, etc. in filenames. It is best to limit filenames to letters, numbers, underscores (in place of spaces), hyphens, and periods.
- Filenames are case-sensitive in HTML. Consistently using all lowercase letters in filenames, while certainly not necessary, may make them easier to remember.

WARNING

Line breaks and extra spaces can create unwanted white space in certain contexts. For instance, if you have a string of graphics that should abut seamlessly, adding a line break or a space between the <img> tags will introduce extra space between the graphics (even though, technically, it shouldn't). In addition, extra spaces within and between table cells (<td> tags) can add unwanted spaces in your table. This is discussed further in Chapter 13, "Tables".