Heading for Trouble | July 20, 2004

There is an interesting discussion going on over at Jogin.com about the correct use of headlines. I’ve always seen headings as an indication of importance. If you look at this site you’ll see that the main headline for each post is a <h1> and any sub heads are <h2>’s. If you look at the side bar, all the headlines there are <h2>’s as well.

However Thomas points out that if you run such a site through the W3C validator with outline mode checked, you get an interesting result. Outline mode seems to be similar to documents outlines in Word which � if you’re lucky enough never to have used Word � provides you with a structural outline of your document. Looking at the outline of my homepage you’ll see that items in my side bar are being shown as structurally subordinate to the last post on my homepage. This obviously isn’t the case.

So it seems like headings are more to do with structure than importance. If you look at the specs they say

There are six levels of headings from H1 (the most important) to H6 (the least important).

Fair enough. This is probably why I, and many other web designers, have always seen heading levels being related to importance rather than structure. However you’d have thought that this being in the “structure” section of the specs would have been the first clue. The second clue for me is this line.

Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Thinking about it logically, the only way a user agent would be able to do this is if � like the validator outline display � the user agent used the heading levels to extract structural meaning from the document.

So rather than my document structure looking like this:

<h1>Article Headline</h1>
<h2>Article Subhead</h2>
<h2>Article Subhead</h2>

<h2>Sidebar Headline</h2>
<h2>Sidebar Headline</h2>

It should look like this:

<h1>Article Headline</h1>
<h2>Article Subhead</h2>
<h2>Article Subhead</h2>

<h1>Sidebar Headline</h1>
<h2>Sidebar Subhead</h2>
<h2>Sidebar Subhead</h2>

The thing is, you may not always want to display a main sidebar headline. This is another reason why people have chosen to use headlines to denote importance rather than structure. However following the whole “markup first, style later” philosophy, it would seem logical to create the correct page structure and then use CSS to hide any elements that you don’t want to visually display.

What do you think?

Posted at July 20, 2004 9:20 AM

Comments

Nicolas Hoizey said on July 20, 2004 11:51 AM

I really think it’s important to use headings for document structure.

I, for example, use one single h1 for my website identity, one single h2 for the “page” identity (title of the article when accurate), and some h3 for sub headings.

Look the source : http://www.gasteroprod.com/2004/04/21/gastero_prod_4_standards_accessibilite_364.html

I try also to avoid headings in navigational contents.

Mike P. said on July 20, 2004 12:02 PM

My <h1>’s are monogamous ;-]
<h1>Main Page Topic</h1>
<h2>Page Section</h2>
Tags and lesser heading as needed.
<h2>Another Page Section</h2>
Tags and lesser heading as needed.

“However following the whole “markup first, style later” philosophy …[snip]… use CSS to hide any elements that you don’t want to visually display.”
I agree.

Oliver Schwarz said on July 20, 2004 12:07 PM

Over one of my current projects I came to the same question, and I decided as such:

[1]
Use only one h1-headline (as document head)
2
Create a useful structure (using the ‘Outline’-feature in the w3c-validator)
3
Make unused headlines in the page context invisible using CSS

The problem that occurred to me was that I wanted to have a teaser text above entry headlines (the type you often see in newspapers). I didn’t come to a solution yet :(

Chris Vincent said on July 20, 2004 12:28 PM

I was actually thinking about using display: none to hide structurally-sound-yet-unnecessary-for-visual-design headers. Great minds think alike?

Really though, it makes a lot of sense to do your headers in outline format (which has been around since way before MS Word, mind you ;)). It helps immensely for those viewing your page through a text browser, such as Lynx, as your header structure is the only real structure they get to see.

Mike P. said on July 20, 2004 12:42 PM

A second comment to explain the monogamous <h1>’s:

If one thinks of each page of a site as an individual HTML document (which they are), then it could be argued that each document has one overall title/topic/purpose.

Within that overall HTML document are the components that make it up, and as such they are each stucturally pieces of the whole (the whole being represented by the <h1>). Looking at it this way, these components would reside in <h2>’s (and their respective components in <h3> - <h6>).

While here, it is worth mentioning that the official specs say that heading tags “briefly describe[s] the topic of the section it introduces”. Whether you subscribe to one <h1> or two or four, this whole way of looking at laying out a document fits that desciption of the headings.

grant said on July 20, 2004 12:44 PM

Headings are really useful if you use keyboard shortcuts in a good browser.

Opera lets you jump from heading to heading, this makes life so much easier, no more mouse strain - which slows down the path to RSI or shoulder injuries.

If you use XML and XML transforms you can automatically generate a table of contents for your page - why code in HTML at all?

I think the main reasons people shy away from using headings, is because they used to be rendered by the browser as big text. At least now most browsers have good CSS1 support.

The logical tagging style that HTML was intended for, has not been properly adopted - the use of embedded font tags, are a waste of time and increase file sizes. XML is really insistent on logical tagging, and I think even if you continue to use HTML it is good practice to adopt this way of authoring.

Provided you are coding in XHTML, you could always transform old pages to XML, and from there, generate PDFS, HTML etc.

I have no shares in Opera, but if you try the browser you can view pages without tables, in accessibility mode, and with structural tags shown, by doing this you can see just how many sites are not using correct markup, and learn what the good guys and girls do.

G.

P.S. Hi Andy

Andy Budd said on July 20, 2004 12:54 PM

I always used thought it was best to use a single <h1> but now I’m not so sure.

Take a typical news page for instance. You could use a <h1> heading of “News”, then use <h2>’s for each news article headline. However what if you want to have some persistent stuff in a side bar that isn’t directly related to the news section? If you make the headlines of these items <h2>’s you are associating them with the “News” heading which I don’t think is correct.

Surely It would make more semantic sense to give this other section it’s own <h1> heading to indicate that, while it may be on the news page, it’s not news related.

Matthew Pennell said on July 20, 2004 1:19 PM

An additional benefit I’ve found of giving each page section its own h1 (even if you display:none it) is that when you come to redesign, you have an extra element to play around with in the CSS.

Each of the sections of my development site (offline ATM) follows the same structure:

<div id=”section-name”>
<h1>Section Name</h1>
<h2>Heading within section</h2>
<p>Content</p>
</div>

Say I don’t need the h1 - display: none and it’s gone.

But next year when I redesign and decide I need a big heading at the top of the section, I can re-style the h1. This (IMO) is better practice than hanging the CSS off the div or the first h2.

Mike P. said on July 20, 2004 1:21 PM

“However what if you want to have some persistent stuff in a side bar that isn’t directly related to the news section?”

I follow you there Andy.

The way I see it (for the time being ;-) is that although that persistent stuff isn’t directly related to the news section, the <h2>’s reflect how it relates to the HTML document as a whole; that is, where it lies with respect to the structure of the document that has as a main topic, <h1>Main Topic<h1>.

Wow, this instant preview is ‘The s**t’. Nice when typing out longer messages (or ones that require many iterations of type-read-think).

Tomas Jogin said on July 20, 2004 1:23 PM

I think this confusion is all W3’s fault. First they say that “there are six levels of headings from H1 (the most important) to H6 (the least important)” (the spec), and then, they turn around and say that “headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size” (the Validator).

Those two claims are mutually exclusive, Headings cannot be more or less important and at the same time not be used to denote emphasis.

Sloppy wording, perhaps.

Matthew Pennell said on July 20, 2004 1:44 PM

Tomas - Those two claims are mutually exclusive, Headings cannot be more or less important and at the same time not be used to denote emphasis.

This might be a little pedantic, but to be accurate the W3C spec says that it is the heading tags themselves that are important, not that they should be used to indicate importance (within the document). A subtle difference perhaps, but it means that the two definitions are not necessarily mutually exclusive.

Tomas Jogin said on July 20, 2004 1:47 PM

Matthew: You’re right, it’s all in the interpretation of the spec (seeing as how there is no guide), and I think most people have interpreted the spec to mean that Headings are used to denote importance; that’s how everyone uses them.

Matthew Pennell said on July 20, 2004 2:05 PM

It seems we are entering the age of ‘using (X)HTML/CSS elements for the purpose they were actually originally designed for’ - heading tags for content hierarchy instead of relative importance, floats for re-flowing content around items instead of page layout…

Aleksandar said on July 20, 2004 2:07 PM

You need to look at the page as a book, then it will come to its place. It seems that many of you forgot the birth and essence of web - HyperText Transfer Protocol.

I have styled my blog that way and it proves to be very consistent.

The site title is equivalent to the book title, so it is natural H1.

Categories are H2 (~chapters). Side bar should also be H2 (~apendixes, table of contents etc.) - this awaits me to fix it (along with other stuff I don’t have time for).

Entry title is H3 while I used H4 for date and author. H3 can also be used as headers inside of side bar (Appendix 1, Appendix 2..)

That left me with H5 and H6 for inter-entry headers, and that proves to be jsut enough.

Also, if you have time, take a look at www.Yasmeen-Ghauri.com, and turn the styles off in the browser. You can easily see the structure separating various pieces.

Andrei said on July 20, 2004 6:56 PM

“You need to look at the page as a book, then it will come to its place.”

Precisely! And this is exactly what most web pages are not. Is Amazon or eBay a book? Should they be expected to go web standards since the goals of their work on the wbe is very much not an online book? Even most blogs at the home page level are not “books.”

A book is a single stream of information. Web sites are multiple streams of information presented side by side with each other.

That is the crux of the problem, for me at least.

Chris Vincent said on July 20, 2004 8:16 PM

Assuming we look at HTML as something of a fancy outline document…

Outlines follow a very specific format. There is one title/topic line centered at the top, followed by the structural headings, subheadings, etc. Thus, if HTML were to follow this format, I think we would end up using the <title> element for the page’s title, and <h1> would really be the top-level headings.

Unfortunately, we can’t yet do it purely this way without extra markup, as many browsers (and not just IE/Win this time) don’t yet support the CSS (level 3, I think) that will allow us to display elements in the document’s <head> within the document (and rightly so, as CSS3 is not yet a recommendation).

Until then, I don’t feel guilty using <h1> for the page’s title, and then using <h2> for the top-level headings.

Thomas Scholz said on July 20, 2004 10:51 PM

When I wrote my Textbrowser-Userstylesheet, I decided to number all heading to increase the readibility. It’s funny to see leading zero’s on some pages and strange »relationships« due to »misplaced« headings. :)

Mike Stenhouse said on July 21, 2004 9:51 AM

I try and think of headings in terms of SGML - where headings surround the blocks they refer to:

<h1>Some heading
 <p>Content</p>
 <h2>Some subheading
  <p>Subcontent</p>
 </h2>
</h1>

It helps me to visualise how the headings interact with their content… Having said that, I’m still a bit unsure about exactly what that structure should actually be!

I tend to use Chris’ ‘one h1 on a page’ approach, with the h1 reflecting the document title. I know what you mean Andy, when you say that your sidebar might not relate to a title of ‘News’ but what if the page title was ‘News Section’? Some more general copywriting and it makes sense… er, to me at least. But is that more or less helpful to the user?

With Google weighting h1s more heavily than h2s, it also seems to make sense for them to contain the most important information - the page title, and then use subheadings for titles within the content.

Erik said on July 21, 2004 10:04 AM

A book is a single stream of information.

Is it?

If I make a book called “Designers on Designing” where I present thirty designers and their approaches and thoughts on design, it’s not a single stream of information. A reader may jump straight to chapter 12, and start reading about Andrei Herasimchuk. The reader chooses to skip your biography, and go right into your discussion on web design. Finally, he zeros in on your discussion about why people should care about web standards.

Heading One: Designers on Design
Heading Two: Chapter 12 - Andrei Herasimchuk
Heading Three: Biography, Thoughts on Web Design
Heading Four: Caring About Web Standards

I’d have to say web sites are not like all books, but there are certainly many books to which it is comparable. Aleksandar’s comments seem to be directed toward books like the one I described above, where the book has a single topic, but where the reader need not read the book in page order for the book to make sense.

Richard Rutter said on July 21, 2004 10:39 AM

Headings can be used for automatic generation of tables of contents (there is already a Mozilla sidebar which does this); they are used by JAWS to quickly navigate through a document; and headings are used by Google in its ranking algorithms. Given this reliance on headings to determine document structure a few hidden headings to help add clarity and usefulness would not be a bad thing.

As hinted at in earlier comments, the reason we’re having this discussion in the first place is due to the origins of HTML. It was originally conceived as a way of marking up scientific documents with conventional heading, sub-heading, sub-sub-heading structures. Nowadays we are trying to apply the same methodology to more mature, hypertextually complex view Web.

dusoft said on July 21, 2004 11:30 AM

If you don’t want to display your Sidebar H1 headline, just use H1 style=”display: hidden” and that’s it. Eeverybody will be satisfied - users and robots and you since they will get their outline right.

James Stevens said on July 21, 2004 9:56 PM

Ok the first thing that struck me was that you’ve grouped the headings according to your site structure - IE h1 heading, h2 subheading, then for the sidebar h1 heading, h2 subheading. But wouldn’t this also provide some confusion for search engines and other user agents. Both you and I know that the section on the left/right is a side bar, and I dare say the divs have been logically named to represent this.

But how does the Agent know it’s a sidebar? And even if it does, does it understand what a sidebar is? Surely as far as the user agent is concerned all it sees are two h1s on a page, and several h2s. SO you (possibly) have a situation where the agent has to apply precedence to one of 2 h1s on the page. Maybe sidebars need to have h3, or h4s (or whatever is lower than the lowest set h tag of the main content area?)

Or maybe I should stop worrying about it :-D

Greg said on July 22, 2004 4:20 AM

Two things came to mind when I was reading this article.

1) I’ve thought of the elements as structural for as long as I’ve used them.

2) I was under the impression (albeit not until recently) that menus and navigation items should use lists instead of headings, to make them more accessible to screen readers. Structurally very different, but with the right CSS, aesthetically the same.

Greg said on July 22, 2004 4:20 AM

Two things came to mind when I was reading this article.

1) I’ve thought of the elements as structural for as long as I’ve used them.

2) I was under the impression (albeit not until recently) that menus and navigation items should use lists instead of headings, to make them more accessible to screen readers. Structurally very different, but with the right CSS, aesthetically the same.

Matthew Pennell said on July 22, 2004 9:03 AM

Reply to James Stephens:

You highlight the reason why it is important to structure your (X)HTML in such a way so that the important information (i.e. the content) appears first in the code, with the less important stuff (sidebar, page footer, etc.) coming later on.

That way, even if there are multiple h1 tags, the earlier that they appear in the code, the more important they are (and the more important Google et al will consider them).

Nick Fitzsimons said on July 22, 2004 12:57 PM

Surely It would make more semantic sense to give this other section it’s own <h1> heading to indicate that, while it may be on the news page, it’s not news related.

My sentiments exactly. The problem lies in the definition of document (IMHO). If we see an HTML file (or equivalent generated dynamically) as “a document”, then we face the W3C’s suggestion that we should start with h1, and head on downwards.

But why do we need to make that association? If I have a body of text and a navigation bar, I would say that conceptually they are two separate documents, which are presented for convenience within one page. Therefore, a heading on the navigation section can be an h1, subsections h2, and so on, while the body copy has its own h1, and so forth. Make judicious use of divs to make clear the separation of different parts of the page into separate documents and Bob’s your uncle.

Of course, I could be talking utter nonsense here :-)

Silus Grok said on July 22, 2004 5:21 PM

A few points:

First off, I don’t think that it’s too far off the mark to say that the book metaphor is the wrong one for the web… as books (by and large) are linear… and websites (by and large) are not.

Secondly, using H1 to denote the page/document title seems redundant… we have a TITLE tag already. With a little magic, you could pull that data down into the document for added clarity, but I find that the brower title bar and a useful navigation system trump the need (though not the preference) for re-using the title.

Third, the idea that James Stevens floats (that using more than a single H1 would confuse agents) ignores the fact that there are other syntactic clues regarding which H1 is the main story, and which H1 is the sidebar header — namely position. Isn’t it natural to think that the first H1 is more important (whatever “important” means) than the second?

I grant that this doesn’t work in all circumstances, but I think it covers most.

Anyway, those are my 2¢.

PS… Nicolas’ use of H1 for the site name may work for him, but seems to contradict the notion that headers should denote structure, as suddenly the cocept of site isn’t portrayed as a cohesive unit, but rather the empty header on every single page.

Assume one uses LINK tags to denote site structure, then using page headers to denote anything but structure within a page is not only gratuitous, but misleading.

Blake said on July 22, 2004 8:22 PM

I tend to follow the markup-first, style-later notion, simply because the whole idea behind standards is to do things correctly so everything is equal, not just a spew of vomit per web site. Also, CSS has always held enough power to correct any structural issues I’ve ever had. That’s the beauty of it. But hey, my two cents, and I could be wrong.

s t e f said on July 23, 2004 10:43 AM

I do use CSS to hide headings for sidebars and such (well, I did before I went into the redesign process I’m in at the moment).

I tend to look at my source code like in MS Word when outline mode is selected, so that if a section has no heading it just seems natural that it is going to be ‘detected’ as belonging to the last header found.

So, yes, use headers and hide them if need be.

And it does help when you tweak your CSS, doesn’t it, when you don’t have to tweak your code too much.

Meitar Moscovitz said on July 26, 2004 6:26 AM

Like others have said, headings are best suited to being used to denote document structure, not importance or meaning. Using headings to denote importance is somewhat logical but when I follow that train of thought what I see is “This heading is important because of its role in providin the document structure.”

Following this train of thought led me one day the Delorie Lynx Viewer in order to check out the differences in headers and regular, styled text (without the styling, of course). Obviously, the text-only display doesn’t show much difference, other than giving the heading its own line. When I researched the topic further, I discovered that screen readers use headers to give a general page overview. This use is obviously most important to structure, and inherently, importance.

That’s why all the pages I make use <h1> headings for things like the banner, the main content(s) and the footer. This way, screen reader users and plain-text browsers can instantly jump to these sections, and they are not “inside” other parts of the site.

Obviously, footer text, even though part of it may be inside <h1> tags comes at the end of the source, and that’s where the level of importance is denoted: last in source means this is least important.

This has always been what made sense to me ever since I stopped using h1 to make text bigger. ::wink::

Dionise said on July 27, 2004 8:24 PM

giixqa uzapul.

Chris Pratt said on September 27, 2005 5:23 AM

I came here looking for some guidance on how to properly (logically) use the Hn tags, but it seems we’re all trying to make a way through the mire of the Web of the 90’s.

But this got me thinking a bit. Most of the accessibility problems and improper uses of the html structure were a result of “design”. The more I think about it, the web was never really intended for “design”, as perhaps magazines and TV were. The Web was supposed to be about information interchange, and so the most natural structure of the internet should perhaps follow closer to a book than a magazine. Yet, I have to admit that is a bit boring.

I’m just ruminating here, but as an interesting aside, I think blogs such as this one are actually guiding the web back to its roots. Depending on the effort the owners put in some still contain eye candy, but there is still that bookish structure that I think best fits the true purpose of the web.

Anyways, that’s just some thoughts. Interesting entry. I enjoyed reading all you guy’s views on this issue.

Ammon Johns said on January 9, 2006 5:43 PM

Andy, as you say the problem here is structure.

You said: It should look like this:

h1-Article Headline
h2-Article Subhead
h2-Article Subhead

h1-Sidebar Headline
h2-Sidebar Subhead
h2-Sidebar Subhead

But I have to disagree. You see, the topmost heading is the one that heads the entire document, this providing a heading that incorporates BOTH the article (which will have a heading) and the sidebar (which will have a heading.

If you are skipping the step of having a heading that summarizes the entire document with a separate heading for each sub-section of that document, then I have to argue that there should really be no H1 tag at all.

Therefore what I would propose is
It should look like this:

h2-Article Headline
h3-Article Subhead
h3-Article Subhead

h2-Sidebar Headline
h3-Sidebar Subhead
h3-Sidebar Subhead

See how that would answer both the importance AND the structure all at once?

Andy Budd said on January 9, 2006 5:59 PM

Thanks for the feedback Ammon, however there are two issues with your argument. Firstly the title really acts as the heading for the document and secondly, you’re not supposed to skip heading levels.

The problem is that a web page doesn’t necessarily follow the same paradigm as a regular “document”.