Advice is now provided in the HTML spec on how to mark up subheadings, subtitles, alternative titles and taglines using existing and implemented HTML features.
Advice for marking up subheadings and the like
The important question for developers is: How do I mark up these buggers???
To answer this advice and requirements have been added to the HTML specification on how to mark up subheadings, subtitles, alternative titles and taglines:
Note: Example below added 10/5/2013
In the following example the title and subtitles of a web page are grouped using a
headerelement. As the author does not want the subtitles to be included the table of contents and they are not intended to signify the start of a new section, they are marked up using
pelements. A sample CSS styled rendering of the title and subtitles is provided below the code example.<header> <h1>HTML 5.1 Nightly</h1> <p>A vocabulary and associated APIs for HTML and XHTML</p> <p>Editor's Draft 9 May 2013</p> </header>
In the following example the subtitle of a book is on the same line as the title separated by a colon.<h1>The Lord of the Rings: The Two Towers</h1>
In the following example part of an album title is included in a
spanelement, allowing it to be styled differently from the rest of the title.<h1>The Mothers <span>Fillmore East - June 1971</span> </h1>
In the following example the title and tagline for a news article are grouped using a
headerelement. The title is marked up using a
h2element and the tagline is in a
pelement.<header> <h2>3D films set for popularity slide </h2> <p>First drop in 3D box office projected for this year despite hotly tipped summer blockbusters, according to Fitch Ratings report</p> </header>
Note: Some have been advocating of the use of the
small element to signify subtitles. This has been under discussion in the HTML working group, but no compelling arguments for its use have been made. Therefore it is not advised to use
small to mark up subtitles.
What about the document outline?
If you want a subtitle to be displayed in the semi-mythical document outline, include it along with the heading text as per example 1 and 2 above. If you don’t, put the text in a
p element (for example), as per example 3 above.
Questions for developers
Does the advice in the spec cover the use cases you encounter? If not what other advice should the spec include? Are the examples clear and unambiguous? If not how could they be improved? Any other questions you have, ask away in the comments!
If you are really keen you can join the likes of Bruce Lawson, Ian Devlin and myself in the HTML working group and take part in discussion there.
What being obsolete in HTML5 means
must not be used by authors
hgroup like other obsolete features, is non-conforming. This means that a conformance checker displays an error if the
hgroup element is found. The following is the error message displayed by the W3C Markup Validation Service:
hgroupelement is obsolete. To mark up subheadings, consider either just putting the subheading into a
pelement after the
h6element containing the main heading, or else putting the subheading directly within the
h6element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a
spanelement with differentiated styling. To group headings and subheadings, alternative titles, or taglines, consider using the
Like for other obsolete elements, browsers will continue their current level of support for
hgroup. That is, browsers that have parsing and user agent style support will continue to do so, therefore authors that have used
hgroup in their pages do not need to rush out and remove it. The element effectively has no meaning as its semantics have not been implemented. It’s effectively a
div with a funny name.
The whys and wherefores
Much has been discussed and written over the past few years on the
hgroup element and whether it meets the high bar required to include as a feature in HTML, on balance it has been decided it does not. Should this have happened more quickly? Yes , but as Mike[tm]Smith stated recently:
People disagree. Organizations disagree. The task of us all working together to try to overcome our disagreements is time-consuming, often very frustrating, and almost never easy.
If you want to read up on the history of
hgroup there is plenty of stuff available:
HTML working group mail archives 2010 (tip of the iceberg):
- suggestion for abolition of
hgroupand ARIA outline thread
- suggestion for abolition of