Semantic HTML

Semantic HTML means using elements that describe the meaning of your content, not just its appearance. Instead of wrapping everything in <div>, you use elements like <header>, <nav>, and <article> to communicate structure to browsers, screen readers, and search engines.

Why Semantics Matter

• Accessibility: Screen readers use semantic elements to navigate pages. A <nav> is announced as navigation; a <div> is not.
• SEO: Search engines understand your content hierarchy through semantic markup.
• Maintainability: Semantic code is self-documenting and easier to read.

Document Structure

Every HTML page should follow a clear structural hierarchy:

Key rules:

• One <main> per page — it wraps your primary content.
• <header> and <footer> can appear inside <article> or <section>, not just at the top level.
• Use only one <h1> per page, then <h2> through <h6> in order. Never skip heading levels.

Sectioning Elements

Use these elements to group related content:

• <section> groups thematically related content.
• <article> wraps self-contained content (blog posts, comments, cards).
• <aside> holds tangentially related content (sidebars, callouts).

Interactive Elements

HTML provides built-in interactive elements that work without JavaScript:

Accessible Forms

Forms are where accessibility matters most. Every input needs a label, and grouping related fields helps users understand the structure:

Key form rules:

• Always pair <label> with inputs via for and id, or wrap the input inside the label.
• Use <fieldset> and <legend> to group related fields.
• Use the correct type attribute (email, tel, url, number) for built-in validation and mobile keyboards.
• Prefer <button type="submit"> over <input type="submit">.

Text-Level Semantics

Choose elements based on meaning, not appearance:

Common Mistakes

1. Using <div> for everything — reach for semantic elements first.
2. Skipping heading levels — going from <h1> to <h4> breaks the outline.
3. Missing alt on images — every <img> needs alt. Use alt="" for purely decorative images.
4. Using <a> without href — an anchor without href is not keyboard-focusable. Use <button> for actions.