21
Semantic HTML

Semantic HTML

Pick the right tag every time. The course that turns "I know the tag names" into "I know which one belongs here".

~ 122 min·8 lessons·updated apr 2026

What you'll learn


Lessons

Read in order. Each lesson stands on its own, but the order is deliberate.

8 lessons · ~122 min total

  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

Prerequisites

  • · Comfortable writing basic HTML tags
  • · Finished html-basics or equivalent

After this, try