H1, H2, H3 Placement, per W3C standards Options

[Jill]

I'm working with a content management system programmer for a client where we will be developing from scratch a new content area of the site. We can pretty much specify any tags we want as it's being built from the ground up.

Question for ours "standards" folks out there:

Since I personally don't care about H tags for SEO purposes, it really doesn't make much difference to me how we use them, or whether we use them at all. (Most of my sites don't use them because we don't build them from the ground up.) However, this site will have a typical page something like this:

----
Major Headline For Page
Subhead, sort of like a tagline describing the page

Body of page will be probably like:

Bold Headline

Paragraph blurb of copy

Bold Headline

Paragraph blurb of copy

And so on.
-----

The developer originally spec'd it out so that the Major headline was H1, and the subhead tagline was H3, with the bold headlines in the body as H2.

Am I correct in thinking that to do it via w3c standards the subhead under the main headline should be H2, and the one in the body text should be H3?

I don't care either way, and neither does the developer, I just always had it in my head that it would be that way.

The W3c page is not all that specific.

How would you guys do it?

Thanks!

J

[torka]

Technically, the H tags should be structured like the outlines we used to have to write for our term papers back in school (yes, I went to school in the Dark Ages when we had to do these sorts of things)...

So, for instance:

H1: topic of the page (aka the title of the term paper)
H2: major topic #1
H3: sub topic #1.a
H3: sub topic #1.b
H2: major topic #2
H2: major topic #3
H3: sub topic #3.a
H4: sub-sub topic #3.a.1
H4: sub-sub topic #3.a.2
H3: sub topic #3.b

That's how I'd do it, at least. (IMG:http://www.highrankings.com/forum/style_emoticons/default/smile.gif)

--Torka (IMG:http://www.highrankings.com/forum/style_emoticons/default/mf_prop.gif)

[SanDiegoMedia]

I'm not the expert, but looking at how it's used I would think the H3 goes under the H1, since the H3 would be used as content under the H1, and the H2 used with the content, since it would be a step down from the main heading, with supporting content under it.

I think the flow works better that way, since the two bolded headlines are sub headings of the main headline AND include content, when the heading under the H1 is just a step up from content.

[torka]

BTW, if the subhead is simply a tagline, and I wanted to structure the page according to the usual accessibility standards, I wouldn't designate it as an H tag at all. I'd make it a regular paragraph and use CSS to style it however I wanted for visual presentation.

Opinions on the use of the H tags vary, but to my mind, the H tags are used to introduce the sections of the page's logical structure. They need to be organized in a hierarchy, from most important to least important within each section. When you jump directly from an H1 to an H3 without an intervening related H2, you break the hierarchy.

My high school English teacher would have rejected any outline I submitted that attempted to use that kind of structure. (IMG:http://www.highrankings.com/forum/style_emoticons/default/nono.gif)

Things like a tag line don't belong in H tags, IMO. Keeping them out of the H tag hierarchy leaves the H tags free to do what they're supposed to do -- and facilitiates any adaptive devices that might want to use those H tags to help their users navigate/understand the organization of the page content.

My (IMG:http://www.highrankings.com/forum/style_emoticons/default/penny.gif)

--Torka (IMG:http://www.highrankings.com/forum/style_emoticons/default/mf_prop.gif)

[qwerty]

If you actually need a subhead under the h1, I'd use an h2 for it, and keep the others as h2 as well. In other words, I agree with Torka (added -- I agree with her first post, although you could certainly use a paragraph instead of a header (IMG:http://www.highrankings.com/forum/style_emoticons/default/smile.gif) ). An h1 is a heading for a page, an h2 describes a section of the page, and an h3 is a subheading for that section.

If this is a matter of the look of the page, just create a class of h2 called "subhead" or something like that, and style it as you like for the specific position of sitting right under the h1. For example, you might want to reduce its top margin and padding from the default.

[Michael Martinez]

It's intended as a sub-ordinal system. Any H1 should apply to the entire page. Any H2 should apply to content within that page, and any H3 should apply to content within an H2, etc.

H1

H2.1

H3.1.1

H4.1.1.1

H4.1.1.2

H3.1.2

H4.1.2.1

H4.1.2.2

H2.2

H3.2.1

H4.2.1.1

H4.2.1.2

H3.2.2

H4.2.2.1

H4.2.2.2

I know it looks ugly, but that is the idea.

In the old days, before anyone cared about search engines, a lot of pages were organized like this. Then frames came along and got people to thinking in a non-linear fashion. We really haven't gone back.

Jill's relegating Hx tags to the trash bin doesn't hurt anything. I think the search engines do a good job at looking at other ways that page content is organized (better now than they a few years ago).

So that's why I say Hx tags are not required, but they are still very helpful, at least if you don't mix your signals.

[lyn]

If you write content in a word processor like MS Word, and use the style sheets there, you'll see a "normal" heading hierarchy when you use the outline view, indents & all. It's like Torka & Michael described. The H#s aren't just arbitrary decriptions - they're structural elements. Also lets you forget about coming up with snappy CSS labels for ordinary stuff.

I will confess to using the lesser headings for features like a tagline or sidebar text, but Torka's para styling is really the better way to go.

[Jill]

Thank guys!

Me feeling was that the one right under the main H1 heading probably didn't need to be a header tag either, but then I thought...well if all those SEOs think that the H's might still help, it probably wouldn't hurt to have it be one. (IMG:http://www.highrankings.com/forum/style_emoticons/default/wink.gif)

Like I said, it doesn't matter to me whether any of 'em are H's, but the developer and client seem to like H's since that's what all the SEOs around the world like to talk about. (Without Meta tags, it seems everyone is at a loss these days for something to say that will help with SEO!)

But it is kind of cool getting to design things from the ground up, so we might as well do things right.

[jehochman]

But it is kind of cool getting to design things from the ground up, so we might as well do things right. 

(IMG:http://www.highrankings.com/forum/style_emoticons/default/clapping.gif)

The W3C code validator never issues warnings or errors for Hx tags, so using them is optional but recommended. The Hx tags have semantic meaning. We don't know how much the SE's pay attention to Hx or will pay attention to Hx in the future. It's easy enough to format Hx tags with CSS. Headings help make copy-dense pages more readable or skimable. That is reason enough to use them, no matter what the SE's think.

Footnote: When you have the opportunity, I strongly recommend validating all pages. Dreamweaver has a button that will validate an entire site at once. When your code is clean, regression testing is so much faster. Nearly 99% of developers think validation is a waste of time. Wrong. Validating saves tons of time.

[Jill]

Headings help make copy-dense pages more readable or skimable. That is reason enough to use them, no matter what the SE's think.

Well you can do that through the use of bold or different font sizes too, so I don't really buy that one.

[qwerty]

That's true. If we leave out the ranking question and the accessibility question, using hx tags for headers doesn't really matter, but your code is cleaner and it's easier to keep track of it if you set up your CSS and your layout based on the actual use some text is going to serve. Let's say you want to put some largish, bold text at the top of the page to tell the reader what the page is about. You could use an <h1> or you could use pretty much any tag, or you could use any tag with a class or an id that you've created. So, your choices:
<h1>topic</h1>
<b>topic</b>
<p class="header">topic</p>

The first choice tells you this is a header. You know what it means, you know where to use it, and where not to, so a year or two down the road, when you do a redesign and change the formatting of that bit of text at the top of the page, you just change the h1.

The second choice uses less characters than the first, and you can use the CSS to format it the same way you would have formatted the h1. But what does <b> tell you, semantically? What is this tag being used for? It's the old tag for bold, but that doesn't mean anything structurally, and even if it did, it wouldn't have to. You just use it to create a line of text that looks a certain way. So when you change the CSS later, be sure to remember that, because it's not going to be self-evident. And if you style the <b> tag to really look like that header, remember to make it a block-level element. But that means you won't be able to bold other text on the page using that tag. No biggie. You'll figure it out.

The third choice is just a waste of code. Why create something when you don't need to?

[Jill]

The first choice tells you this is a header. You know what it means, you know where to use it, and where not to, so a year or two down the road, when you do a redesign and change the formatting of that bit of text at the top of the page, you just change the h1.

But if you're doing it all through a CMS does it really matter? It's not like you go in later by hand (like we're used to) and make little tweaks and changes.

[qwerty]

You still may have to deal with editing the style sheet, so why complicate matters? If you use the tag that structurally represents the purpose for which it exists, you won't have to fiddle around. If you want to change that text from red to blue, you change h1, because it's obvious. It's the KISS thing. It's a header, so use a heading tag, and you'll have yourself a mnemonic no one could forget: a header is a header, a paragraph is a paragraph, a list is a list.

[Jill]

I defer to you, Qwerty, because I really don't work on the design end of things these days, so I'm quite sure you know much more on the topic than I do. (I still don't know much about CSS (IMG:http://www.highrankings.com/forum/style_emoticons/default/tease.gif) )

[Manish]

One more thing could be added H1 has got a size of 24pts and H2 a size of 18 and H3 a size of 14pts, technically speaking it would cover a lot ofspace in that space and may look awkward so I personally would go for H1, then H3 and then in the body H2.

Manish