H Tags - clarification of use needed

Trying to be W3C compliant

[Crescendo]

Regarding headers in HTML, in order to comply with the W3C standards, is it correct to use any header you like first, or must you start with H1?

Example: a document has two types of header, the main title and the smaller chapter titles. Must the main title be H1 and the chapter titles H2? (And any sub titles H3 etc.) Or can you have the main title H2 and work down to H3 from there?

The reason I ask is that H1 is too big to use, and I have ended up setting the size via CSS. Then I had to also make H2 smaller as well. I'm not sure this is the way forward, or is it? Are we free to set the header sizes any way we see fit?

[tedster]

One man's opinion here - yes, use CSS to change the appearance of H tags as you will. They are LOGICAL markup, not visual markup, and there's no issue whatsoever with using css for the purpose it was developed to fill.

Because they are logical markup, it is best to use them that way. Usually one H1 tag containing several H2 tags - etc. This, rather than trying to H-tag stuff a page.

I'm not aware of code validity problems (a la W3C) but I do see evidence that this practice helps the words within the H tags get their just emphasis on search results.

Again, this is using H tags "by the book", for the precise purpose that motivated their creation. Always a good idea, I'd say.

[martinibuster]

I css them, too. However, I haven't been able to figure out how to slim down the space between the H1 font and the paragraphs beneath it. Anyone have ideas?

[papabaer]

Margin settings will do the trick in adjusting Headings and following paragraphs (or other elements).

Take a look at the CSS2 display:run-in declaration for a neat use for headings: [w3.org...]

Unfortunately... IE does not yet support this, so you will need to check it out using Opera or Mozilla/Netscape to see another example of "CSS I wish I could use..."

If you are looking to validate according to the WAI or Section 508 Guidelines, you must use heading in a logical progression begininng with H1 and reducing size/importance accordingly. You will not validate (for WAI or section 508) if you skip... going directly from H1 to H3 for instance. As far as standard validation is concerned, there is no penalty.

[tedster]

Wow, a run-in box! Thanks for that papabaer - a typesetter's dream.

About the space issue following (or preceding) an H tag - to get the results you want, it's important to understand the "margin collapsing" that browsers perform. H tags carry a default margin - as well as P tags and other elements.

When two elements with margins follow each other, the margin-top of the second element is not just added to the margin-bottom of the first one. Instead, the two margins are "collapsed", which leaves a gap only the size of larger of the two margins.

So, when an H1 tag, margin-bottom 18px, is followed by a P tag, margin-top 12px, the result is a space between them that is only 18px (the larger of the two margins), rather than 30px (12+18).

That's the way browsers are supposed to do it, and modern browsers do things that way.

If you need to support Netscape 4, however, this is one of it's most notorious flaws. The browser just will not give up the default margin for H tags, no matter what.

The answer I've found is using css to give the "following" paragraph a negative margin-top, instead of the 0. That moves the paragraph up into the H tags box and eliminates the gap. But it does mean separate style declarations - to support NN4, this is almost always a must anyway.

So, for well behaved browsers:

h1 {
margin-bottom:0em;
}
p.follow {
margin-top:0em;
}

and for Netscape 4:

h1 {
margin-bottom:0em;
}
p.follow {
margin-top:-1em;
}

Depending on other style declarations you may need to adjust the -1em. I often end up around -.8em

[martinibuster]

Nice! Thanks! :)

[Crescendo]

There is another way:

h1 {display:inline;}