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 : ).
5 Comments
The first example is the most proper one. The H1 element of a document should be similar throughout the site to assert that the visitor knows he is at the same site. This also applies to the TITLE. After establishing the location and main idea of the site, you get into detailed information, which will always fit into the context of the H1 and TITLE tags (otherwise, your site’s name, title and description would be different). Since we can safely assume this connection, the H2 tag is where you define the secondary content of the page. Within the secondary heading would be other headings – tertiary, quadrinary, and so on. These would further define specifics until they reach a point at which the underlying information is completely understandable. You might say it “dumbs it down” to make the content easier to understand. I would have written the following HTML for your example site.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>"The Daily Sports" Newspaper, providing the latest information on all of the different sports in the world, including Soccer, Hockey, Football, Basketball, and more!</title>
</head>
<body>
<h1>The Daily Sports</h1>
<h2>Basketball</h2>
<h3>San Antonio Spurs vs. Miluakee Bucks</h3>
<p>The San Antonio Spurs won a descisive victory over the Miluakee Bucks today ... </p>
<p> -- Written by Bob the Reporter on February 8th, 2005.</p>
<h3>More Basketball news</h3>
<p> ... Text here ... </p>
</body>
</html>
Comment (#) by Jonathan Fenocchi — 8th February 2005.
Ah, crap, all of my HTML was stripped from the comment. How do I show you my example?
Comment (#) by Jonathan Fenocchi — 8th February 2005.
Jona,
Thanks for your example! I’ve just added note about how to write HTML examples. Sorry, my mistake…
The way you showed it is very simmilar to what i would do. But, i wonder—is it more important to maintain the structure, or to present the most speciffic (sub)content as the most important information at the current page. Should we place it within <h1> or just style it with CSS to look like the most important piece of information? What about Google results?
Comment (#) by marko — 8th February 2005.
A tip about heading elements explains the idea I was trying to convey. The heading should be comprehendable out-of-context. You shouldn’t skip headings (e.g., “h1, h3, h4″ is wrong, but “h1, h2, h3″ is fine), because it disrupts logical flow. The font size that your browser gives to these elements automatically (which indicate their priority) should be controlled by CSS.
The purpose of the page should be in H1 tags, just like your title. An example would be animals and their species.
<title>Information about Dogs | Bob’s Information.com</title>
<h1>Information about Dogs</h1>
<h2>Domesticated Dogs</h2>
<h3>Bull Terriers</>
<p> … Text about Bull Terriers … </p>
<h3>German Shephards</h3>
<p> … Text about German Shephards … </p>
<h2>Wild Dogs</h2>
<h3>Dingos</>
<p> … Text about Dingos … </p>
Of course, it’s usually a good idea to have a “Table of Contents” before the content, or a floating table of contents menu. The information should be sorted also. The above example would most likely be separated into two pages - one about domesticated dogs, and one about wild dogs.
Comment (#) by Jonathan Fenocchi — 8th February 2005.
layout C looks the most believable and logical for me. Also semantically correct, since the importance is on the actual article and not on news title on the article page…
Comment (#) by dusoft — 8th February 2005.
Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.