Skip to main content

Day 62 of 100DaysOfSpec, h1–h6, header, footer elements

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

Currently reading in 4.3 Sections

UAs = user agents = browsers and other HTML document parsers/renderers

4.3.6 The h1, h2, h3, h4, h5, and h6 elements

“These elements represent headings for their sections.”

  • Besides default ARIA role (heading), allowed to set tab and presentation.
  • BIG THING: “h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.” Which, according to the code sample, does not necessarily mean that you need to pair heading elements with section elements in one-to-one pairs, but that semantically you are telling whatever parses your HTML document that this element signifies a new segment of info. So. Don’t use for stylistic reasons only.

4.3.7 The header element

“The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.”

  • Sectioning element could mean the document body: probably the most familiar usage to many people: header element as universal site header.
  • Can’t contain header, footer, or main.
  • Besides default ARIA role (banner), only allowed to set presentation. Which is interesting because according to ARIA docs, the banner role is reserved for site-wide info, whereas header doesn’t necessarily need to be used in that context.
  • Sample content for a header: the usual heading elements (h1–h6), table of contents, search, associated logos.
  • header != sectioning content. If you wanted content immediately following the closing tag (</header>) to be considered by parsers another section of content, you’d want to open up a sectioning element: article, aside, nav, or section. And/or MAYBE a heading element? Unclear, h1–h6 are not considered sectioning elements but seem to essentially signify similar hierarchy according to the spec.

“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.”

  • Can’t contain header, footer, or main.
  • Besides default ARIA role (contentinfo), only allowed to set presentation.
  • Don’t actually HAVE to appear at the end of a section.
  • Same as with header, footer != sectioning content.

Responses

My blog uses Webmentions. Responses from Mastodon and other sites that send Webmentions will show up here.

No Webmentions have been sent to this post yet.