A heading question

@DisfunctionalMay 16.2008

I have a question regarding the use of headings. I understand their partial use but what I don’t understand is how to decide which heading to use i.e. h1 – h6.

Say I use h1 for the page heading, h2 for the section heading and then i have a 3 column layout contained all in one div called content. This has a sub area on the left, a main area in the middle and an extra area down the right which has a load of call to action boxes with headlines.

What heading would I use for the main news area in the center? Would I start off with h2 and work my way down within that area, or is it wrong because I used h2 to define the section?

Also say when I get to a div within the main area that is like a call out box would I use h2 for it or start with h3/h4 because it’s a sub area?

For the area on the right would I start off using h2 again because it’s in a new section or would I use h3 as it’s not so important?

Would subsequent headings in here be ok to go right down to say h6 if needed as I heard that you shouldn’t need to use any more than h4?

Am really confused in how to use these in proper context.

Any advice would be much appreciated.

to post a comment

HTML

10 Comments(s) _↴

@sstalderMay 16.2008 — #In my opinion headings are actually depreciated and shouldn't be used. You should style your own headings with CSS rather than <h1> through <h6>.

@DisfunctionalauthorMay 16.2008 — #That's not right, how can they be deprecated? They are one of the most important parts of a document, especially when using something other than a graphical browser.

How would I style them in that case anyway? By adding classes or id's on everything? You could do that by using the headings and applying styles rather than adding extra code.

I'm just unsure how to use them in context once you drill down further and further through the document.

Any more opinions on my original question would be much appreciated

@sstalderMay 16.2008 — #I should of been more specific. Headings are not depreciated, but the heading tags in HTML are (imo). CSS gives you a much better ability to create "headings" to fit your own style.

Yes you could style them by using a CSS class. You can also use h1 - h6 tags and style those as well, whichever you prefer I suppose. I would prefer to use a class myself.

Im only offering my opinion though, not telling you how to do it ?

@DisfunctionalauthorMay 16.2008 — #Sorry I'm not sure what you mean by depreciated heading tags?

Can you explain or am I just being dumb? For instance I use say h2 like this in my html code:

&lt;div id="main"&gt;
 &lt;h2&gt;My title&lt;/h2&gt;
 &lt;/div&gt;

In my css i would style it thus:

#main h2 { font-weight: normal; color: #000; }

What part of that is deprecated? Are you saying you would so something like:

<strong class="headingStyle">My heading</strong>

Just interested in exactly what you mean?

Any ideas on my original question too - would really like to know how they are supposed to fit in context?

@tracknutMay 16.2008 — #Disfunctional, I think you're approaching it correctly. H1 is the main (only) heading on the page. H2 is your section heading, presumably you might have multiple sections. H3 and on are again sub-headings, and in your particular example I would probably have one ocurrence of H3 in your center column (with H4...6 below it if needed), and I might jump right to H4 on the two other columns if they are "lesser" content.

I usually run out of steam with making this too correct after about H4, and use H4..6 simply as miscellaneous heading styles that are descending in magnitude but don't necessarily appear on the page completely as a "tree" if that makes sense.

I hope that helps. As far as I'm concerned, tags are either deprecated or not, and here is a list that shows which ones are - http://www.w3schools.com/tags/default.asp

Dave

@sstalderMay 16.2008 — #CSS would be:

.headingStyle { // or #main .headingStyle {

font-weight: normal;

font-size: 14px;

color: #000;

}

<div id="main">

<span class="headingStyle">My title</span>

</div>

@ray326May 17.2008 — #The level of the heading indicates a form of nesting in a structured document. H1 for the page, H2 for the sections of the page, H3 for the sections of the sections, H4 and one for further groupings. It's kind of hard for me to envision a page that needed levels deeper than H4 but that's probably just a personal limitation.

Another way to think of them is like the levels of an outline.

@ray326May 17.2008 — #I should of been more specific. Headings are not depreciated, but the heading tags in HTML are (imo). CSS gives you a much better ability to create "headings" to fit your own style.

Yes you could style them by using a CSS class. You can also use h1 - h6 tags and style those as well, whichever you prefer I suppose. I would prefer to use a class myself.[/QUOTE]
Using headings for the way they LOOK is what should be avoided. Headings play an important role in the structure of the document because they have MEANING, which would be lost in your recommended course of action. By all means, define they way they look with CSS but use the TAGS for the semantics they provide.

@rpgfan3233May 17.2008 — #This is exactly why the current XHTML 2.0 draft introduces two new elements: [url=http://www.w3.org/MarkUp/2007/ED-xhtml2-20071024/mod-structural.html#sec_8.8.]section[/url] and [url=http://www.w3.org/MarkUp/2007/ED-xhtml2-20071024/mod-structural.html#sec_8.5.]h[/url]. The idea is that you have a single h element that represents a top-level heading. As you nest sections, you get more specific headings.

With regards to your question, it depends on how you do things in your columns. Personally, I think of headings like an outline, as [url=http://www.webdeveloper.com/forum/showpost.php?p=890589&postcount=8]ray326 said[/url] earlier in the thread. My first instinct is to recommend starting with h3, but it really depends on your page. After all, you only mention a "section heading". You don't really say whether you have a single section or multiple sections. You also don't say what the section headings describe. Does each section heading describe the column that is underneath of it or something else? If the former is correct, start with an h3 inside the columns. Otherwise, keep reading.

My suggestion is to lay out your section headings and organize them like an outline. If you feel that an h2 is appropriate to start with, feel free. Like I said, I don't know your layout or any semantic details of the page, so I can't really provide a complete answer.

@WebJoelMay 19.2008 — #"heading" tags also act like 'tabs' for user-technologies for visually handicapped persons. They can 'tab forward' from the hierarchy of H1, h2, h3, etc. and receive a brief (presumeably aural ("[I]speech[/I]") but possibly braille-output) reading of the [B]title="this section is about la-la-la.." [/B]that should be part of every H-tag. It is meant to summerize the content that comes immediately next. Think "Chapter title & brief description".

It would be okay to use several h3 tags etc. if that section had other sections of equal pertainance under a higher-level encompassing h2. While it would be a bit convoluted to have a full compliment down to and including h6 tags, I [I]have[/I] done this before (perhaps not correctly so), but for the greater part, DO try to keep your h1, h2 and h3 in that order of use (in that order). It 'indexes' the page by topic for quicker scanning by text-readers, and it benefits the page too to have the 'higher level elements' higher/nearer the top of the page. This helps your page be found by 'bots. I have seen pages built that they wanted "an H-tag" at the TOP of the page, but in SMALL size, so they use a [B]h6[/B] tag! This is wrong... a 'text reader' will probably skip the h6 tag, looking for a 'higher-level' (lower number) header tag instead... essentially, try to read your page from the bottom upwards! :eek:

For a correct hierarchy h-tag at the top of a page with small text, one would just use inline style to change the h1 as <h1 style="font-size:1.2em;">small h1 text</h1>

Also in #HTML _↴

Table Help DIVS behaving unexpectedly Layers...

Success!

Help @Disfunctional spread the word by sharing this article on Twitter...

Tweet This

A heading question

10 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

A heading question

10 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #HTML _↴