HTML Cheat Sheet

Modern HTML5 Boilerplate ⭐

script loading strategies

Page Layout Semantics ⭐

Headings Hierarchy

Never skip heading levels (h1→h3). Screen readers use them for navigation. Don't use headings just for size — use CSS for that.

details / dialog (no JS needed)

div vs span — when to use

Paragraphs & Text

Inline Semantic Tags ⭐

Usage Examples

List Types

Tables ⭐ (data only, not layout!)

Anchor Tags

Always add rel="noopener noreferrer" when using target="_blank" — prevents tab-napping security exploit.

Images ⭐

Audio & Video

iframe & Embed

SVG inline

Form Element

Input Types — All of them

Label, fieldset, datalist

Input Attributes ⭐

Select & Textarea

output & progress & meter

Essential Meta Tags

Open Graph (Social sharing) ⭐

link & resource hints

All Global Attributes

data-* attributes

Popover API (2023) ⭐

Canvas & SVG

Web Components basics

script type variants

Common HTML Traps

Block inside inline is invalid. <a><div></div></a> — anchor is inline, div is block. Use display:block on the anchor or wrap in a block. Exception: <a> can wrap blocks in HTML5.

<b> ≠ <strong> and <i> ≠ <em> — strong/em have semantic meaning (importance, stress). b/i are purely presentational. Screen readers treat them differently.

disabled vs readonly — disabled: not submitted with form, not focusable. readonly: submitted with form, focusable, can't edit.

Each page must have exactly ONE <main> and ONE <h1> — multiple mains or h1s harm accessibility and SEO.

Never use tables for layout — tables are for tabular data only. Use CSS Grid/Flexbox for layouts.

Empty alt is valid and important — Decorative images should have alt="" so screen readers skip them. Missing alt is different from empty alt.

Interview Quick-Fire