General Question

zapatoche's avatar

How to use HTML headers properly?

Asked by zapatoche (4points) July 5th, 2007

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

ben's avatar

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.

sferik's avatar

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

Perchik's avatar

yeah.. Often they are used incorrectly to change how things look. this is INCORRECT

Evan's avatar

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! :)

Perchik's avatar

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.

bob's avatar

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.)

Perchik's avatar

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

climberusa's avatar

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?

bob's avatar

@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

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther