What are the key takeaways from this Full Stack Radio episode?

Key insights include: **Heading hierarchy:** Use single h1 per page as most important element, followed by h2s and h3s in proper order. HTML5 sectioning elements never implemented automatic outline algorithm, so sequential heading levels remain critical for screen readers navigating document structure and assistive technology understanding page organization.; **Article element definition:** Think of articles as individual items that stand alone independently, like articles of clothing rather than publication articles. Each Airbnb listing card, tweet, or blog post qualifies as an article element. Pages can contain unlimited articles without confusing screen readers or creating accessibility issues.; **Hidden heading strategy:** Major sites like Facebook use visually hidden headings to create proper document outlines separate from visual design. Each section receives an h2 title even when not displayed, allowing screen readers to navigate while designers maintain visual flexibility without compromising semantic structure or accessibility requirements.

What did Aaron Gustafson discuss on Full Stack Radio?

Aaron Gustafson from Microsoft Edge explains semantic HTML for web applications, covering heading hierarchies, sectioning elements like article and aside, navigation patterns, form labels, and how proper markup enables screen readers and digital assistants to parse content. Key topics include: **Heading hierarchy:** Use single h1 per page as most important element, followed by h2s and h3s in proper order. HTML5 sectioning elements never implemented automatic outline algorithm, so sequential heading levels remain critical for screen readers navigating document structure and assistive technology understanding page organization.; **Article element definition:** Think of articles as individual items that stand alone independently, like articles of clothing rather than publication articles. Each Airbnb listing card, tweet, or blog post qualifies as an article element. Pages can contain unlimited articles without confusing screen readers or creating accessibility issues..

How long is this episode of Full Stack Radio?

This episode is 69 minutes long. SignalCast provides an AI-generated summary so you can get the key insights in about 3 minutes.

Full Stack Radio

118: Aaron Gustafson - Semantic HTML: The Hard Parts

July 3, 2019

69 min episode · 2 min read

Aaron Gustafson

Episode

69 min

Read time

2 min

Topics

Productivity, Relationships, Design & UX

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓Heading hierarchy: Use single h1 per page as most important element, followed by h2s and h3s in proper order. HTML5 sectioning elements never implemented automatic outline algorithm, so sequential heading levels remain critical for screen readers navigating document structure and assistive technology understanding page organization.
✓Article element definition: Think of articles as individual items that stand alone independently, like articles of clothing rather than publication articles. Each Airbnb listing card, tweet, or blog post qualifies as an article element. Pages can contain unlimited articles without confusing screen readers or creating accessibility issues.
✓Hidden heading strategy: Major sites like Facebook use visually hidden headings to create proper document outlines separate from visual design. Each section receives an h2 title even when not displayed, allowing screen readers to navigate while designers maintain visual flexibility without compromising semantic structure or accessibility requirements.
✓Form label requirement: Always use label elements with for attributes to associate text with form fields. This creates accessible names for assistive technology, expands clickable areas for checkboxes and radio buttons, automatically focuses fields when labels are clicked, and represents the easiest accessibility improvement developers can implement immediately.
✓Description lists for metadata: Use dl, dt, and dd elements for key-value pairs like price per night, location, or post metadata instead of generic divs. Description lists provide semantic structure for data relationships, remain underutilized despite broad applicability, and offer better accessibility than paragraph or span alternatives for structured information.

What It Covers

Aaron Gustafson from Microsoft Edge explains semantic HTML for web applications, covering heading hierarchies, sectioning elements like article and aside, navigation patterns, form labels, and how proper markup enables screen readers and digital assistants to parse content.

Key Questions Answered

•Heading hierarchy: Use single h1 per page as most important element, followed by h2s and h3s in proper order. HTML5 sectioning elements never implemented automatic outline algorithm, so sequential heading levels remain critical for screen readers navigating document structure and assistive technology understanding page organization.
•Article element definition: Think of articles as individual items that stand alone independently, like articles of clothing rather than publication articles. Each Airbnb listing card, tweet, or blog post qualifies as an article element. Pages can contain unlimited articles without confusing screen readers or creating accessibility issues.
•Hidden heading strategy: Major sites like Facebook use visually hidden headings to create proper document outlines separate from visual design. Each section receives an h2 title even when not displayed, allowing screen readers to navigate while designers maintain visual flexibility without compromising semantic structure or accessibility requirements.
•Form label requirement: Always use label elements with for attributes to associate text with form fields. This creates accessible names for assistive technology, expands clickable areas for checkboxes and radio buttons, automatically focuses fields when labels are clicked, and represents the easiest accessibility improvement developers can implement immediately.
•Description lists for metadata: Use dl, dt, and dd elements for key-value pairs like price per night, location, or post metadata instead of generic divs. Description lists provide semantic structure for data relationships, remain underutilized despite broad applicability, and offer better accessibility than paragraph or span alternatives for structured information.

Notable Moment

Gustafson reveals that proper semantic HTML enables digital assistants to execute complex commands like searching specific sites for products or reading top headlines from news pages, demonstrating how accessibility features benefit all users beyond traditional screen reader applications and creating machine-readable formats for emerging technologies.

Know someone who'd find this useful?

Episode Transcript

In this episode of Fullstack Radio, I talked to Aaron Gustafson about authoring semantic HTML in the context of web applications where choosing the right element can be a lot more complicated than it seems. This is Fullstack Radio episode 118. Hey, everyone. Welcome to another episode of the Fullstack Radio podcast. I'm your host, Adam Wylen. And today, it's my pleasure to be speaking with Aaron Gustafson. How's it going, Aaron? It's going great. Thanks for having me. For anyone who is not familiar with you, do you mind just kinda briefly introducing yourself and talking a little bit about what you do? Sure. Sure. So I've been working on the web for a really long time at this point. I think I started around '96. And I've had just about every role that you could have on a web project from back end engineer and database guy through to UX and product lead and all that sort of stuff. And currently, I work as an evangelist for, web standards and accessibility and progressive web apps and stuff on the Microsoft Edge team. I've been with, the Edge team for about four years, a little over. But prior to that, I ran an agency and did tons of client projects for Fidelity, Microsoft, Vanguard, bunches of folks like that. My wheelhouse especially is concepts like progressive enhancement, which I wrote my book Adaptive Web Design about, and I've been doing, yeah, a lot of front end stuff for pretty much since '96 with a lot of focus on JavaScript and HTML and CSS and accessibility and all that fun. Awesome. Rigmarole. Yeah. Awesome. Yeah. So the reason I wanted to have you on the show is, something that I've been kind of trying to level up my game in a little bit lately, which is sort of embarrassing in some ways, but I think it's also kind of like a a spot that a lot of us are weaker at than maybe we think, is just kinda really nailing our use of kind of semantic elements in our markup on on the web. So I put out, sort of a request on on Twitter to see if anyone, could point me in the direction of someone who is a real expert in this area. And, you were recommended and it sounds like you're a great person to talk to about this stuff. So just to maybe sort of frame the conversation a little bit, something that I run into a lot when I'm building stuff that, has always kind of bugged me in the back of my head. And I always say, you know what? I should I should dive into this and figure out what I should be doing here. But inevitably, you just kinda move on because you got more stuff to do and you don't wanna get too sidetracked and get down sort of the the yak shaving trail that can be programming sometimes is, just …

Get the full transcript (13,029 words) + summary by email — free

One-time email with the complete transcript and AI summary of this episode. No account needed.

One email, no spam. We’ll also show you what SignalCast does.

Browse all Full Stack Radio transcripts →