• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 5. HTML Overview > Tips on Good HTML Style

5.6. 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, that will be easily handled by applications expecting correct HTML, and that will be 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 will display the way you intend it on the greatest number of browsers. Some browsers are quite lax in the way they parse HTML. For instance, if you omit a closing </table> tag, Internet Explorer will display the contents of the table just fine. Netscape Navigator will leave that portion of your web page completely blank.

Some browsers, particularly Opera, are very strict. 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.

To be absolutely sure how you're doing, you should run your HTML code through one of the many available online HTML validation services, such as the one at the W3C (http://www.validator.w3.org). Other HTML validators are listed in Chapter 1.

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. The following conventions serve to make your document easier to read when viewed in a simple text editor.

Capitalize tags and attributes

Tags and their attributes are not case-sensitive, so capitalizing them consistently in a document makes them stand out from the rest of the content on the page.

Use line breaks and tabs for legibility

Because browsers ignore line breaks, tabs, and extra spaces in an HTML document, you can use them to give your document structure. For instance, you can add extra lines between the head and body of the document or tabs before the items in a list. The white space will help differentiate elements on the page.

Adding character spaces and returns will add to the size of your HTML file, so if you are extremely concerned about download times, keep your HTML compact. A new utility called Mizer from Antimony Software strips out all the unnecessary characters, making HTML files 10-15% smaller and allowing the browser to display the page up to 30% faster. For more information, see http://www.antimony.com.

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 created after making small edits with a WYSIWYG authoring tool.

Name your files according to the following guidelines:

  • Use proper suffixes. HTML documents require the suffix .html (or .htm if on a Windows server). Suffixes for a number of common file types can be found in Table 4.3.

  • Avoid spaces and special characters such as ?, %, #, etc. in file names. It is best to limit file names to letters, numbers, underscores (in place of spaces), hyphens and periods.

  • File names are case-sensitive in HTML. Consistently using all lowercase letters in file names, while certainly not necessary, may make them easier to remember.

Mind your line endings.

Although not mandatory, it is accepted practice to keep your line lengths to under 80 characters to make the document easier to view on a wide variety of platforms.

In addition, you should be certain that you set your HTML editor to use Unix-style Line Feed (LF) line endings, particularly if you have a Unix server.[1] Other line ending possibilities are Carriage Returns (CR) used by Macintosh, and Carriage Return + Line Feed (CR+LF) used by PCs. Some editors, such as BBEdit, allow you to set the line feed style under the Save Options.

[1] This tip taken from Creative HTML Design, by Lynda Weinman and William Weinman, published by New Riders Publishing.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint