Hgroup element

This page documents use cases and existing usage patterns related to marking up subtitles and taglines within headers.

Real World Examples

The following are real world pages all using various structures to mark up subtitles and taglines for page and article headers. Each one contains the markup copied and pasted directly from the site, only modified where necessary to tidy up whitespace or to omit irrelevant content from the header where indicated.

The Telegraph (UK)

Example article: Coca Cola recipe 'discovered'

<div class="storyHead">
  <h1>Coca Cola recipe 'discovered'</h1>
  <h2>A website claims to have uncovered Coca-Cola's top secret recipe.</h2>
</div>

National Geographic

Example article: Einstein Theories Confirmed by NASA Gravity Probe

<div id="page_head">
  <h1>Einstein Theories Confirmed by NASA Gravity Probe</h1>
  <h2 class="subtitle">Space mission did what the famed physicist said would be impossible.</h2>
</div>

Project Gutenberg

Example article: The War of the Worlds, by H. G. Wells

<h3 class="chapnum">CHAPTER ONE</h3>
<h3 class="chaptitle">THE EVE OF THE WAR</h3>

Example article: The Madcap of the School, by Angela Brazil.

<div style="margin: auto; text-align: center; padding-top: 0pt; padding-bottom: 1em;">
  <a name="CHAPTER_I_THE_MOATED_GRANGE" id="CHAPTER_I_THE_MOATED_GRANGE"></a>
  <h2>CHAPTER I</h2>
  <h3>THE MOATED GRANGE</h3>
</div>

Example article: A Tale of Two Cities, by Charles Dickens

<h1>A TALE OF TWO CITIES</h1>
<h2>A STORY OF THE FRENCH REVOLUTION</h2><br>
<h2>By Charles Dickens</h2>

Note further markup:

<h2 class="booknum">BOOK ONE</h2>
<h2>THE COMING OF THE MARTIANS</h2>
<h3 class="chapnum">CHAPTER ONE</h3>
<h3 class="chaptitle">THE EVE OF THE WAR</h3>

Techdirt

Example article: When Copyright And Contracts Can Get In The Way Of Art

<div class="story">
  <h1>When Copyright And Contracts Can Get In The Way Of Art</h1>
  <h3>from the <i>tales-from-the-creative-front-lines</i> dept</h3>
  <p>...</p>
</div>

XKCD

<div id="topRightContainer">
  <div id="logo">
    <a href="/"><img src="http://imgs.xkcd.com/s/9be30a7.png" alt="xkcd.com logo" height="83" width="185"/></a>
    <h2><br />A webcomic of romance,<br/> sarcasm, math, and language.</h2>
    <div class="clearleft"></div>
    <br />
    XKCD updates every Monday, Wednesday, and Friday.
  </div>
</div>

Yahoo! Finance

Example article: Gas prices expected to drop 50 cents by summer

<div id="y-article-hd">
  <h1 class="test1">Gas prices expected to drop 50 cents by summer</h1>
  <h2>After 44 days of surging gas prices, analysts expect drop of 50 cents by summer driving season<br></h2>
  <a href="http://us.rd.yahoo.com/finance/news/apf/SIG=10kfmofol/*http://www.ap.org/termsandconditions" rel="nofollow"><img src="http://l.yimg.com/a/i/us/fi/gr/ap_106x27.gif" alt="ap" class="sponsorimage"></a>	
  ...
</div>

Oxford English Dictionary

<h1>
  <span>
    <p>Discover the story of English</p>
    <span class="blurb">
      <p>More than 600,000 words, over a thousand years</p>
    </span>
  </span>
</h1>

Dive Into Accessibility

<div id="logo">
  <div class="inner">
    <h1 class="title"><a href="/" accesskey="1">Dive Into Accessibility</a></h1>
    <p>30 days to a more accessible web site</p>
    <a class="skip" href="#startnavigation">Skip to navigation</a>
    <span class="divider">&nbsp;</span>
  </div>
</div>

Calgary Herald

Example article: Cooking Solo Grows Up

<div id="storyheader">
  <div class="headline">
    <h1>Cooking Solo Grows Up</h1>
  </div>
  <div class="clear">&nbsp;</div>
  <div class="subheadline">
    <h2>On your own? You no longer have to put up with cereal over the sink or days of the same old leftovers. Joe Yonan shows us why</h2>
  </div>
  <div class="clear">&nbsp;</div>
  <div class="byline">
    <span class="name">By Gwendolyn Richards, Calgary Herald</span>
    <span class="timestamp">May 8, 2011 2:06 AM</span>
    <span id="lblComment" class="comments"></span>
  </div>
  <div class="clear">&nbsp;</div>
</div>

Panic

Example page: Coda - One-Window Web Development for Mac OS X

<div id="header">
  <h1><a href="/coda/" title="Coda">Coda</a></h1>
  <p>One window web development.*</p>
</div>

Example page: Unison - The Best Usenet Browser / Newsreader, Only For Mac OS X

<h1>
  <a href="http://www.panic.com/unison/" title="Unison - The Best Usenet Browser">Unison</a>
  <br>
  the best usenet browser
</h1>

PCWorld

Example article: Top 15 Android Apps For Smartphone Shutterbugs

<div id="articleHead">
  ...
  <h1>Top 15 Android Apps For Smartphone Shutterbugs</h1>
  <h2>Use these Android apps to add effects to your mobile photos and make them easier to take.</h2>

  <p class="byline">By <a href="/author/Daniel-Ionescu">Daniel Ionescu</a>,
     <a href="http://www.pcworld.com/" target="_blank">PCWorld</a>
     &nbsp;&nbsp; <script type="text/javascript">timestamp(1304707200000,'longDateTime')</script>May 6, 2011 8:40 pm</p>
</div>

Computerworld

Example article: Elgan: How to pop your Internet 'filter bubble'

<div id="article_header" class="clearfix">
  <div id="content_type">Opinion</div>
  <h1>Elgan: How to pop your Internet 'filter bubble'</h1>
  <h2>Personalization algorithms are stereotyping you, then hiding information from you based on that stereotype. Wait -- what?</h2>
  <div id="byline">By Mike Elgan</div>
  <div id="date">May 7, 2011 08:00 AM ET</div>
    ...
</div>

Apple

• Example page: Apple - iMac - Read about the features of the new iMac.

<header class="row flushpad" id="hero">
<hgroup>
<h1><img width="686" height="102" class="center" alt="It’s amazing to look at. And even more amazing to  use." src="http://images.apple.co
/imac/features/images/hero_title.png"></h1>
<h2 class="intro center">A big, bold display. <span class="nowrap">Third-generation</span> <span class="nowrap">Intel
quad-core</span>  processors and the latest NVIDIA graphics. <span class="nowrap">Cutting-edge</span> storage options. And much more.
No desktop has ever brought so much to the table.</h2>
</hgroup>
</header>

• Example page: Apple - Press Info - Apple Launches iPad 2

<div id="content">
  <p>
    <a href="/pr/products/ipad/ipad.html" onclick="s_objectID=&quot;http://www.apple.com/pr/products/ipad/ipad.html_1&quot;;return
this.s_oc?this.s_oc(e):true">iPad 2 images</a>
  </p>

  <h1>Apple Launches iPad 2</h1>
  <h2 class="subtitle"><div>All New Design is Thinner, Lighter & Faster with FaceTime, Smart Covers & 10 Hour Battery</div></h2>
  <p>
    SAN FRANCISCO—March 2, 2011—Apple® today introduced iPad™ 2...
  ...
</div>

DocBook XSL Stylesheets

• All content generated from DocBook yields the following output for title/subtitle (actualy heading levels can vary depending on the depth of element with title/subtitle):

<div class="titlepage">
  <h2 class="title">Title</h2>
  <h3 class="subtitle">Subtitl</h3>
</div>

MiniApps

<hgroup>
  <h1><a href="http://miniapps.co.uk/" title="Home page"><span>MiniApps</span></a></h1>
  <h2>Beautifully crafted mobile web apps.</h2>
</hgroup>

InterACT with Web Standards

<h1>
  <span id="title">InterACT With <strong>Web Standards</strong></span>
  <span id="subtitle">A Holistic Approach to Web Design</span>
</h1>

From the Swedish Magazine Fokus

<h4>Utmanarna</h4>
<p><em>Tio republikanska kandidater som kan bli ett hot mot Obamas andra presidentperiod.</em></p>

The Guardian (UK)

Example article: US prisoners refused all books except Bible

<div id="main-article-info">
  <h1>US prisoners refused all books except Bible</h1>
  <p id="stand-first" class="stand-first-alone">American Civil Liberties Union says jail in South Carolina is banning books 'for no good reason'</p>
</div>

Web sites that do not markup up subtitles at all

Perhaps because the developers lack a compelling pattern?

• IMDB
• Amazon
• Wikipedia