Developer

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...

Editor's Picks

Free Newsletters, In your Inbox