Chapter 19 | The hgroup, address and heading elements
On the menu today we have the following:
- Heading elements
It’s (almost)all about the headings in this chapter. First up, the
HTML gives us six heading levels. On the surface, they seem pretty straightforward as well. Each heading element has the implicit role of heading and exposes an implicit ARIA level attribute that corresponds to the rank of the heading element. Depending on the hierarchy of the heading, you simply choose the appropriate heading element, and you are done. Right? Well, almost 😉
When we start looking at the semantics and meaning of these elements, things get a little trickier. Using a heading element creates what is known as an implied section. A series of heading elements with the same rank would then create multiple new sections, for example:
If however, a heading element with a lower rank follows one with a higher rank, the latter becomes a subsection of the section created by the higher-ranked heading element, for example:
While the above is useful and practical for simple documents, it is not the most practical approach in real-life documents to simply rely on the implicitness of headings to create sections by themselves. While we are discussing sections and the document outline it is important to touch on the topic of sectioning root elements.
The sectioning root elements are
td. These elements have their own document outline which does not contribute to the overall document outline. For example:
Of course, the
body element is slightly different in this regard as it is the main document that exposes the main document outline. With all of this said, the HTML outline algorithm is still very much in flux(see related reading) and support across browsers and assistive technologies of the new outlining algorithm has not been equally well adopted. It is therefore best to be explicit about our intent when authoring documents.
While there are no hard rules, there is some guidance provided by the WCAG(Web Content Accessibility Guidelines) as well as common best practices. In general, strive for no more than one
h1 element per document. It is also common for the
h1 element to mirror the content of the documents
title element. With our main document title defined we move on to the remaining five heading elements as well as our sectioning elements to identify the explicit sections of our document.
Here again, there are no hard and fast rules but one should keep the following in mind: A higher rank should never follow a lower in the same section, and you should aim to not skip a heading level within a particular section, for example:
The above would generate the following heading level outline:
And the following structural outline:
Is a tomato a vegetable or a fruit? - Vegetable or Fruit? - Tomato - Avocado - Eggplant - Reference - [aside element with no heading] - Table of Contents
Live Codepen - Example use of heading elements
NOTE: You will see while the
blockquoteis included in the heading level outline, it is not in the structural outline.
While being aware of the structure we define when using sections and headings, the most important points to remember are: Markup headings as headings and always, always ensure that the text of your heading elements are descriptive and accurately describe the section it is heading.
Phew, all that talk about headings has given me a headache 😜
hgroup element, as its name suggests, is used to group related headings. For example:
The general semantics and meaning of an
hgroup element is the same as that of the individual heading elements we discussed before. An important point to note about
hgroup specifically though, is that the rank of the
hgroup will be equal to that of the highest-ranked heading level element. In the above example, the rank of the
hgroup would then be level 2.
Expanding on the above example, we can use the
hgroup to be the associated title for the
article element. The really nice thing here is that both headings inside the
hgroup will be treated as a single item and read out as such by assistive technologies. For example:
When a user then browses by landmarks, the above landmark will be identified and read out as follows:
46 results found for css Showing results 1 to 15, article, in main
The name of this element can be a little confusing. While it is called the
address element, it is not typically used to markup arbitrary postal addresses. For this, using a simple paragraph element along with the relevant microdata is more appropriate. If the address being marked up is a company address located in the footer of the company’s website, then marking it up with the
address element would be appropriate.
The guiding principle is that the
address element represents contact information for its closest
body element. Let us look at the landing page for a publication as an example:
Live Codepen - The
From the above, you can see that the contact information for each author is inside the
article element that wraps the article content. The contact information for the publication as a whole is placed inside the
footer element. The nearest ancestor of the
footer element is the
body element and as such the contact information here applies to the page as a whole.
And with that, we have covered all the sectioning elements in HTML. Next, we will dive into grouping content, touching on elements we use very frequently. Keep making the web awesome! 🧐