Episode 1 — Fundamentals / 1.5 — Semantic HTML and Browser Rendering

1.5 — Semantic HTML & Browser Rendering: Quick Revision

Compact cheat sheet. Print-friendly.

How to use this material (instructions)

Skim top-to-bottom in one pass before interviews or exams.
If a row feels fuzzy — reopen the matching lesson: README.md → 1.5.a…1.5.i.
Drills — 1.5-Exercise-Questions.md.
Polished answers — 1.5-Interview-Questions.md.

1.5.a Browser Rendering Pipeline

The Critical Rendering Path

HTML bytes ──► DOM Tree ──┐
                          ├──► Render Tree ──► Layout ──► Paint ──► Composite
CSS  bytes ──► CSSOM Tree ┘                                            │
                                                                       ▼
                                                                 Pixels on screen

Seven Stages

Stage	What happens
Download & Decode	HTML streamed from server; CSS/JS discovered and fetched.
Parse HTML → DOM	Token → tree of element/text nodes (invalid markup auto-repaired).
Parse CSS → CSSOM	Selectors, cascade, inheritance → style rules tree.
Render Tree	DOM + CSSOM combined; `display: none` excluded; pseudo-elements added.
Layout (Reflow)	Geometry computed: positions, sizes, line breaks, scrollable overflow.
Paint	Pixels filled: text, colors, borders, shadows, images.
Composite	Layers assembled (GPU); `transform`/`opacity` changes can skip layout + paint.

Blocking Resources

CSS is render-blocking — browser won't paint until CSSOM is built.
JS (without async/defer) is parser-blocking — HTML parsing halts while script downloads and executes.
defer: download in parallel, execute after HTML parsing.
async: download in parallel, execute immediately (order not guaranteed).

1.5.b Reflow & Repaint

Vocabulary

Term	Also called	What changed?
Reflow	Layout	Geometry — positions, sizes, line breaks
Repaint	Paint	Visuals — colors, shadows, text rasterization (same geometry)
Recomposite	Composite only	Layer stack — often `transform` / `opacity` on promoted layers

Common Reflow Triggers

Changing width, height, border, fonts, padding, margin
DOM insert/remove that shifts siblings
Window resize, font load swaps
Reading layout (offsetHeight, getBoundingClientRect()) after writing styles

Layout Thrashing

Bad: write style → read geometry → write → read (loop forces sync layout each iteration). Fix: batch all reads first, then batch writes; or use requestAnimationFrame.

CLS (Cumulative Layout Shift)

Cause	Fix
Images/iframes without dimensions	Add `width`/`height` or `aspect-ratio`
Late-loading web fonts (FOIT/FOUT)	`font-display` strategy; `preload` critical fonts
Dynamically injected banners/ads	Reserve space; insert below viewport
Content inserted above existing UI	Skeleton placeholders; fixed-height containers

1.5.c Semantic Landmark Tags

Core Landmarks

Element	Role	Notes
`<header>`	Banner	Intro content for nearest sectioning ancestor or page
`<nav>`	Navigation	Major navigation blocks; multiple OK — distinguish with `aria-label`
`<main>`	Main	One per document; primary content area
`<aside>`	Complementary	Sidebars, related links, pull quotes
`<footer>`	Content Info	Legal, meta links, copyright

`section` vs `article`

Element	Mental model	Example
`<section>`	Thematic grouping with a heading	"Features" chapter on a landing page
`<article>`	Self-contained composition	Blog post, product card, comment

Document Sketch

<body>
  <header>… branding …</header>
  <nav aria-label="Primary">…</nav>
  <main>
    <h1>Page title</h1>
    <section aria-labelledby="feat-heading">
      <h2 id="feat-heading">Features</h2>
      <article>…feature card…</article>
    </section>
  </main>
  <aside>… related …</aside>
  <footer>… legal …</footer>
</body>

Anti-pattern: wrapping every widget in <article> "for SEO" — use meaning, not superstition.

1.5.d SEO & Semantic HTML

HTML Signals That Still Matter

Signal	Why
`<title>`	Primary label in search results / tabs; strong relevance cue
Meta description	Not a direct ranking factor everywhere — influences snippet CTR
Heading hierarchy	Communicates topical structure to crawlers and users
Canonical link	`<link rel="canonical" href="…">` — consolidates duplicate URLs
Semantic landmarks	Helps parsers distinguish boilerplate from primary content
Internal linking	Distributes page authority; helps crawlers discover content

SEO Anti-Patterns

Keyword stuffing in hidden text or repetitive headings
Cloaking — different content for bots vs users (policy violation)
Fake headings — <h2> styled as body text for tiny promo lines
Link farms and misleading rel usage — trust damage

Structured Data (JSON-LD)

<script type="application/ld+json"> describes entities (Article, Product, FAQ). Rich results not guaranteed; incorrect markup can cause manual actions. Treat as precision labeling, not SEO spray paint.

1.5.e Accessibility & ARIA

Inclusive Design Spectrum

Disability type	Permanent	Temporary	Situational
Motor	Limb difference	Broken arm	Holding baby
Vision	Blind	Eye surgery	Bright sunlight
Auditory	Deaf	Ear infection	Noisy environment
Cognitive	Learning disability	Concussion	Distraction

Native HTML First

Need	Prefer	Avoid
Button	`<button>`	`<div onclick>` + `role="button"`
Link	`<a href>`	`<span tabindex="0">` faking links
Text field	`<input>` / `<textarea>`	`contenteditable` for forms
Checkbox	`<input type="checkbox">`	Custom div toggles without semantics
Expandable	`<details>` / `<summary>`	Hand-rolled unless native cannot meet requirements

ARIA in Three Buckets

Bucket	Examples
Roles	`role="navigation"`, `role="dialog"` — do not duplicate native roles
States	`aria-expanded`, `aria-selected`, `aria-checked` — live state
Properties	`aria-labelledby`, `aria-describedby`, `aria-live` — relationships

The First Rule of ARIA

If you can use a native HTML element with the needed semantics and behavior, do.

Second rule: do not change native semantics unless you know why.

Keyboard Basics

Key	Action
Tab / Shift+Tab	Move focus between focusable elements
Enter	Activate buttons and links
Space	Toggle buttons/checkboxes
Escape	Close dialogs (if implemented)

Never remove outline without providing equally clear replacement focus styles.

Testing Workflow

Keyboard-only — complete tasks without a mouse.
Zoom 200% — does layout break?
Screen reader smoke test (VoiceOver / NVDA): landmarks, headings, labels.
Automated: axe DevTools / Lighthouse accessibility.
Color contrast check (WCAG 4.5:1 for normal text).

1.5.f Headings Hierarchy

The Outline Model

h1  Page topic
├─ h2  Major section
│  ├─ h3  Subtopic
│  └─ h3  Subtopic
└─ h2  Major section
   └─ h3  Subtopic

Rules

Do not skip levels (h1 → h4 breaks mental model).
h1 = primary purpose of the page/view.
Headings are not font sizes — use CSS for appearance.
Pair <section> with a heading (aria-labelledby).
<title> ≠ h1: <title> is for tab/snippet; h1 is on-page topic.

Anti-Patterns

Anti-pattern	Why it hurts
Skipping levels (`h1` → `h4`)	Users lose mental model of depth
Heading for visual line	Pollutes outline; spam for SR users
Every widget at `h2` level	Rotor becomes noisy; no hierarchy

1.5.g Lists

`ul` vs `ol` vs `dl`

Element	Meaning	Use when
`<ul>`	Unordered group	Sequence does not matter (features, nav links)
`<ol>`	Ordered group	Sequence matters (steps, rankings, legal clauses)
`<dl>`	Description list	Term–definition pairs (glossary, metadata)

Useful `ol` Attributes

Attribute	Effect
`start`	Begin counting at a given number
`reversed`	Descending order (countdowns, top-N)
`type`	Presentation hint (`1`, `a`, `A`, `i`, `I`)

Navigation Lists

Nav link groups are commonly ul > li > a — CSS hides bullets, but list semantics are preserved (screen readers announce count and position).

1.5.h Responsive Images

Two Tools, Two Jobs

Tool	Job
`srcset` + `sizes`	Pick the right resolution file
`<picture>` + `<source>`	Pick the right format or art direction crop

`srcset` Descriptors

Descriptor	Meaning	Example
`w`	Intrinsic width in pixels	`hero-400.jpg 400w`
`x`	Device pixel ratio	`icon@2x.png 2x`

Modern Formats

Format	Trade-off
WebP	Broad support; good compression vs JPEG/PNG
AVIF	Often smaller; higher encode cost; provide fallback

Optimization Checklist

width/height or aspect-ratio on <img> → prevents CLS.
loading="lazy" for below-fold images (do not lazy-load the LCP hero).
fetchpriority="high" on LCP image (sparingly).
SVG for logos/icons — scales without resolution variants.
Always keep a fallback <img src> for unknown clients.

1.5.i Links & Forms

Internal vs External Links

Type	Pattern	Notes
Internal	`<a href="/pricing">`	Root-relative preferred
External	`<a href="https://other.example">`	Absolute URL
New tab	`target="_blank"`	Always add `rel="noopener"` (+ `noreferrer` per policy)

Important `rel` Values

`rel`	Purpose
`noopener`	Prevent `window.opener` access (security)
`noreferrer`	Strip `Referer` header + implies noopener
`nofollow`	Hint: do not pass ranking credit
`sponsored`	Paid/partner links
`ugc`	User-generated content links

Form Anatomy

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />
  <button type="submit">Subscribe</button>
</form>

label for ↔ id — accessible name + bigger click target.
name — what the server receives in the payload.
fieldset/legend — groups related controls (radio groups, address blocks).

Common Input Types

`type`	Built-in behavior
`email`	Email validation hint + keyboard
`url`	URL pattern hint
`number`	Steppers; beware empty vs `0`
`tel`	Phone keyboard on mobile
`date` / `time`	Native date pickers
`search`	Search field semantics
`checkbox` / `radio`	Selection controls; radios share `name`

HTML5 Validation Attributes

required · pattern · min/max · minlength/maxlength · step

Client vs Server Validation

Layer	Role	Trust
HTML5 / JS	Fast UX feedback, fewer round trips	Untrusted — user can bypass
Server	Authoritative rules, authz, DB invariants	Source of truth

Never rely on client validation for security. Server validates truth.

One-liner definitions (25+ terms)

Term	One-liner
DOM	Tree representation of HTML elements used by browsers to render pages.
CSSOM	Tree representation of CSS styles paired with the DOM for styling.
Render tree	Combined DOM + CSSOM — only visible elements that need painting.
Layout / Reflow	Engine computes geometry: positions, sizes, line breaks for every box.
Paint	Filling pixels: text, colors, borders, shadows, images.
Composite	Assembling painted layers (GPU) into the final frame.
CRP	Critical Rendering Path — minimum work to first meaningful pixels.
CLS	Cumulative Layout Shift — metric for unexpected visual movement.
LCP	Largest Contentful Paint — when the biggest visible element renders.
FCP	First Contentful Paint — when the first bit of UI appears.
Reflow	Re-computation of layout geometry (expensive).
Repaint	Redraw of visual appearance without geometry change.
Layout thrashing	Write→read geometry interleaving that forces synchronous layout.
Landmark	HTML element exposing a named region to assistive tech (nav, main, etc.).
ARIA	Accessible Rich Internet Applications — roles/states/properties for the a11y tree.
Accessible name	The label assistive tech announces for an element (from label, aria-label, etc.).
Screen reader	Software that reads UI content aloud (VoiceOver, NVDA, JAWS).
WCAG	Web Content Accessibility Guidelines — international a11y standard.
Semantic HTML	Using elements for their meaning, not their default appearance.
`srcset`	Attribute listing image candidates with width or DPR descriptors.
`sizes`	Attribute telling the browser how wide the image renders at breakpoints.
Art direction	Serving different image crops/compositions at different breakpoints.
WebP / AVIF	Modern image formats with better compression than JPEG/PNG.
Canonical URL	`<link rel="canonical">` — tells search engines the preferred URL for a page.
JSON-LD	Structured data format embedded in `<script>` for rich search results.
`noopener`	`rel` value preventing opened tab from accessing `window.opener`.
CSRF	Cross-Site Request Forgery — server-side tokens prevent forged form submissions.

Master workflow — The Rendering & Semantics Stack

HTML bytes arrive from server → parsed into DOM tree.
CSS bytes arrive → parsed into CSSOM tree.
DOM + CSSOM → Render tree (visible elements only).
Layout: engine computes geometry for every box.
Paint: pixels filled — text, borders, colors, images.
Composite: GPU layers assembled → frame displayed.
Semantic tags (main, nav, header) make the DOM meaningful for a11y tools + search engines.
ARIA bridges gaps when native HTML cannot express roles/states.
Responsive images (srcset/sizes/<picture>) deliver right-sized assets.
Forms connect user input to server-side truth — client validation is UX, server is authority.

End of 1.5 quick revision.