Please note that you may have been redirected (you might like to make a note of the URL in the address bar of your browser and update accordingly) This is a permanent archvie but is no longer actively maintained. Please visit http://joshuaink.com for the latest updates.

Heading semantics

Monday January 10, 2005

The correct use of headings is, I believe, the subject of heavy debate whenever mentioned, so here I go, throwing myself to the lions once again!

I have adopted, for the large part, quite a simple approach to heading structure.

Level one headings

I have a tendency to only ever have one <h1> on any given page; right at the top, doubling up as a link back to the root directory (or the homepage). This serves two purposes. Firstly, as an escape route for users who are perhaps using a screen reader, or a text only browser and therefore do not have the luxury of visual indicators. If I was an American shrink I might call it the comfort zone, it's always there right where you would expect it, the route home, no matter how lost you get.

The second purpose is a purely graphical representation of the above, I nearly always use some flavour of Fahrner Image Replacement to turn this link into a 'clickable' logo, which just seems like the logical thing to do, as this is what most people expect logos on websites to do, right?

Level two headings

Page by page I use <h2>'s to indicate different "sections" of a page, that's it, nothing more. In my head I imagine this as creating blocks of content, each quite distinct from the other (and of equal importance) but all part of the whole (the whole being represented by the single <h1>).

Everything else

All headings after that i.e. <h3>, <h4> (<h4> always coming after <h3>, so on and so forth) are used as sub headings within each "section" of the page.

Quite simple really, and at the time of making this post I certainly need to review certain areas of this site.

  1. Pierce

    1326 days ago

    I do it exactly the same. So this comment is rather redundant.

  2. jolo

    1326 days ago

    Semantics plays really important in document structure, I always use <h1> to serve as the main title heading of my site, it also has a link back to my homepage but it is styled to be hidden within the browser, I place <h2> on each title post – indicating the title of each post I make, I am not a semantic jock, I do this to clearly show what’s latest on my journal.

    <h3>, <h4>, <h5> comes also as my subheadings. What I actually doing, (correct me if I am wrong) was a top-down document structure.

  3. Turnip

    1326 days ago

    I agree with you. I would definitely always have just the one <h1> on a page.

    The one thing I’m not so sure about is having the <h1> as a link. If I see a link that says “Home”, it is obvious to me that the link would take me to the home page. However, if I see a link that says “Joshuaink”, it would be logical to conclude that the link will take me to Joshuaink(.com). But aren’t I already at Joshuaink? Is there a different Joshuaink? WTF? It just seems slightly… meaningless. (Maybe I’m on my own here?)

  4. John Oxton

    1326 days ago

    It’s a point indeed and 9 times out of 10 I usally include a home link, or something to that effect as well as the one contained in the h1.

    I wouldn’t say it was pointless though.

  5. Keith Bell

    1326 days ago

    Pretty similar, though depending on circumstances I might use the H1 for the site title or for the page title. But never more than one H1 on any given page.

  6. Rob

    1326 days ago

    I guess I’m different here. I use the h1 tag for section headings and do on occasion use multiple on a page. I know that the heading tag is heavily taken into account by search engine spiders and I would imagine that a higher weighting is put on h1 tags than h2.

    Seems to me that you’d want your post title to be the focus of your page, not the site title. Am I way off here?

  7. Roger Johansson

    1326 days ago

    I use h1 for the page/document title. No links, no FIR, no images. Only one h1 per page.

    I think using h1 to hold a logo + link back to the home page is to waste a good semantic element (good for users as well as for search engines).

    You’re right about most people expecting the logo to be a link back to the home page, but I prefer using a div (or just the img element) for it.

  8. John Oxton

    1326 days ago

    Roger, not sure if you’ll come back here to read the comments but that is an interesting comment. It would be really good to know why adding a link to the h1 is a waste? Because I haven’t got a clue about this! :-)

  9. Eric

    1326 days ago

    Offtopic, John are you planning to use Textpattern RC2? Should be out in the next few days (was supposed to be today).

  10. Andrew Hume

    1326 days ago

    I work along the same lines as you John. One h1 on the page, which usually contains an image (either via ‘img’ element or FIR depending on the usage) of the logo.

    I don’t see how this is a waste of a semantic element though. I think it’s a pretty good way of incorporating a logo or other visual home link in a semantic way. If your h1 say ‘Joshuaink’ and your logo says ‘Joshuaink’ it makes perfect sense to tie the visual and structural elements together.

    Also, I think having your logo link to the home page is a pretty standard feature these days. Isn’t it?

  11. John Oxton

    1326 days ago

    Eric I was hoping textpattern version one was being released today. Still who am I to complain and yes, whatever is released I will install within a few days – then watch my hacked plug-in selection fall over no doubt! ;-)

  12. Schultzy

    1326 days ago

    well basicaly I must disagre I think h1 can be used as long as there is a need to I usualy use 2 max.

    I usualy have one for a text logo as I now tend to have no logo image just text and I have a h1 tag for the main page header title thing.

    I think that is fine but maybe I am wrong but I still would class my “logo” text as a title and worthy of a h1 and you should not have a H2 before a H1.

    I also think my page heading bit should be a H1 because it is important.

  13. Andrew Hume

    1326 days ago

    Well… and I don’t wish to be involved in one of these structure rows, but:

    Isn’t your ‘logo text’ more important than the title of the ‘page header’? If there is a hierarchy, some may argue that the logo is at the top. Perhaps.

  14. Wim

    1326 days ago

    I second Johan

    The h1 is reserved for the document title. Mostly I try to make the logo no more then a link to the homepage.

  15. Schultzy

    1326 days ago

    yes yes but surely you dont want a search engine to pick up just the logo.

    And if i used a image I definataly would use H1.

    I cant find on the W3C site that there about number of H1’s.
    The html validator does not say my code is wrong either

    Oh and I definataly would always include a link to the home custom practice I guess
    and all lower heading tags I usualy include below a bigger one.

    But you should remember that it only implies more emphesis so why should you not have as many H1 tags if you like if you like to shout!

  16. Andrew Hume

    1326 days ago

    Absolutely no reason Schultzy, it’s a totally subjective matter. It certainly won’t stop your documents validating, and I don’t think the W3C say anything more than that they should be used sematically to imply a documents structure.

    I just feel that a documents structure starts with the site title and works down. But I have heard plenty of good arguments against that case too.

    That they imply ‘emphasis’ is a slightly arguable point. I mean you don’t use them to apply emphasis within a sentance of course. They are definitely for headings.

    As I said, it’s purely subjective – a personal thing.

  17. Schultzy

    1326 days ago

    Yes I agree I think that using them in a sentance would be stupid maybe I was going over the top but yes I think It is fine to have as many H1 tags imagin a book that could not have more than one heading in 72pt say it is getting too restrictive I say.

  18. Andrew Hume

    1326 days ago

    Doh… I’m getting drawn into an argument over personal preference here – very bad form! But…

    What about the books title? Surely that would be on top of all other 72pt headings? Structurally speaking.

  19. Roger Johansson

    1326 days ago

    John: I’m back! (After my ISP took a two hour break. Grr.)

    I think having only a link/logo/site name in a h1 element is a waste, because it doesn’t tell search engines or site visitors what is special about the page they are currently viewing. Unless it’s the home page, where the site name and/or logo would be fine in a h1.

    This is a subject we could go on arguing about forever though. ;-) And it’s been argued over before:

    http://jogin.com/weblog/archives/2004/07/19/hierarchy

    http://www.andybudd.com/archives/2004/07/heading_for_trouble/

    http://www.collylogic.com/index.php?/weblog/comments/question_time_using_h_tags/

  20. Schultzy

    1326 days ago

    yes but what if the book was a double book.

    You cannot restrict people I think maybe have a limit but just one I think is bad.

  21. John Oxton

    1326 days ago

    Roger Thanks for that, it makes perfect sense now. Time for a little re-think on the use of H1. Thanks for the links also.

    Schultzy and Andrew play nicely you two! ;-)

  22. Schultzy

    1326 days ago

    Yes and having logo text in say a span div or whatevertag is not semantic so it should be H1.

    And to be friendly with searchengine users you should hvae a descriptive page header as a h1 too I think

    OK thats me done!! hehe

  23. Andrew Hume

    1326 days ago

    Yep. Valid point Schultzy.

    As Roger said… we could be here all night. It’s a personal thing. :)

  24. Jeff Smith

    1325 days ago

    I agree with Roger on this issue. Since starting my new job, I’ve been picking up a lot more tips regarding search engine optimization, and heading tags are something that search engine spiders look for when they crawl your site.

  25. Hans

    1179 days ago

    Like many, I feel h1 is “special” and there must only be one of them—as my logo. h2 is reserved for the main heading of the content—be it a post, an about page article, or the contact form header. h3 is rarely used, only for subheadings in posts or post titles under the search form title (when searching).

Christmas gifts?

Beginning CSS Web Development book cover

Recently

The last seven posts made on this site.

Geeky shiteMeta

A proud member