Hot HTML Summer: Headings and sections

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer.

This post covers the Headings and sections module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The implicit role for the site footer is contentinfo.

Ha, answering a question I had in the previous section! And building on that information with more context…

When a <footer> is a descendant of an <article>, <aside>, <main>, <nav>, or <section>, it’s not a landmark. If the post appears on its own, depending on the markup, that footer might get promoted.

Go to this section at Learn HTML.

A layout with a header, two sidebars, and a footer, is known as the holy grail layout.

I did not know this had a name, although that layout was prominent during my time away from web dev. But I also didn’t know these patterns had these names. A bit searching shows holy grail to be a commonly used name, but not so much for the other ones, like Fluffy Center and Deconstructed Pancake. I’ll look them over more closely (Hot Layout Patterns Summer!), but Every Layout is my go-to for layout patterns. Check it out if you haven’t already.

Go to this section at Learn HTML.

The <section> element is used to encompass generic standalone sections of a document when there is no more specific semantic element to use. Sections should have a heading, with very few exceptions.

Using the “should have a heading” guideline is a very easy and useful way to frame it. I can think of a few places where I’m using <section> incorrectly.

Go to this section at Learn HTML.

When a heading is nested in a document banner <header>, it is the heading for the application or site. When nested in <main>, whether or not it is nested within a <header> in <main>, it is the header for that page, not the whole site.

I didn’t know this. I tend to keep my <h1> in <main> and treat it as a page title, but good to keep in mind for designs where it could be tempting to put the <h1> in <header>.