Web Development

HTML5 hgroup is dead: What you need to know

The HTML5 Working Group has dropped the <hgroup> element. Here's what you need to know about the change.

The HTML5 specifications and web standards continue to live and breathe as they evolve with the pace of browser adoption and acceptance, and we are seeing some continued advancements (and a few retreats) in recent weeks. In particular, the HTML5 <hgroup> element is now dead following much heated and extended debate. The decision was duly agreed upon by both sides that a new section would be added for “subheadings, subtitles, alternative  titles and tag lines.” The HTML5 Working Group (WG) stated that it does not have a dedicated structure for the markup of subheadings, subtitles, alternative titles or taglines. Steve Faulkner is leading the discussion for a proposed <subline> or <subhead> element which may take the place of the deprecated <hgroup>.  While browsers have not removed support for the <hgroup> element at this time, it is highly probable that they will do so in the near future.

The <hgroup> element was established to group any set of <h1 - h6> elements when the heading has multiple levels, such as is the case with subheadings, alternative titles, or taglines. <h1 – h6> sections may contain headings of any rank, but web authors are still strongly encouraged to use the heading elements of the appropriate rank for a section’s nesting level.

So what is a web developer to do with their newly implemented <hgroup> elements on their HTML5 pages? Nothing to worry about for now, but you might want get prepared before the <hgroup> gets removed from browser support in the future.

Welcome to subheadings, subtitles, alternative titles and taglines

While the W3C states that there are no dedicated mechanisms for marking up subheadings, subtitles, alternative titles and taglines, it has offered several alternatives in its common idioms standard.

The first notation listed in the standard states that h1–h6 elements must not be used to mark up subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

The code example shown below is a sample of title and subtitles for a web page, which are grouped into a <header> element. Since  the author does not want the subtitles to be included within the table of contents, nor are they intended to be a significant part of a new section, they are using the <p> element and are styled using associated CSS to render the title and subheadings within the header.  The demonstration code snippet is displayed below:

<article class="main">
 <header>
   <h1>Coding for a Dynamic Web</h1>
    <p class="subtitle">Demonstration pages, use cases, and sample code</p>
    <p class="date">Last update July 14, 2013</p>
 </header>
</article>

The CSS code snippet is displayed below:

h1{
  font-size: 2.5em;
  font-family: Georgia;
  letter-spacing: 0.1em;
  color: rgb(142,11,0);
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

.subtitle{
  display: block;
  margin-top: 0.5em;
  font-family: Verdana;
  font-size: 1.2em;
  font-weight: normal;
  color: rgb(142,11,0);
  letter-spacing: 0em;
  text-shadow: none;
}

.date{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-bottom: 1px solid rgba(69,54,37,0.2);
  padding-bottom: 0.5em;
}

The resulting output is displayed in Figure B:

Figure-B.gif

Other examples of subheadings include the use of a book title separated by a colon; the W3G provides the demonstration code sample for a single line of code:

<h1>The Lord of the Rings: The Two Towers</h1>

Another option includes an example of an album title where part of the title is included within a <span> element such as the sample code below:

<h1>Ramones <br>

 <span>Hey! Ho! Let's Go</span>

</h1>

Until a mechanism is defined to completely replace the <hgroup> the use of subtitles can be split out with combinations of paragraph <p> and nested span <span> elements for your header sections.




About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

2 comments
simple simon
simple simon

well its great for big companies able to pay others to re-code their websites, but as someone who has a personal 40+ page website that has been online for a decade (OK, some pages are more recent) so I'll be mighty peeved if I suddenly have to rewrite it all just to suit a bunch of self righteous academics and web browsers stopped recognising anything except fully compliant HTML5.

Its not just the hassle, nor just the concern that further changes would be needed when HTML6, 7, 8, come along...   it would take me a week even if I had an empty life with nothing else to do all day!

My website makes extensive use of tables as well as <H group> tabs.

Simon

 

RJBoudreaux
RJBoudreaux

@simple simon Most major text editors allow you to perform a site wide find and replace function. You would simply select the "Find In:" directory or local site and the enter the "find:" string i.e. <hgroup>  and </hgroup> and "Replace:" them with the appropriate code. Depending on your site wide files it should only take a few minutes at most to complete.

Editor's Picks