Warning:
This wiki has been archived and is now read-only.

Hgroup

From HTML WG Wiki
Jump to: navigation, search

This page documents use cases and existing usage patterns related to marking up subtitles, subheading , bylines and taglines. It provides examples of the markup in conjunction with use of the proposed subline element a replacement for hgroup in HTML5.

Contents

Real World Examples

sourced from whatwg wiki(except the last 2). 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.

Below each example is a code example using the subline element a suggested replacement for hgroup and where appropariate the header element.

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>


Example using header and subline

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

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>

Example using header and subline

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

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 using subline
  <h3 class="chapnum">CHAPTER ONE</h3>
  <subline><h3 class="chaptitle">THE EVE OF THE WAR</h3></subline>


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 using header and subline
  <header 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>
  <subline> <h3>THE MOATED GRANGE</h3></subline>
  </header>

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>
Example subline
  <h1>A TALE OF TWO CITIES</h1>
  <subline> 
  <h2>A STORY OF THE FRENCH REVOLUTION</h2><br>
  <h2>By Charles Dickens</h2>
  </subline>

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>

Example using article, header and subline

<article>
<header>
  <h1>When Copyright And Contracts Can Get In The Way Of Art</h1>
  <subline> 
   <h3>from the <i>tales-from-the-creative-front-lines</i> dept</h3>
  </subline>
 </header>
<p>...</p>
</article>

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>

Example using header and subline

 <div id="topRightContainer">
  <header 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 />
    <subline> XKCD updates every Monday, Wednesday, and Friday.  </subline>
  </header>
</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>

Example using header and subline

<header id="y-article-hd">
  <h1 class="test1">Gas prices expected to drop 50 cents by summer</h1>
  <subline><h2>After 44 days of surging gas prices, analysts expect drop of 50 cents by summer driving season<br></h2></subline>
  <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>	
  ...
</header>

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>

example using subline

note: to use subline requires moving the "blurb" out of the h1. 

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

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>

example using header and subline

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

example using header and subline

<header id="storyheader">
  <div class="headline">
    <h1>Cooking Solo Grows Up</h1>
  </div>
  <div class="clear">&nbsp;</div>
  <subline><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></subline>
  <div class="clear">&nbsp;</div>
   <subline><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></subline>
  <div class="clear">&nbsp;</div>
</header>

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 using header and subline
<header id="header">
  <h1><a href="/coda/" title="Coda">Coda</a></h1>
   <subline><p>One window web development.*</p> </subline>
</header>



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>
Example using subline

Note: this example requires the subheading to be moved out of the h1. 

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

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>


Example using header and subline

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

  <subline><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>
  </subline>
  </header>

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>

Example using header and subline

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

Apple

Note: hgroup is being used incorrectly here

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

<hgroup>
  <h1><img src="http://images.apple.com/imac/images/features_title20110426.png" alt="Its beauty is way more than screen  deep. " width="766"
  height="46" class="center" /></h1>
  <p class="intro">All-new quad-core processors. Advanced graphics. Thunderbolt technology. FaceTime HD. iMac is a desktop workhorse disguised as
  an all-in-one wonder.</p>
</hgroup>
Example using subline

Note: hgroup is being used incorrectly in the example above so have replaed with a div. 

  <div>
  <h1><img src="http://images.apple.com/imac/images/features_title20110426.png" alt="Its beauty is way more than screen  deep. " width="766"
  height="46" class="center" /></h1>
  <subline><p class="intro">All-new quad-core processors. Advanced graphics. Thunderbolt technology. FaceTime HD. iMac is a desktop workhorse
  disguised as an all-in-one wonder.</p></subline>
</div>

* 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>All New Design is Thinner, Lighter & Faster with FaceTime, Smart Covers & 10 Hour Battery</h2>
  <p>
    SAN FRANCISCO—March 2, 2011—Apple® today introduced iPad™ 2...
  ...
</div>
Example using subline
  <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>
  </subline><h2>All New Design is Thinner, Lighter & Faster with FaceTime, Smart Covers & 10 Hour Battery</h2></subline>
  <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>

Example using header and subline

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

MiniApps

Note: the use of hgroup in this instance only serves to mask the h2 from the outline algorithm, there are no distinct styles associated with the hgroup. 

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

example using subline

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

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>

example using subline

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

From the Swedish Magazine Fokus

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

Example using header and subline

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

The Guardian (UK)

Example article: US prisoners refused all books except Bible Note: the example in the whatwg wiki does not include the list links in the div, this may result in the pattern appearing more hgroup like than it is, so have added a collapsed UL to more accurately reflect the content contained in the div. 

<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>
<UL id=content-actions class=share-links sizcache="11" sizset="55">
...
</UL>
</div>

Example using header and subline

<header id="main-article-info">
  <h1>US prisoners refused all books except Bible</h1>
   </subline><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>
 <UL id=content-actions class=share-links sizcache="11" sizset="55">
 ...
 </UL>
 </header>

The Press and Journal

 <article id="2292938" author="calum.ross" title="PJ" comments="No" name="sounion" byline= 
 quot;Calum Ross" subhead="battle lines drawn over city project" strapline="" headline="Row over plans to hold ballot on 
 gardens">
 <articlehtml>
 <h1 class="Headline">Row over plans to hold ballot on gardens</h1>
 <h2 class="SubHead">battle lines drawn over city project</h2>
 ...
 ...
 </articlehtml>
 </article>

Example using article, header and subtitle

<article>
<header>
 <h1 class="Headline">Row over plans to hold ballot on gardens</h1>
  <subtitle> 
   <h2 class="SubHead">battle lines drawn over city project</h2>
  </subtitle>
 </header>
 ...
 </article>

The Independent

Example article Calls to legalise cannabis and ecstasy 

<div class="article-new" id="article">
<h1>Calls to legalise cannabis and ecstasy</h1> 
<p class="tagline">Panel of distinguished world figures wants an end to 50-year war on drugs</p>
<p class="author">
<author>
By Guy Adams</author><br>

</p>
...
</div>

Example using article and subline

<article class="article-new" id="article">
<h1>Calls to legalise cannabis and ecstasy</h1> 
<subline><p class="tagline">Panel of distinguished world figures wants an end to 50-year war on drugs</p></subline>
<subline>
<p class="author">
<author> By Guy Adams</author><br></p>
</subline>
...
</article>

Pelican fly

pelicanfly 

<article id="blogExcerptIntro">
<header>
<h3>Latest Article</h3>
<h4><a href="http://www.netmagazine.com/features/15-surefire-ways-speed-your-site">15 Sure Fire Ways To Speed Up Your Site</a>&lt 
/h4>
</header>
<p><
... </p>
</article>

example using subline

<article id="blogExcerptIntro">
<header>
<h3>Latest Article</h3>
<subline>
<a href="http://www.netmagazine.com/features/15-surefire-ways-speed-your-site">15 Sure Fire Ways To Speed Up Your Site</a>&lt
</subline>
</header>
<p><
... </p>
</article>

Symbly.li

<div id="logo">
<img usemap="#ResetMap" alt="What does this do?" src="/images/logo.gif">
<p>For web, mobile, apps and wireframes</p>
</div>

Example using subline and header

<header id="logo">
<img usemap="#ResetMap" alt="What does this do?" src="/images/logo.gif">
<subline><p>For web, mobile, apps and wireframes</p> </subline>
</header>

Web sites that do not markup up subtitles at all

Perhaps because the developers lack a compelling pattern?

  • IMDB
  • Amazon
  • Wikipedia
  • + about a zillion others...
Retrieved from "https://www.w3.org/html/wg/wiki/index.php?title=Hgroup&oldid=13450"