The Problems with the Headings
The project i’m currently working on, requires me to re-think/redo structure of the headings in a way somewhat different than i did it before. Searching through my usual resources (W3C and some usual standardista’s blogs) left me with no answer, but with question or two more.
I’ve found that there is at least 4 major philosophies when applying headings:
- headings for structure
- headings for content
- headings for Google
- hybrid headings
Each of these have some cons and pros, which i’ll try to summarize. For easier following, let’s say we are dealing with an online version of some daily newspaper. This newspaper has its’ name for example ”Daily Sports”, and has some categories about football, basketball and skiing. The home page contains hot stuff, and in general gives a quick overview about what’s going on inside the web site. The category page gives an overview of articles within it. The article page contains headlines, images and text, but every article is in some way connected to a few others, so at every article page, there’s a list of related stories. So, we have 3 types of layouts, with the same common elements like navigation, logotype and the usual stuff.
Headings Layout A
In these layouts, headlines are supposed to be styled with CSS to pull user’s attention when viewed in graphical user agent. This means that the article page’s <h3> can be the biggest of all on that particular page.
Home Page
<body>
<h1>Daily Sports</h1>
<p>some content</p>
<div>
<h2>Hot News Overview</h2>
<div>
<h3>Hot News One</h3>
<p>news text</p>
</div>
...
</div>
</body>
Category Page
<body>
<h1>Daily Sports</h1>
<p>some content</p>
<div>
<h2>Category Title</h2>
<div>
<h3>Category News One</h3>
<p>news text</p>
</div>
...
</div>
</body>
Article Page
<body>
<h1>Daily Sports</h1>
<p>some content</p>
<div>
<h2>Category Title</h2>
<div>
<h3>Article Title</h3>
<p>news text</p>
</div>
...
</div>
</body>
Headings Layout B
Headings are related to importance of the content headings. Here the <h1> wraps the main title at the current page.
Home Page
<body>
<h1>Daily Sports</h1>
<p>some content</p>
<div>
<h2>Hot News Overview</h2>
<div>
<h3>Hot News One</h3>
<p>news text</p>
</div>
...
</div>
</body>
Category Page
<body>
<div>Daily Sports</div>
<p>some content</p>
<div>
<h1>Category Title</h1>
<div>
<h2>Category News One</h2>
<p>news text</p>
</div>
...
</div>
</body>
Article Page
<body>
<div>Daily Sports</div>
<p>some content</p>
<div>
<div>Category Title</div>
<div>
<h1>Article Title</h1>
<p>news text</p>
</div>
...
</div>
</body>
Headings Layout C
Previous example is quite inaccessible, so mostly the two mentioned before are combined to satisfy some accessibility requirements (i.e. providing headings for the sections of the page) and to emphasize importance of particular content. However, these layouts are usually improperly outlined by markup validator.
Home Page
<body>
<h1>Daily Sports</h1>
<p>some content</p>
<div>
<h2>Hot News Overview</h2>
<div>
<h3>Hot News One</h3>
<p>news text</p>
</div>
...
</div>
</body>
Category Page
<body>
<h3>Daily Sports</h3>
<p>some content</p>
<div>
<h1>Category Title</h1>
<div>
<h2>Category News One</h2>
<p>news text</p>
</div>
...
</div>
</body>
Article Page
<body>
<h3>Daily Sports</h3>
<p>some content</p>
<div>
<h2>Category Title</h2>
<div>
<h1>Article Title</h1>
<p>news text</p>
</div>
...
</div>
</body>
The <title> Element
The <title> element holds actual name and/or description of the document. It describes what this particular sub-page is about. According to W3C:
“Authors should use the TITLE element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as “Introduction”, which doesn’t provide much contextual background, authors should supply a title such as “Introduction to Medieval Bee-Keeping” instead.”
The <title> element is usually containing something like “Website’s name > Category > Article Title > Article description”.
The Google Aspect
The algorithm by which Google indexes web pages is still quite a mystery. However, extensive usage of headings and <title> element seems to help in gaining higher page rank. Needless to say, applying too many words and phrases into <h1> and <title> may position a web site higher at Google, but is not contextually appropriate. Many authors believe that the real and constantly refreshed content can provide more than adequate feed for the Google , without obsolete SEO (Search Engine Optimization) trickery.
Headings in a Book
If you compare a book and a web site, there is certain similarity–at least as i see it: The <h1> of a book is it’s title, for example “Web Standards Book”, <h2>s are titles of the chapters–“Markup”, “Styling” and “Scripting”, <h3>s are titles of the particular stories–“HTML”, “XML” and “XHTML” in the “Markup” chapter; “CSS” and “XSL” in the “Styling” chapter; “DOM” and “ECMA” in the “Scripting” chapter… you got the point. The way i see it–the <title> is that small text in the upper-left (or upper-right) corner telling you the title of a story, chapter or the of a book. Or am i wrong?
The Questions
- Which of the three simplified layouts is the most correct?
- Is the separation of the presentation and structure also a separation of presentation and context (or context and structure)?
Related reading
- The global structure of an HTML document (w3.org)
- HTML headings (htmldog.com)
- Pick a Heading (meyerweb.com)
- Hierarchy (Jogin.com)
Update
I’ve just read this morning an excellent entry by Andy Budd Heading Elements, Semantics and the Spec. If i read that before, my questions would be answered : ).