In HTML5, the new hgroup element serves an interesting purpose. I want to build you an example, starting with the hgroup element and working outwards to show how it could be part of the new article element.
The hgroup element can contain only h1-h6 elements. Here’s an example:
<hgroup>
<h1>10 Terrific Tech Blogs by Women</h1>
<h2>Code, Gadgets, Issues, and Science</h2>
</hgroup>
It isn’t necessary to use an h1/h2 combination. It could be an h2/h3 or h3/h4. It depends on where you’re putting it. The defining attribute of hgroup elements is that the first heading element is what goes into the document outline. The secondary heading is not part of the outline. The secondary headings in the hgroup are meant for taglines, subheads, and other lesser text that relates to the main heading in the hgroup.
HTML5 contains a new header element. The hgroup element can be nested in a header element, like this.
<header>
<hgroup>
<h1>10 Terrific Tech Blogs by Women</h1>
<h2>Code, Gadgets, Issues, and Science</h2>
</hgroup>
</header>
Keep in mind that the header element can contain other elements such as a nav or a figure, although I don’t have them in the example.
As we keep working outwards from the headings, we can imagine that the header element is part of an article element. That might look like this:
<article>
<header>
<hgroup>
<h1>10 Terrific Tech Blogs by Women</h1>
<h2>Code, Gadgets, Issues, and Science</h2>
</hgroup>
</header>
<p>Tech tips, geeky how-tos, thoughtful analysis of issues, news about the latest gadgets, ideas for improving your blog—you’ll find it all in these 10 terrific tech and science blogs. They just happen to be written by women.</p>
<p>more content</p>
</article>
The article element can also contain a new element called footer. The article footer would contain material relevant to the article—perhaps a date, an author’s URL, or other material.
<article>
<header>
<hgroup>
<h1>10 Terrific Tech Blogs by Women</h1>
<h2>Code, Gadgets, Issues, and Science</h2>
</hgroup>
</header>
<p>Tech tips, geeky how-tos, thoughtful analysis of issues, news about the latest gadgets, ideas for improving your blog—you’ll find it all in these 10 terrific tech and science blogs. They just happen to be written by women.</p>
<p>more content</p>
<footer>
<p>Some footer content</p>
</footer>
</article>
The now complete article represents a stand-alone piece of content. It has a heading and content and can be lifted of-a-piece to be placed elsewhere or syndicated some way. In a document outline, it would appear with all the content outlined under the top level heading in the hgroup element.
Thanks for this. I suspect you’ve been writing other HTML 5 articles too. 🙂 Maybe it’s time I went and read them.
I like the look of this ‘article’ element.
I’m slightly confused by the last sentence about the document outline though. Any chance you could elaborate a bit on that, perhaps with an example? Or should I just read your other posts first?
@Miraz,
Here’s part of the spec relating to outlines:
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#outlines. And here: http://www.w3.org/TR/html5/sections.html#outlines
I think it’s come about as a way to generate tables of content and resembles the more familiar concept of the DOM. HTML5 introduced the idea of ‘sectioning’ content, which includes the new article element and others.
You might want to check out this article at the Mozilla Dev Center. https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document