Pick elements for meaning, not looks — landmarks, headings, forms, media, and how semantics feed a11y and SEO.

beginner

Skeleton of a solid HTML document — doctype, html/lang, head metadata, body landmarks, and what belongs where.

beginner

Use h1–h6 as a real outline — one logical h1, no level skips for styling, and how headings power AT navigation and SEO.

beginner

header, nav, main, aside, footer landmarks — how AT users jump sections, labeling multiple navs, and common landmark mistakes.

beginner

Navigate with links, act with buttons — correct semantics, keyboard behavior, and the SPA footguns that break both.

beginner

Wire labels to controls correctly, choose input types, group fields, and avoid the accessibility bugs that fail real users and audits.

beginner

Pick input types and inputmode so mobile keyboards match the data — email, tel, numeric OTP, dates, and the desktop side effects.

beginner

Native constraint validation — required, type, pattern, min/max, minlength/maxlength, and wiring :invalid with accessible errors.

beginner

name and autocomplete on form fields — password managers, autofill tokens, and why missing names break real users more than demos.

intermediate

Group related form controls with fieldset/legend — radio groups, disabled fieldsets, and accessible naming for control sets.

beginner

Use tables for data grids — th/scope, captions, headers, responsive strategies, and when CSS grid is the wrong substitute.

beginner

Write useful alt text, mark decorative images correctly, and avoid SEO/a11y anti-patterns like keyword stuffing or missing alt.

beginner

Responsive images in HTML — srcset width descriptors, sizes, art direction with picture/source, and type-based format negotiation.

intermediate

Native audio/video — controls, sources, captions, autoplay policies, and accessibility requirements for media on the web.

intermediate

Embed third-party content safely — sandbox tokens, allow attributes, CSP frame-src, and postMessage boundaries.

advanced

Essential meta tags — title, description, robots, canonical, viewport — and what actually moves SEO vs folklore.

beginner

Control link previews with Open Graph and Twitter card meta — og:title, image, type, absolute URLs, and debugging scrapers.

intermediate

When to use article, section, and aside — standalone content vs thematic grouping vs complementary, with heading pairing.

beginner

Mark up dates and times with time and datetime — machine-readable values, accessible display text, and formatting with Intl.

beginner

Native disclosure widgets with details/summary — open state, styling markers, a11y behavior, and when not to replace accordions with hacks.

beginner

Native modal and non-modal dialogs with showModal, light dismiss, focus, and the top layer — without a heavyweight widget library.

intermediate

HTML template holds inert DOM clones — stamp client-side fragments, pair with slots/web components, and avoid XSS when filling them.

intermediate

data-* attributes for embedding element metadata — dataset API, CSS hooks, validation limits, and when not to store app state in the DOM.

beginner

contenteditable surfaces — what the browser gives you, sanitization, keyboard and a11y gaps, and when to pick a real editor library.

advanced

How browsers build the accessibility tree from DOM and CSS — roles, names, states, what’s pruned, and how to inspect it in DevTools.

intermediate

Set lang and dir for language and direction — nested language spans, hreflang, and what HTML owns vs your i18n framework.

beginner

How <base href> rewrites relative URLs for links, scripts, and forms — powerful for static hosts, dangerous when set accidentally.

intermediate

Use noscript for honest degraded experiences — messaging, critical CSS alternatives, and what not to expect from modern JS-heavy apps.

beginner

link rel=preload, prefetch, preconnect, and modulepreload — speed critical assets without wrecking bandwidth priorities.

intermediate

Ship favicons and app icons that work across browsers — SVG/ICO/PNG sizes, apple-touch-icon, manifest icons, and cache gotchas.

beginner

Charset, Unicode, and entities — when to use &amp; &lt; &nbsp;, escaping user content, and mojibake avoidance.

beginner