Tricky questions on good usage of headers (h1, h2, etc.)

[aqw]

Hi!

I am really confused and frustrated now. I can't figure out how to correctly use the header elements (h1, h2, etc.) in my XHTML document.

The structure of my document is a header, left sidebar, content, right sidebar, and finally a footer.

Convention: Let's wrap the logo in a h1 header (you all know why and I won't explain).

Here are some litigious cases:

1/ On my article page, I have a h2 header with the text Article cats. Under that header are quite some categories as you have understood. Should I wrap each of the article titles in a h3 header even if the category only consist of this title and under it some sub-categories displayed on a single line?

My reasoning goes like this: No, I shouldn't because a category under Article cats isn't a section of the page.


2/ On the same article page, I have another h2 header with the text Articles, which is the articles in this article category. Now, under this header are let's say 15 articles. Each article is like 500px * 1000px. Each article has a title with parentheses after it on the same line with additional info like # of pages and so on (this article is just a quite long snap of a very long article of let's say 50 pages that you will get to when you click the title). How should I mark up the snap article title?

My reasoning goes like this: No, I shouldn't use headers because an article isn't a section of the page. Moreover, as said just above, each article title has elements on the right on the same line in another font size. Should I include those elements in the header then? Moreover, just under the last article and still in the h2 section is a small legend of text. Putting the article titles up in h3s would create a structure like this:

<h2>Articles</h2>
<div class="article"><h3></h3>...</div>
<div class="article"><h3></h3>...</div>
<div class="article"><h3></h3>...</div>
<div class="article"><h3></h3>...</div>
<p id="legend"></p> -> legend comes here directly

<h2>Other h2 header</h2>

This would be absurd. The same applies for the categories (there is a legend describing the colors used in the categories).


3/ In my sidebars, I have various sections like Recommended articles (top list made up of a <ul> and a title, a quick search form (with no title at all!), a quick login form (with a title of the same size as the title of the top list).

How should I mark up these titles?

What am I gonna do about the quick search box with no title? Please note that it lies on the same level as the other 2 elements that have titles. Maybe I could create a header and then hide it with CSS using the display: none property?

Also, please note that the title of the quick login box is within a legend. YOU CANNOT PUT h1 or h2 IN LEGENDS (only inline elements). Nor can you put the legend element in a h2 (checked with the XHTML validator). What am I gonna do?


Thank you a lot! These are some tricky cases that I have failed to resolve.

[ComputerGuru247]

Can I see the site. It is really hard to read all the text and comprehend what is going on. I started drawing a diagram, but then realized it would be easier to see the work.

Thanks

[Tailslide]

If it's a heading then use a heading tag. If it isn't a heading then don't use a heading tag.

In the example you've given it would seem to me that since what you've actually got is a list of articles that what you need is an unordered list underneath the H2 Articles heading.

[Dan Schulz]

This is what I do with my documents:

<h1><span><!-- --></span>Site Title</h1>
<div class="access">
	<a href="#content"><strong>Skip to Content</strong></a>
</div>
<ul id="menu">
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
</ul>
<div class="access">
	<a href="#menu"><strong>Return to Menu</strong></a>
</div>
<div id="content">
	<h2>Page Title</h2>
	<div class="section">
		<h3>Secion Title</h3>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
	</div>
	<div class="section">
		<h3>Secion Title</h3>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
	</div>
	<div class="section">
		<h3>Secion Title</h3>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
		<p>
			 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			 Sed non mi id erat fermentum hendrerit. Aenean lectus. Donec
			 dolor. Curabitur enim quam, dignissim vel, blandit sed,
			 mattis a, leo. Donec ullamcorper. Sed porttitor magna sit
			 amet nibh. Nulla ipsum mi, iaculis a, adipiscing quis,
			 egestas id, neque. Integer at nulla. Nam fringilla mi ac
			 augue commodo ornare. Donec ornare, dui vitae convallis
			 congue, augue dui blandit sapien, in faucibus mauris massa
			 consectetuer purus.
		</p>
	</div>
</div>
<div id="footer">
	<p>
		Copyright &copy; 2006 Fiasco Labs. All Wrongs Reserved. (Now if I
		could only remember the name of the Sitepoint member who thought this
		one up.)
	</p>
	<ul>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
	</ul>
</div>

Basically, the H1 element is used as the site title, the H2 for the page title, and H3 for the content section titles. H4, H5 and H6 are used as further content sub-headings as appropriate.

[Tyssen]

Also, please note that the title of the quick login box is within a legend. YOU CANNOT PUT h1 or h2 IN LEGENDS (only inline elements). Nor can you put the legend element in a h2 (checked with the XHTML validator). What am I gonna do?

You can either style your legend to look the same as other headings on the page (a bit tricky to do cross-browser) or you can decide to replace the legend with a hx tag instead.

[Raffles]

This is what I do with my documents:

<h1><span><!-- --></span>Site Title</h1>

I'm curious... what's the comment in the span for?

[Dan Schulz]

Accesssible image replacement.

[r937]

Basically, the H1 element is used as the site title, the H2 for the page title, ...

fascinating -- all your pages have the same H1?

what do you put into your TITLE tag?

[Dan Schulz]

Oh, the comment in the span. Didn't read your question right. One of the workarounds for IE.

[Stormrider]

All my pages have the same H1 tag as well - is that bad?

[AutisticCuckoo]

All my pages have the same H1 tag as well - is that bad?

Not if all your pages are about the exact same thing.

[eldacar]

The consensus seems to be that Titles and H1s should be page specific.. I certainly agree. What then is the best way to mark up the website name, and other information that is included on each page?

[AutisticCuckoo]

If it's a paragraph (e.g., a logo with a text equivalent plus a tag line), mark it up with <p>...</p>.

If it's contact information, you can mark it up with <address>...</address>.

If there's no semantically correct element type, just use a DIV.