Subheadings are one of the most common elements in any website. A few years ago the
hgroup tag was introduced to address this need, but it has since been removed from the specs. Can you describe why
hgroup was dropped and how the markup can be addressed today?
hgroup element was introduced to group multiple heading elements (
h6) in order to avoid the creation of an unintended sublevel in the hierarchy. To understand what problem it tried to address, let’s consider the following markup:
<article> <h1>Main title</h1> <h2>This is a subtitle</h2> <p>This is the content of this section</p> </article>
Outlining the document hierarchy of the previous snippet gives us the following representation:
h1 | ---h2 | p
This simple schema shows that the paragraph content of the snippet is seen as the content of the
h2 instead of the
h1, regardless if this was the intended behavior or not. So if the intention was simply to create a subheading and to associate the
h1, the original markup was incorrect.
hgroup element was introduced to address this issue with ease. Therefore, it was removed from the HTML5 specification in April 2013, due to lack of implementations and lack of use cases, making its use invalid.
A possible solution to create a subtitle so that the paragraph is associated to the
h1 is shown below:
<article> <h1> Main title <span>This is a subtitle</span> </h1> <p>This is the content of this section</p> </article>