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