22

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.

Jono
  • 3,949
  • 4
  • 28
  • 48

5 Answers5

33

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.

Noelle L.
  • 100
  • 6
You
  • 22,800
  • 3
  • 51
  • 64
  • 7
    For HTML5, this does create a wrong outline. All the following content would be in scope of "the best blog in the world", which is typically not intended for a subtitle. You should enclose both headings in a [`hgroup` element](http://www.w3.org/TR/html5/sections.html#the-hgroup-element) instead. – unor Feb 11 '13 at 23:33
  • 1
    hgroup has been dropped by the w3c – jscheel Apr 19 '13 at 20:37
  • 5
    Use

    tag as recommended by W3C for subtitles and style it using CSS. Read more here: http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#common-idioms - and as @jscheel said, the hgroup has been dropped from the specification according to http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html

     – kexxcream Jun 07 '13 at 15:03
  • ["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."](https://www.w3.org/TR/html5/common-idioms.html) – Andre Figueiredo Jan 13 '16 at 19:04
  • @AndreFigueiredo: Updated the answer to reflect the changes to the HTML5 standard after the 2010 working draft the original answer was based on. – You Jan 13 '16 at 21:37
  • Someone in W3C clearly got too busy thinking, that forgot people use a CMS and 1. Do not use classes. 2. They *do* use H1-H6 - And yes, they *do* accent subtitles within a single section / article using `H2-H6` and the "suggestion" does not accounts often for practical use / solution. – Roko C. Buljan Sep 23 '16 at 08:21
8

I would just use a paragraph element, it doesn't feel as odd to me as using a heading element:

<p class="subtitle">the best blog in the world</p>

You's answer ("your answer", "his answer"?) would certainly be the way to go if you're marking up using HTML5.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Hmm. That does make more sense than headings. – Jono Oct 11 '10 at 22:40
  • I agree - since the subtitle is more of a description than any kind of title. If you think of it that way, the `p` tag makes perfect sense. – ClarkeyBoy Oct 11 '10 at 22:43
  • 2
    But the subtitle is (as its name implies) a title, and *should* therefore be a `h2` element. In HTML4, where we can't associate (or couple) `hX` elements like we can in HTML5, we have to resort to this slightly less semantic solution. – You Oct 11 '10 at 22:47
  • 1
    Right. I guess the definition of a 'paragraph' is a bit restricting. More like content? – Jono Oct 11 '10 at 22:47
3

There may be a SUBLINE or SUBHEAD element coming soon that will be most appropriate:

http://www.techrepublic.com/blog/web-designer/html5-hgroup-is-dead-what-you-need-to-know/

Until it becomes available we are left with trying to make H2's (or some other Hx element) or P's or Q's act as sublines/subheads/subtitles, etc. When it becomes available the structure of the content suggested in the original post will, I believe, be as follows (let's assume the SUBHEAD element is what it ends up being):

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

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>

Although I would prefer it to be:

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

<h2>post_title1</h2>
<h2>post_title2</h2>
<h2>post_title3</h2>

The mere fact that a particular SUBHEAD element follows a particular Hx element in my mind would semantically pair those two elements together, just as an H2 (as a subsequent sibling, rather than as a child or other such descendant) following an H1 associates those two elements.

In a world where the vast majority of web developers are clamoring to be allowed to make every single Hx element on their page be an H1 the OP here gets some credit for being concerned with proper heading structure and even going beyond that and recognizing that subtitles are not the same as headers.

Since I can't show rendered code here the Codepen at http://codepen.io/WebDevCA/pen/wzyIH shows a test of the SUBHEAD element and shows that, in my mind, the preferred positioning of it in the DOM is as an immediately subsequent sibling selector to its associated Hx element rather than as a child element inside the Hx element.

Christian Ziebarth
  • 753
  • 1
  • 7
  • 20
1

If you'd use a heading for the subtitle, a wrong document outline would be created.

<body>
 <h1>John's blog</h1>
 <h2 class="tagline">the best blog in the world</h2>
 <div>…</div>
</body>

Here all following content (until a next h1/h2, if any) would be in the scope of the tagline instead of the actual blog title. Which is not what we want for a subtitle.

in HTML5

(UPDATE: The hgroup element got removed from HTML5. See my answer to another question about how to mark up subheadings in HTML5 now.)

For HTML5, there is a new element especially for this use case: hgroup

The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

By using hgroup, only one of the child headings counts for the document outline.

<body>
 <hgroup>
   <h1>John's blog</h1>
   <h2 class="tagline">the best blog in the world</h2>
 </hgroup>
 <div>…</div>
</body>

in HTML 4.01

There would be two ways

1) Include the subtitle in the main heading, probably separated by a colon.

<body>
 <h1>John's blog: <span class="tagline">the best blog in the world</span></h1>
 <div>…</div>
</body>

2) Use a p (or if it's not a paragraph, div) for the subtitle:

<body>
 <h1>John's blog</h1>
 <p class="tagline">the best blog in the world</p>
 <div>…</div>
</body>

(if the immediately following content would consist of paragraphs, too, you could think of using the hr element after the tagline)

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
0

I think the solution should answer the following question: "What would make sense to a screen reader?"

<h1>A BLOG TITLE</h1>
<p><q>the best blog in the world</q></p>
srcspider
  • 10,977
  • 5
  • 40
  • 35
  • 3
    This use of `q` would only be correct if the subtitle is in fact a quote from another source. – unor Feb 11 '13 at 23:38