Hot HTML Summer: Semantic HTML

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 Semantic HTML 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 thing I learned here is how detailed Chrome’s version of the accessibility tree is DevTools. By default you can only view one expanded node at a time, but there’s an explainer with video of the two-step process to enable the full tree view in this Chrome Blog post.

Also, after poking around with the accessibility tree in both Chrome and Firefox (my primary browser), I was wondering why the <footer> was displaying as contentinfo rather than footer when <main> displays as main.

I discovered the answer at MDN…

The contentinfo role defines a footer, containing identifying information such as copyright information, navigation links, and privacy statements, found on every document within a site. This section is commonly called a footer.

I should probably improve my aria role understanding with a Hot Aria Role Summer too.

I’ve decided to not to publish on weekends, the next post will be on Monday. Enjoy your Hot HTML Weekend!