Markup for fancy headings

How to mark up elaborate headline structures

Headlines seem like they should be pretty simple, but simple designs rarely survive the design process. Here’s an example of a complicated headline component I see pretty often:

One way you could think of this is as a series of headers, so you just choose them based on their design:

<!-- This is terrible, don't do it. -->
<h4>I read the news today, oh boy…</h4>
<h2>Four thousand holes in Blackburn, Lancashire</h2>
<h3>Now they know how many holes it takes to fill the Albert Hall</h3>

This is the approach I see most often, especially in content designed in WYSIWYG editors. People just kinda pick headers based on what they think looks good and call it a day.

Please don’t do it this way. h1 through h6 should only be used to mark up content in a hierarchical fashion, and when you use them all jumbled up like this it wreaks havoc on the page’s accessibility. (More on this from Yale.)

An older pattern I used a lot was to wrap all the text in a heading and then style portions of it with span. This is the approach I used years ago when I made the now retired Headline Group plugin for Drupal:

<!-- An older recommendation. Workable but wonky. -->
<h2>
	<span class="super">I read the news today, oh boy…</span>
	<span class="head">Four thousand holes in Blackburn, Lancashire</span>
	<span class="sub">Now they know how many holes it takes to fill the Albert Hall</span>
</h2>

This is fine? I guess? It’s not ideal, because the whole block really isn’t the headline. Only the center part is. A sighted user is going to read the headline first, then probably the subhead, and then return to read the text at the top. There’s a visual hierarchy here that’s not really reflected in the experience.

Furthermore, this huge wad of text is going to show up in a screen-reader’s rotor as the heading.

This seems to be the much better approach, using the hgroup or “heading group” element:

<!-- About as good as we can get right now -->
<hgroup>
	<p class="super">I read the news today, oh boy…</p>
	<h2 class="head">Four thousand holes in Blackburn, Lancashire</h2>
	<p class="sub">Now they know how many holes it takes to fill the Albert Hall</p>
</hgroup>

All the text is accessible and read, but the headline is isolated and is more effective as a navigation aid.

hgroup only allows one heading and zero or more p tags, nothing else. So this is incorrect, because a ul is not permitted as a child of a hgroup.

<!-- This will fail HTML validation -->
<hgroup>
	<ul class="tags">
		<li>Songs</li>
		<li>White Album</li>
		<li>Grooming</li>
	</ul>
	<h2 class="head">Four thousand holes in Blackburn, Lancashire</h2>
	<p class="sub">Now they know how many holes it takes to fill the Albert Hall</p>
</hgroup>

If you’re thinking “but those things aren’t paragraphs,” you’re not alone. I don’t think they are paragraphs either, but that’s because I tend to think of paragraphs as “a collection of related sentences dealing with a single topic.” (Purdue Online Writing Lab). We’re not talking about writing semantics here:

…a paragraph, in HTML terms, is not a logical concept but a structural one.

Structurally speaking, then, a paragraph is a group of related inline elements. In this case, inline words, but it could also include any of the items described as “phrasing content” — including images and iframes! Given that, it makes a lot more sense that this is now the recommended approach.