Question about headings

[CletusSpuckler]

I have a somewhat geeky question regarding semantics for all you experts (and non-experts - you're all welcome to answer):

On, for instance, seedmagazine.com, you can see a heading, Departments, marked up as an h2, and a number of articles for various departments of the site below this heading. The structure looks something like this:

<h2>Departments</h2>
<div>
	<h3><a href="#">Ideas</a></h3>
	<h4><a href="#">Some article belonging to the Ideas department</a></h4>
	<p>Text text text</p>
</div>
<div>
	<h3><a href="#">Ideas</a></h3>
	<h4><a href="#">Another article belonging to the Ideas department</a></h4>
	<p>Text text text</p>
</div>
<div>
	<h3><a href="#">World</a></h3>
	<h4><a href="#">Some article belonging to the World department</a></h4>
	<p>Text text text</p>
</div>

To me it would make more sense to have the article title as the "main heading" below the Department heading. What's your opinion? And let's say that you agree with me, how would you code it?

Option 1:

<h2>Departments</h2>
<div>
	<div><a href="#">Ideas</a></div><!-- or maybe a "p"? -->
	<h3><a href="#">Some article belonging to the Ideas department</a></h3>
	<p>Text text text</p>
</div>

Option 2:

<h2>Departments</h2>
<div>
	<h3><a href="#">Ideas</a> <a href="#">Some article belonging to the Ideas department</a></h3> <!-- Include the department in the article heading -->
	<p>Text text text</p>
</div>

Option 3:

<h2>Departments</h2>
<div>
	<h3><a href="#">Some article belonging to the Ideas department</a></h3>
	<h4><a href="#">Ideas</a></h4><!-- Switched the heading order, and would later position this above the h3 with css -->
	<p>Text text text</p>
</div>

Option 4:
Same as option 3, but with some other tag instead of the h4, like a div or a p.

Option 5:
Some other way of doing it I haven't mentioned...


And, for the record, this is not meant as criticism towards seedmagazine, 'cause I really like the site - it's just that the above is a pretty common scenario which I have a tendency to "solve" differently each time I encounter it


OK, shoot!

[CWebguy]

I would stick an H1 in there somewhere, maybe for the departments.

Cheers,

[C. Ankerstjerne]

From the page itself, it would seem that 'Departments' is a suitable H2-level. 'Ideas', 'World', etc. does not seem like headers by themselves to me, but rather categories. It would have made sense to use them as headers if all the articles for one category had one header, but as they stand now, the category does not add value as a header. I would probably use either of these examples:

<h2>Departments</h2>
<div class="articlesnippet">
 <h3><span class="category">Ideas:</span> Mikhail Gromov Given Abel Prize</h3>
 <p>Mikhail Gromov is awarded the Abel Prize.</p>
</div>
 
<div class="articlesnippet">
 <h3><span class="category">Ideas:</span> The Running Man, Revisited</h3>
 <p>The theory that humans evolved as long-distance runners may have legs.</p>
</div>
 
<div class="articlesnippet">
 <h3><span class="category">World:</span> Peer Pressure</h3>
 <p>Rewarding excellent research is easy. Defining excellence is not.</p>
</div>

<h2>Departments</h2>
<h3>Ideas</h3>
<div class="articlesnippet">
<h4>Mikhail Gromov Given Abel Prize</h4>
 <p>Mikhail Gromov is awarded the Abel Prize.</p>
</div>
 
<div class="articlesnippet">
 <h4>The Running Man, Revisited</h4>
 <p>The theory that humans evolved as long-distance runners may have legs.</p>
</div>
 
<h3>World</h3>
<div class="articlesnippet">
 <h4>Peer Pressure</h4>
 <p>Rewarding excellent research is easy. Defining excellence is not.</p>
</div>

[CWebguy]

The way I've always seen it though is the way headers are technically supposed to be used, it would seem strange to not have an h1 somewhere, don't you think? Almost like having a book with no title? What do you think?

Cheers,

[AlexDawson]

Firstly, only one anchor is applied to each of the elements, h3 has an anchor applied but not h4, why C. Ankerstjerne failed to take the anchors into consideration I am unsure. However using the code noted below I believe this would be the correct way to go about it. The appropriate use of H2 for headings and H3 for subheadings is in use in this code. Note here CWebguy that only a single h1 should ever be used and that should be for the document title. I have wrapped what was originally in H3 and linked by an anchor in the anchor (as usual) however have placed the previous content from H4 within the h3 tag next to the anchor itself. What this means is that when it comes to CSS coding your website you can apply the h4 style to the h3 and then apply the h3 style to the anchor (in place) to maintain accurate use of style in the design, finally I would apply display: block; to the anchor, pushing the rest of the h3 onto a secondary line to achieve the final effect.

<h2>Departments</h2>
<div>
	<h3><a href="#">Ideas</a>Some article belonging to the Ideas department</h3>
	<p>Text text text</p>
</div>

[cooper.semantics]

<h2>Departments</h2>
<ul>
	<li>
		<h3><a href="#">Ideas</a> Mikhail Gromov Given Abel Prize</h3>
		<p>Mikhail Gromov is awarded the Abel Prize.</p>
	</li>
 
	<li>
		<h3><a href="#">Ideas</a> The Running Man, Revisited</h3>
		<p>The theory that humans evolved as long-distance runners may have legs.</p>
	</li>
 
	<li>
		<h3><a href="#">World</a> Peer Pressure</h3>
		<p>Rewarding excellent research is easy. Defining excellence is not.</p>
	</li>
</ul>

[CletusSpuckler]

Thanks for your input!

Most of you seem to agree that the two headings h3 and h4 in my example should be merged into an h3 heading and that the h4 should be dropped altogether.

What wasn't exactly obvious in my example is that the anchors in the h3 and h4 tags don't point to the same location. The anchors in the h3 tags link to the departments (or categories, or whatever you want to call it) and the anchors in the h4 tags link to the articles. Doesn't matter much for the coding, though, I guess.

<h3><a href="#" class="category">World:</a> <a href="#">Peer Pressure</a></h3>
<p>Rewarding excellent research is easy. Defining excellence is not.</p>

And cooper.semantics put a nice little twist to it by using an unordered list instead of repeated divs for each article snippet

Who thinks a list should be used in this case? I sort of go by feel when it comes to choosing between a list or div tags (or leaving the "wrapper" element out of it altogether and just use headings and paragraphs) in a case like this. When the article snippet is really short (like, one paragraph with one or two sentances), I tend to go with a list, and when there's more text than that I usually use divs to wrap the article snippets in. Thoughts on that?