Question

I’m new to HTML and want to make semantically correct HTML, however I’m finding it hard to work with what seems to be only headings, lists and paragraphs.

Particularly, I can’t find a place that makes sense for subtitles. I’m writing a blog site so lets use that as an example:

A BLOG TITLE
the best blog in the world

post_title1
post_title2
post_title3

Semantically ‘A BLOG TITLE’ is h1. It makes sense to me that the post_titleX are h2, but it doesn’t feel right for the subtitle – ‘the best blog in the world’ to be classed at the same level as them.

Answer 1

The specification has changed quite a bit since the working draft that was up-to-date when this answer was first posted five years ago. As @Andre Figueiredo righly points out in the comments, the published HTML5.2 specification is very clear on this specific use case (emphasis added):

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

In short, use an appropriately classified p element inside a header element:

<header>
    <h1>A BLOG TITLE</h1>
    <p class="tagline">the best blog in the world</p>
</header>

---

In HTML5, there’s an obvious solution:

<header>
    <h1>A BLOG TITLE</h1>
    <h2>the best blog in the world</h2>
</header>

When using HTML4 I personally tend to replace the h2 with p class="tagline", or something similar.

Edit: To motivate the use of h2 in HTML5, think of the title of Dr. Strangelove:

<h1>Dr. Strangelove</h1>
<?>Or: How I Learned to Stop Worrying and Love the Bomb</?>

Does a p element make sense here? Not really — it’s not a paragraph, it’s a title. Does h2 work as-is? No, we might confuse it with subtitles of the text itself. So what do we do? We use h2 and group it with h1 using a header element, thereby getting rid of the ambiguity concerning the subtitles in the text.