Semantic HTML

What you'll learn

• What "semantic" actually means — and what changes for screen readers when you get it right
• Landmarks: header, nav, main, aside, footer, section, article
• How heading levels build the document outline
• The inline elements you almost never reach for — em, strong, mark, cite, time, abbr, code, kbd
• Lists with structure — ul, ol, dl — and when something is not a list
• Native widgets browsers ship for free — details, dialog, progress, meter, popover
• When a plain div is still the right choice

1. 01
   What "semantic" means in practice

   The accessibility tree, default roles, and what changes for screen readers when you pick the right tag.
   14 min
2. 02
   Landmarks and document outline

   header, nav, main, aside, footer, section, article — the rooms a screen reader can jump between.
   17 min
3. 03
   Headings done right

   h1 through h6 as a table of contents. When to skip levels, when to use multiple h1s, when not to.
   15 min
4. 04
   Inline semantics

   em vs i, strong vs b, mark, cite, time, abbr, code vs samp vs kbd vs var — small tags that change meaning.
   16 min
5. 05
   Lists in earnest

   ul, ol, dl, nested lists, the start, reversed, type attributes — and when not to use a list at all.
   14 min
6. 06
   Native widgets

   details, summary, dialog, progress, meter, output, popover — components you do not have to build.
   18 min
7. 07
   When div is still right

   Non-semantic wrappers, role="presentation", and the limits of native elements.
   14 min
8. 08
   Microdata, briefly

   itemscope, itemtype, itemprop, schema.org — when search engines actually use this stuff.
   14 min