Search code examples
htmlsemantic-markup

Semantic structure in HTML - Subtitles (Pre-HTML5)

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.

Solution

  • 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.