This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Question Time: Using H Tags

27th July 2004

Around the table: Richard Rutter, Jason Santa Maria, Andy Budd, Andy Clarke, Mike Davidson, D. Keith Robinson, Jon Hicks and Paul Scrivens.

H tags. Header tags. Headlines. Those things. Inspired by Jogin’s initial post, others such as Andy B, Richard and Eric Meyer have sought to delve further into the appropriate use of H tags in our designs. For the second round of

Question Time

, I thought it worth examining four or five of the key points and collate specific responses to each. Right, it’s a looong article, so without further ado, I’ll hand over to the panel.

The purpose of H tags has evolved. From their origins as a method for describing a hierarchy of importance within a document, we have grown to make increasing use of them for styling purposes, search engine optimization and non-hierarchical structures. In general, are you using H tags with emphasis on structure or importance?

RUTTER: Primarily I’ve been using H tags for importance. That said, a recent review indicated that I hadn’t done a very good job on my blog home page as I’ve assigned H2s to just about everything that was a heading. My blog post pages fair better, however, as does the new Multimap build.

In retrospect I’ve been defining document structure using other mark-up to supplement headings; named divs, lists, forms , etc, so I until recently I haven’t worried (or even thought) about how headings alone might be useful indication of document structure.

SANTA MARIA: Hierarchal importance first, structural second (if at all). Rather than “heading” tags, I think of them more as “hierarchy” tags. The whole point of moving away from structural markup is to divorce yourself from using tags to describe position, placement, etc.

BUDD: I’ve always used H tags to show importance rather than structure. However this was probably down to a misunderstanding of the specs than by actual design.

CLARKE: More and more, I am concerning myself with making the most ‘logical’ document structure I can. In the past I wouldn’t have been too worried about this as long as the page validated. Now I think that it’s important that I consider that the pages I make ‘live outside the browser’.

DAVIDSON: I use H tags mostly for importance and not for structure.  Requiring web publishers to construct all of their pages as if they were scientific papers is not a concept I subscribe to, and I won’t present my documents in this manner for the sake of a set of rules created before graphical web browsers even existed.  I never liked it when teachers told me how to write, but at least that was in a context of a research paper or essay for which the actual skill of structuring the document correctly was part of the lesson.  State your thesis first, spell out the evidence for and against, analyze said evidence, and restate your thesis at the end.  Great.  Now I know how to write an academic paper.  But that sort of exercise doesn’t show me how to write a poem, a journal, an advertisement, etc.  To try and reduce every page on the web to a rigid hierarchical document is neither necessary nor possible.

ROBINSON: As usual - it depends. I usually do use H tags to set the structure of my pages, especially down at my day job at the hospital. But I don’t always use them as they’re probably intended. I tend to try enforce some sense of hierarchy and importance with them, but it could be argued how well, or how “correctly” I do this.

HICKS: Importance. I don’t feel that there are enough tags to be able to describe structure properly.

SCRIVENS: I have recently shifted back to using H tags for importance with my new redesigns in the works. The problem lies in how do you view H1 tags in your structure. Is the site title the H1 tag or the entry title? So in the end though I can see how it comes down to personal preference as to how you want the site structured, but I do think they should be used for matters of importance and structure over styling purposes. With CSS you have no reason to use a H4 just because you wish to style the text a certain way.

Can we use multiple H1 tags, or should H1 be reserved for a hidden title with sugar on it for Google? Is it appropriate to reserve certain H tags for such specific purposes, and if so, should these be in line with clear understanding from search engines, mobile devices and other tools to expect specific information to be contained within them?

RUTTER: I’m of the opinion that a single page should have a single H1. This is on the assumption that a single page can be, and is, assigned a single title, for instance ‘About Us’, ‘Edit Your Preferences’, ‘Chapter 1’, ‘Map of London’, ‘Shopping Basket’. On this basis I’m also of the opinion that a page should not be without an H1.
That said, it’s easy to throw a spanner in the works. Consider an e-book: said book may be contained in a single HTML document, with the title of the book in an H1 and each chapter title in an H2. Simple. But what happens if each chapter is in a separate document? Suddenly my aforementioned thinking says that the chapter titles should now be H1s. What if there are two chapters to every HTML document? Does each chapter then get assigned an H1 or do we skip the H1 and assign an H2 to each chapter heading? Does it matter? To human readers I would suggest not; to GoogleBot perhaps so.

SANTA MARIA: Every site I create has its name contained in the title tags of each page, and I have never had trouble getting them listed in search engines. Use as many H1 tags as you need to denote the most important areas of a page, especially ones which subsequently need to be divided into smaller sections. H tags are useful for creating an ordered outline for a site. If you order your document in an competent hierarchal flow, it will already be prepared for the search engines.

BUDD: Well nothing in the spec says that we can’t use multiple H1’s as demonstrated by one of the examples it gives. We already have a perfectly good means for showing the title of a page, It’s called the title tag. As such I really don’t see the point of replicating this information in a H1 and then hiding it.

Quite a few people suggest that a page should contain a single H1 tag which describes the whole page. However I don’t think that a single H1 will always logically work. For instance the sidebar on this page is obviously separate from this article. However a single H1 would relate the content with the nav in a way that may not be correct.

CLARKE: Personally I think that there should be only one H1 tag per page. I think of an H1 as a book’s chapter heading. While SEO is important for clients, the content of each H1 should be written to make sense in the context of the book’s chapter list. If H1s relate to the page content and give a reader an indication of content on first glance, they should also be effective for the (secondary) purpose of SEO.

DAVIDSON: You can use multiple anything as far as I’m concerned.  An H1 is no different from any other block-level element, in my opinion.  I expect people in the “H for structure” camp to say it should only be used once, and that’s just fine with me.  Dowhatchalike. I am, however, skeptical as to how much effect the H tag has on search-engine rank. Google rose to superiority by relying on people, not markup, to decide which pages are the most important.  If I write an article about cottage cheese and include the phrase “cottage cheese” in all sorts of H tags and the article isn’t good enough for people to link to it, it will barely even show up in the search results for “cottage cheese” on Google.  If, however, I write a write a scathing expose of the cottage cheese industry, mentioning the phrase only in the middle of paragraphs, and people start linking to the article, the page’s Google rank will be very high.  I’m not saying that H tags have no effect on ranking, only that like everything else on the web, the content matters a lot more than these little pieces of minutiae we all like to argue about.

ROBINSON: I’ve used multiple H1 tags on a page in the past, but I don’t do that anymore. In my own work I have the H1 as reserved for the title of the page in most cases, for a few reasons - including optimization for search engines. But then again, that is how I think the H1 should be used, I’m not sure I’d like that to be a hard and fast rule. As an aside, I think if people want to optimize for Google, they need to start with a proper title. You could have a perfect document structure for your blog posts for example, but if you don’t use a relevant title it won’t make a lick of difference.

HICKS: I see H1 tags as being singular. On each page there should only be one ‘main heading’, and everything else is a sub-heading. I guess this view comes from my time in print publishing, where you always had one A Head in a section, but several B and C Heads.

SCRIVENS: I don’t think multiple H1 tags should be used because this is the highest order of the hierarchy. Again though we are going back to semantics, but if you are setting up a document there is one item that should be of the highest importance. This not only helps Google and other readers of the site, but also helps you as a designer maintain your focus on proper content.

H1-H6 tags are supposedly there to describe the structure of a document - a specific article or item. With this in mind, do you think it appropriate to use them in sidebars, navigation elements, and less important sections of a page (such as a H3 for ‘Blogroll’ or H4 for ‘Latest Photo”)? Is this method wrong considering that search engines may place a certain importance on such sections?

RUTTER: Headings are absolutely appropriate for content outside the main document. Supplementary information deserves headings just as much as main content. After all, ‘Blogroll’, ‘Random Photo’, ‘Join Our Mailing List’ and ‘Latest News’ are all still headings, so what is more appropriate than a heading tag - a paragraph? a div? This is why we ignore the ‘importance’ aspect of headings at our peril.

SANTA MARIA: That’s just it, if we are moving towards a looser markup style like XML where you can use your own naming conventions, its up to you to decide what is actually important on your site and style it accordingly, it doesn’t matter what it is on your site you use them for. You should be able to use the tags wherever you see fit to intelligently order items and sections in basic terms of importance. I don’t believe we need a standard way of using these tags, like always using H2 tags for sidebar headings, that takes too much control out of your hands. I think these things are ordered 1-6 for a reason, to simply denote importance, not structure. Just because something is a H3 doesn’t mean it always goes on the left on everyone’s site. The flexibility to control the document on a site-to-site basis needs to remain intact.

BUDD: If H tags are supposed to describe structure then that’s what they are suppose to do. Considerations about search engines should therefore be secondary. Personally I don’t see it being a problem. For instance, if somebody is searching for colly’s latest photos then they will hopefully come up with a more relevant result.

CLARKE: It’s important to ask yourself questions when placing any element on a page. I think that it’s entirely appropriate to use headings to ‘top’ blog-rolls or any other area of a page, provided that that heading also makes sense in the context of other page elements.

DAVIDSON: I think it’s perfectly ok to use H tags in sidebars and other such things.  I wouldn’t artificially wrap any text in an H tag to increase search engine ranking or anything, but if I feel items in my blogroll are of significant importance, sure, I’ll use H4s for them.  I’m not sure how one can proclaim that unordered lists are the way to set up navigation and not be flexible enough to apply the same thinking to H tags.  Although I use lists for navigation, they were not originally intended for use as such, and I’ve been finding that on various mobile devices, unordered lists are actually detrimental.  Many mobile devices, including Microsoft smartphones, don’t honor display:inline and thus, instead of having a nice tight area at the top of the screen with your navigation links, you end up with a long stacked list that the user must scroll through.

ROBINSON: Again, it depends. In general I think it’s just fine to use an H tag in the side bar - it might not accurately describe the structure of a document, but you can still use it to give appropriate importance. Don’t see anything wrong with that.

HICKS: Even though it may be wrong, I can’t help but use tags like H3 for sidebar headings. In my view, they are headings, and need some sort of markup and hierarchy.

SCRIVENS: I think it’s fine to use these items in the sidebar because even though they may reside on each and every page, they are still part of the document. If not used then they become part of the last heading used in the content and this is not the proper structure for the document.

Related to the question above, if we were to reserve H tags purely for describing the important aspects of a document or article, could or should XHTML2 provide a second set of tags for describing importance within an entire page or site?

RUTTER: I believe something akin to the H1-H6 set of heading tags should be retained as they provide useful information about the document, not to mention handy hooks for CSS and DOM scripting. Perhaps XHTML 2 could look at the array of web sites out there and identify patterns (side bars, supplementary info, whatever) can create suitable tags.

SANTA MARIA: Once again, if you use the H tags in a flexible manner, you wouldn’t need a new set of tags. In order to describe important parts of an article separately from the rest of the page, you would have to think that the article isn’t actually part of that page. The entire page is made up of everything on it (including articles), therefore everything on the page can fall into a hierarchal flow (which can be customized dependent on the site’s content). There really isn’t a need to introduce new tags.

BUDD: Well the title tag should really be used to title the page. And you can always uses a description meta tag to add more information if you feel it’s needed. As far as creating a set of tags similar to the H tag but used to give importance rather than structure, I really don’t see the point.

CLARKE: Thinking about how to describe a content area’s ‘importance’ within the wider context of a site makes for some interesting concepts. I need to give this one a little more thought… crikey this is getting deep… I’m only a simple designer!

DAVIDSON: I’m just not entirely sold on this whole concept of letting XML derive the importance of every single item on every single page.  I think you can do it to an extent, but when you try to get too granular, the model can collapse pretty quickly.  What happens when the importance of certain text changes over time, as in a breaking news story?  What happens when different things are of different importance to different users?  It begs the question “Does ‘importance’ mean ‘importance to the publisher’ or ‘importance to the reader’?”  Often the two are not the same.

ROBINSON: Oh boy, I don’t know. To be honest I can’t even think about XHTML2 yet and anyway, I’m not sure it matters. I mean people use these tags however they feel is best anyway.

HICKS: While it would be useful to have extra tags for showing importance, I wouldn’t fight for it.

SCRIVENS: I thought that’s why we have <em> and <strong>.

H1 is used first, descending to H6. You work down and do not miss out a level, or create a non-descending order. The rules are reasonably vague about this. Do you believe it wrong to toy with the order, or is it possible to create a true descending hierarchy using H tags?

RUTTER: Perhaps the question to ask oneself is: Could I write a table of contents be appropriate to the nature of this page? If the answer is ‘no’ then one is probably dealing with a page under the bracket of ‘Web application’ or ‘entertainment site’ and headings based solely on relative importance would be sufficient, the implication being that no heirarchy need be followed and gaps can be left between the levels.
If however you could write an appropriate table of contents for the page then a stricter, more structured approach would be required. That said, while missing out heading levels may not be best practise, it still may be appropriate. In a world of 3 billion web pages, there’s no accounting for context.

SANTA MARIA: By their very nature H tags don’t just describe importance, but they describe importance in relation to other H elements. So, for example, let’s say I have the title of an article on a page as an H1, the article’s subhead as an H3 placed under that, and the article’s author as an H2 under the subhead. I am merely denoting the importance of the elements in relation to each other; the title is most important, the author is second most important, and the subhead for the article is the third most important, even though it may appear on the page before the author’s name. Descending H tag order exists in your head, on paper, and sometimes (though not always, like in previous the example) on the rendered page. What I am saying is the order in which you use your H tags remains dependent on what content your pages contain.

BUDD: I don’t think the rules are that vague. I think they make it clear that it’s a matter of personal preference:

“Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.”

I try to make sure that levels aren’t skipped as I think it’s “best practice”. However in the heat of battle sometimes it’s just easier to skip a level than to restyle all the heading on a specific page. It seems to me that heading should be used to denote structure, but the heading level you choose is used to denote importance. So if you deem that the headline for your body copy is extremely important, but the subheads aren’t, you could argue that this is legitimate:


<h1>My very important Headline</h1>
<h6>My trivial subhead</h6>
<h6>My other trivial subhead</h6>

CLARKE: I’m also going to be ‘reasonably vague’ about this one too and say “It depends”. You’ve certainly provoked a few dormant brain cells into action with this one Colly ;)

DAVIDSON: It is both possible to create a true descending hierarchy using H tags, and at the same time, completely unnecessary to do so.  The mere fact that there is a finite number of H levels means one of two things:

  1. You are to always limit your documents to six levels of depth.
  2. You are to use H tags more or less as you please to establish a general system of applying importance.

Since the former could be considered patently ridiculous, even in some academic settings, the latter is, by deduction, correct.  I really don’t blame anyone if they want to establish tight structural hierarchies with all of their pages, but I just don’t think it’s necessary.  We have more important things to do, don’t we?

ROBINSON: Do I think it’s wrong? No. You go with what works for you and your project. If this involves creating a non-descending order, go for it. I personally try and stick to the order as much as possible as it seems to make more sense.

HICKS: I like to stick with the order and tend to use just H1-H4. I’ve not come across a situation yet where I need 5 and 6. Generally, I must admit, I feel life is too short to worry about this one. At the end of the day, you have to decide what strategy to use and get on with it…

SCRIVENS: It’s quite possible, especially with CSS. I don’t think it’s wrong to mess with the structure unless you are a pure semantics junkie, but if you can stick to the original idea of H tags then all the better.

Responses

# James responded on 27th July 2004 with...

Wow! Great article. It’s interesting to see how many other issues come in to play when discussing something as simple as H tags. For what its worth, I use a single h1, h2 for article titles, h3 for sub-headings and h4 for blogroll etc (my site will be ready soon). I’ve never used h5 or h6. I do think this issue is down to personal preferences though, seeing as the rules are not especially strict.

# the lazarus corporation responded on 28th July 2004 with...

As one of your panel mentioned, H tags etc were devised to structure primarily scientific documents - they were probably great for their time and fulfilled all the requirements of prehistoric web developers. ;)

Slavishy following this rigid structuring pattern for the present day web is definitely a square-peg / round-hole scenario. 

Having said that, I try to use H tags reasonably sensibly e.g. an H1 tag for the main heading on the page, an H2 tag for a sub-heading within an article on the page, H3 and H4 for navigation menu headings.  I tend to use both the site name and the page title (by which I mean the main h1 heading) in the title tag.

The comment about using H1 tags for SEO and then “hiding” them (presumably using “display:none” or similar) was interesting since I read somewhere that this rather dubious behaviour could seriously harm your search engine ranking - is this an urban myth that I’ve foolishly subscribed to?

Probably the only way out of the situation of using the out-dated universally-defined page structure imposed by the H1-H6 tags is XML - that way you can define the structure of a document (by defining the markup), and you can therefore create a structure which is suitable for the document in question. 

This way we can hopefully avoid being in the same situation again in a few years time of developers bemoaning XHTML2’s inherently defined page structure as being soooo 2004.

# steve responded on 28th July 2004 with...

The side-bar/heading-level issue is really one of “what heading level ought a table of contents carry?” — which may very well be “none of the above”.  Maybe there is a case here for saying that this sort of thing is in fact tabular data, ought be in a <table>, and use table captioning/heading styles instead of <h#>.

Having started on web-pages (admittedly on a hobbyist basis) back when Mosaic was the new cutting-edge Internet technology, I always saw <h#> tags as equivalent to the Heading-# settings in MS Word and used them as such — which does tend to mean <h1> as the page headline (more obvious to the eye than the same text in the window title bar out of a <title> element), <h2> for major sections and descending from there, but usually no lower than <h4>.  This makes sense, I feel, for pages that are primarily there as hypertext, words to read, with optional illustration, and the majority of the links arising from the internal context of the material.  I’m just glad that CSS allows us to de-uglify the results.

OTOH, being driven by the desire to display primarily text with some pictures, and with a fairly hierarchical data structure, my page designs tend to avoid the multi-column/side-bar look, with navigation living at top or bottom instead — the exception being on my blog, where archives and such are floated off to the right in addition to the normal top-and-tail.  There, I will confess, the recent spate of attention to this topic has caused an invisible <h2> and <h3> to appear to make the w3 validator outline balance, though I may take the tabular out-of-hierarchy approach to side-bar headings next time I tweak the design.

# Diane responded on 5th August 2004 with...

I think the most important reason for using H tags for hierarchical structure is that a person using a screen reader (usually visually impaired) can more easily make sense of the contents and also scan for the content they want to read.  If you create websites for government agencies, there are strict guidelines to follow for accessibility.  I find the following tool useful to view my web designs as they would be viewed with a screen reader:  http://www.wave.webaim.org/index.jsp

# Marilyn Langfeld responded on 1st February 2005 with...

I know I’m awfully late to this discussion, but I’ve got a big question to ask.

As a long-time graphic designer who’s designed books, magazines, annnual reports, brochures, etc. I’ve always used a title tag (t1), possibly a subtitle (t2) and then in the body of text, began with h1.

Why on earth hasn’t that standard convention been used in HTML, or at least in XHTML?

It leads to H2 being used for subtitles some of the time, or for main headings (under the title) other times.

It shows the lack of design awareness of the originators of the system, as far as I’m concerned. And leads to confusion, as we see in the discussion.

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 255 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

There are 5 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.