Semantic HTML — Say What It Is
You could build the entire bakery page out of <div> elements and style it to look perfect. A sighted visitor would never know. But a blind customer using a screen reader would hear one long, flat stream of text, with no way to jump to the menu or skip the navigation. Choosing meaningful elements fixes that for free.
The rule
Pick the element that says what the content is, not how it looks.
HTML has elements whose names describe a role. Browsers, screen readers and search engines understand those roles.
<body>
<header>
<p>Crumb Bakery</p>
<nav>
<a href="/">Home</a>
<a href="/menu">Menu</a>
<a href="/visit">Visit us</a>
</nav>
</header>
<main>
<h1>Today's bakes</h1>
<section>
<h2>Breads</h2>
<article>
<h3>Country sourdough</h3>
<p>Three-day ferment, crackly crust.</p>
</article>
</section>
<aside>
<h2>Allergy notice</h2>
<p>All items are made in a kitchen that uses nuts.</p>
</aside>
</main>
<footer>
<p>Open 7am to 3pm, Tuesday to Sunday.</p>
</footer>
</body>| Element | Role |
|---|---|
<header> |
Introductory content, often a logo and navigation |
<nav> |
A block of main navigation links |
<main> |
The page's unique main content; one per page |
<section> |
A themed group of content, normally with its own heading |
<article> |
A self-contained item that would make sense on its own: a post, a product card |
<aside> |
Related but secondary content |
<footer> |
Closing information: contact, copyright, hours |
Headings <h1> to <h6> form the page's outline. Use them by level, not by size: one <h1> for the page's main topic, <h2> for its sections, <h3> inside those, and do not skip levels. If you want a smaller-looking <h2>, change its size with CSS.
The same thinking applies inside text: <strong> means important, <em> means stressed, <button> means something clickable that performs an action. A <div> or <span> is still the right choice when there is genuinely no meaning, only a hook for styling.
The shortcut
Before typing <div>, say out loud "This is the ___." If the blank is a role with an element (navigation, main content, a product card, a footer), use that element. If the blank is only "a box for styling", <div> is fine.
Name it
"This is one product, which would make sense on its own." That is an
<article>.
The trap is picking headings by how big they look. A heading level describes structure; size is CSS's job.
Drills
Answer fast — trust the rule.
Which element should wrap the bakery's links to Home, Menu and Visit us?
How many <main> elements should a page normally show?
You want a heading under an <h2> to look small. What should you do?
Which is the best element for a clickable "Add to order" control that runs JavaScript?
Remember
- Pick the element that says what the content is, not how it looks.
- Say "This is the ___" before reaching for
<div>. - Trap: choosing heading levels by size instead of by outline.