Notes for using (X)HTML headers

There are six (6) different flavors of (X)HTML headers...

• <h1></h1> - Highest level (most important)
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6> - Lowest level (least important)

Headers are very important to search engines, screen readers (for those with disabilities), and even some Firefox plugins. They represent logical labels that break up the content on your page into more usable chunks. Some screen readers, for example, offer keyboard shortcuts that allow a visually impaired user to skip through the page header by header. Verbiage in a <h1> element will also index much better than the same verbiage in, say, a <p> element. In fact, the verbiage contained in the <h1> element is probably the most indexable content on your page behind the <title> element contents.

Headers are block-level elements.

By default, browsers usually display header elements in boldface type and in declining font sizes from <h1> through <h6>.

A few rules and tips when using headers...

• Every page should have one, and only one, <h1> element.
• A page may have as many (or none) of the other header elements (<h2> - <h6>) as you wish.
• A header element may be immediately followed by another header element of the same level, a lower level, or one-higher level. A header element may not be immediately followed by another header element that is more than one level higher. (By "immediately followed" I mean the next header element in the page. There may be other types of elements between the two headers, such as <p>s and things.) For example, an <h4> may be immediately followed by an <h3>, <h4>, <h5> or <h6>, but may not be followed by an <h2> or an <h1>.