How to use HTML headers properly?
Something which is not clear in my mind when people talk about semantic html. When you use headers do you use them to mark the importance of the content or section (which is subjective sometimes, could there be more than one h1 per pages), or do you use them to mark up the structure and nesting of the elements ( like: <h1><h2><h3></h3></h2><h2><h3><h4></h4></h3></h2></h1>)
cheers buddies
Observing members:
0
Composing members:
0
9 Answers
Your first idea is right--they should be used based on the importance of the section (yes, it's subjective). Also, there should only be one h1 per page.
They shouldn't be nested.
The HTML elements you are referring to are called headings, not to be confused with HTTP headers. The Web Accessibility Initiative has some good suggestions about how to use them.
http://www.w3.org/WAI/ut3/sitehelp.html
yeah.. Often they are used incorrectly to change how things look. this is INCORRECT
i'm going to give a second to Ben's answer, in part. I think there really should be only one tag per page, likely near the top.
After that though, you should really just treat it like an outline, per se. all of your major sub-headings would be h2's.. but if your h2's had sub sections, then you could use h3's, and so on.
The trick here, though, is that you shouldn't be letting that structure be getting in the way of your content. In essence Ben is still right about how it can be subjective.. because if some sub-section is really more important than some larger section.. you should just give it it's own larger section.
I personally don't think that web content that's header-ed like that should ever really get past an h3.. and even h3 should be infrequently used. There comes a point where people really will just feel like they're reading an outline, and that's not something you want.
in other words.. rule number 1 is still more critical than anything else: design for your audience. best o' luck! :)
The headings are meant for accessibility and how screen readers interact with websites. If you're really curious you should get a screen reader and play around.
I like Ben & Evan's advice; if you're looking for an example, I was just admiring the look of this essay on Tetris, and I notice that they use an h1 header and multiple h2 headers to mark up their content. http://bsixcentdouze.free.fr/tc/tgm-en/tgm.html
I defy anyone to share a nerdier page to use as an example!
(As a side note, I disagree with Perchik -- I think it's appropriate to use headers to modify the look of text for normal web browsing, as long as the headers are also semantically suitable. Of course, Perchik is correct to point out that proper headers should make sites more accessible for screen readers and other devices.)
What I meant, is that if you want text to be size 14 and bold, which happens to be what your h2 is set as, you should NOT use h2
I've heard different schools of thought about using more than 1 H1 heading. I've seen it done a few times recently although I cannot remember where. I know they were using the first one as their logo via image replacement or just a plain image and the second as the most important title/heading of the page.
Thoughts?
@climberusa: alistapart.com uses two h1 headers on some of their pages in just the way you describe -- once in the masthead, and once in the title of the article. That usage makes sense to me.
@Perchik: Ah, I see what you mean now. Good point.
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.