style guide
Using Headings
Six heading levels are defined in (X)HTML from <h1> to <h6>. These headings should be used to indicate levels of importance within the structure of the (X)HTML document. They are vital to good accessibility of a web page, and can be important in terms of search engine placement.
All to often they are incorrectly used for the purpose of sizing text. All browsers by default size an <h1> element with a large font size and slowly decrease the size down to the <h6> element. But the function and purpose of these headings is far more subtle and important than just adjusting font size.
Hierarchical Headings
<h1> tells us this is the most important heading on the page, but not neccasarily the biggest visually. If your documents are to have a logical structure, then consideration of how to use headings within them is vital. Remember that CSS is used for the visual presentation, and is irrelevant to the meaning, and structual logic of the content.
For example, all pages at UsableType have an <h1> element which is identical on every page. This is the main title of the site and obviously comes at the top of the structure. Below that, each <h2> contains the individual page titles which we consider to be the second most important element in the overall structure. <h4> elements are used for sub-titles within the content, and <h6> elements for menu titles.
There has been much debate over the best way to use headings. For example many people might argue that we are not keeping a logical structure because we have omitted using the <h3> and <h5> headings on every page. However, detail like that is most likely too idealistic and often impractical. Leaving the <h3> and <h5> headings out on our basic pages, gives some flexibility when creating new documents which may require headings elsewhere within the hierarchy. For example, when creating the shop, <h2> headings were used to display the name of the book and <h3> headings for author names.
All that is hot air really. The most important matter is that the code has a logical structure and the headings are used semantically, in the hierarchical fashion that is intended by (X)HTML.
Previous Posts
Latest Links
- Trumpet Quartet
- Bella Tromba this week recording at EMI with Kanye West.
- Are we designers or developers?
- I struggle with this one as well. My title at work is Software Engineer as well, which doesn't help matters.
- Dear W3C, Dear WaSP
- I'm not sure what I think about this. There seems to be a lot of general moaning about this stuff and not very much doing (with a few notable exceptions).
- The King of Web Standards
- Jeffrey Zeldman crowned by Business Week Magazine
- iPhone Javascript and spec benchmark
- Interesting JavaScript benchmarks on the new iPhone vs. Mac Book Pro
