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