Quick Tip: Using hgroup tag to define headings in HTML5

Posted on Oct 13 2014 - 1:04pm by Eric Tompkins


Using <hgroup> tag to define headings in HTML5

When writing semantic html5, you can use the <hgroup> tag to define your headings properly. Within the <heading> tag you will often have heading tags such as <h1> or <h3> providing your headlines and sub-headlines. You may also need a strapline as well. Since you do not want search engines to use any of these other tags as your headline or simply overlook them all together, it is important to group them with the <hgroup> tag as shown below so they are properly defined.


This allows you to define a collection of headings as being part of the same group.


Summary (from MDN)

The HTML <hgroup> Element (HTML Headings Group Element) represents the heading of a section. It defines a single title that participates in the outline of the document as the heading of the implicit or explicit section that it belongs to.

Its text for the outline algorithm is the text of the first HTML Heading Element of highest rank (i.e., the first <h1>, <h2>, <h3>, <h4>, <h5> or <h6> with the smallest number among its descendants) and therank is the rank of this very same HTML Heading Element.

Therefore this element groups several headings, contributing only the main one to the outline of the document. It allows associating secondary titles, like subheadings, alternative titles, or even taglines, with the main heading, without polluting the outline of the document.

By Eric Tompkins / @_codemics

About the Author

Eric Tompkins is an Experienced Web Developer and Digital Media Professional. As well as a Professional Photographer and Technical Instructor. You can follow on Twitter @_codemics.