Semantic HTML
The use of HTML tags that convey the meaning and structure of the content rather than just its appearance.
Detailed Explanation
Using tags like `<header>`, `<main>`, `<article>`, and `<nav>` instead of generic `<div>` tags helps search engines and assistive technologies (like screen readers) understand the purpose of your content. Semantic HTML is a pillar of accessibility and SEO. It ensures that your code is not only easier for developers to read but also more accessible to all users and more discoverable by AI search engines.
Quick Summary
Semantic HTML uses purpose-revealing tags like header, main, article, nav, section, and aside instead of generic divs. The markup then carries meaning that browsers, search engines, assistive tech, and AI crawlers can interpret directly.
Key Takeaways
- Screen readers expose landmark roles (banner, main, navigation, contentinfo) automatically from semantic tags.
- Search engines weight content inside <article> and <main> differently from sidebar boilerplate.
- Semantic tags reduce CSS by giving meaningful defaults you can target without classes.
- Headings (h1–h6) form a document outline that assistive tech navigates with shortcut keys.
- Buttons, links, and form controls have free keyboard and ARIA semantics that custom divs never get.
When to use it
- Structuring blog posts and documentation pages for SEO and AI overview citations.
- Building accessible navigation with <nav> and <ul> instead of clickable divs.
- Marking up tables with <th scope="col">, <caption>, and <tbody> so screen readers can announce headers.
- Replacing div-with-onClick patterns with real <button> elements that work with keyboard out of the box.
Common Mistakes
- Wrapping clickable content in <div onClick> instead of <button>, losing keyboard and ARIA support.
- Using <h3> for visual size instead of document structure, breaking the outline for screen readers.
- Multiple <main> elements on a page, the spec allows only one visible at a time.
- Empty <section> elements without headings, which add noise to the accessibility tree.
Semantic HTML, Frequently Asked
Does semantic HTML really help SEO?
Yes, Google's crawler uses landmark elements and heading hierarchy as signals. AI overview features specifically extract content from <article> and well-structured headings.
Is <div> bad?
No. <div> is fine for purely presentational grouping where no semantic exists. The issue is replacing real semantics (a <button> or <nav>) with <div> and then having to re-add roles, tabindex, and keyboard handlers manually.
What is the document outline?
It is the implicit hierarchy formed by your headings. Modern accessibility tools surface this outline so users can jump between sections. Skipping heading levels (h1 → h3) creates gaps that hurt navigation.