What is semantic HTML?

Semantic HTML uses elements that convey meaning about their content rather than just appearance. Elements like article, section, nav, aside, header, footer, figure, and time communicate the role and purpose of content to browsers, screen readers, and search engines. This is the difference between a page that looks correct and a page that is structurally correct.

Why use semantic elements instead of divs?

Div elements have no semantic meaning. They are generic containers. Screen readers cannot determine the purpose of a div, so users lose navigational context. Search engines gain less structural information from divs. Using header, nav, main, and other semantic elements provides built-in accessibility, better SEO signals, and more maintainable code.

Which semantic HTML elements should I use most often?

Start with the page structure elements: header, nav, main, footer, and aside. Within content, use article for self-contained content, section for thematic groupings, figure and figcaption for images with captions, time for dates, and address for contact information. Use blockquote for quotations and details with summary for expandable content.

Back to Blog

Web Standards Accessibility SEO

Semantic HTML: Building With the Right Materials

By Brent Passmore May 19, 2026 4 min read

Updated Mar 9, 2026

The div problem

The <div> element is the most used and most abused element in HTML. It's a generic container: no semantic meaning, no implicit role, no inherent behavior. And because it's infinitely flexible, developers reach for it by default: div for navigation, div for headers, div for buttons, div for everything.

The result is a page that looks correct to sighted users but communicates nothing to machines. Screen readers can't identify the navigation. Search engines can't find the main content. Browser features like Reader Mode can't extract the article. The building looks fine from the outside, but the materials are all wrong.

What semantic elements communicate

Semantic HTML elements carry meaning beyond their visual presentation. Each one tells browsers, screen readers, and search engines what role that content plays:

<nav>: This is a navigation section. Screen readers offer shortcuts to jump to it. Search engines understand it contains site structure links, not content.
<main>: This is the primary content of the page. There should be exactly one. It's the landmark that skip links target and screen reader users jump to.
<article>: This is a self-contained composition (a blog post, a news story, a product card). It could theoretically be distributed independently and still make sense.
<aside>: This is supplementary content (a sidebar, a pull quote, a related links section). It's tangentially related to the main content but not essential to it.
<figure> and <figcaption>: This is a self-contained illustration with a caption. The figure and its caption are semantically linked.
<time>: This is a date or time value. The datetime attribute provides a machine-readable format that structured data and AI systems can parse.

The accessibility dividend

Semantic elements create the landmark structure that screen reader users depend on for navigation. A page built with <header>, <nav>, <main>, <aside>, and <footer> automatically generates a landmarks list that users can browse and jump between. A page built entirely with <div> elements generates nothing.

This isn't a minor convenience. It's the difference between a navigable page and an impassable wall of content. Screen reader users scan by landmarks the way sighted users scan by visual layout. Take away the landmarks, and they're reading every word in sequence to find what they need.

The SEO dividend

Search engines use semantic elements as signals for content structure and importance. Content within <main> is weighted differently than content in <nav> or <footer>. An <article> element signals self-contained content that might deserve its own search result. Proper heading hierarchy within semantic sections creates the outline that search engines use to understand topical structure.

These signals complement structured data. Semantic HTML provides the foundation, and JSON-LD schema adds the explicit declarations. Together, they give machines a comprehensive understanding of your content.

Common semantic mistakes

Using headings for styling

An <h4> used because you want smaller text, not because it's a fourth-level heading. Use CSS for styling. Use heading elements for structure.

Buttons that aren't buttons

A <div onclick="..."> looks clickable but isn't a button. It's not focusable by keyboard, not announced as interactive by screen readers, and not submitted with forms. Use <button> for actions and <a> for navigation.

Lists that aren't lists

A series of items separated by <br> tags looks like a list but isn't one. Screen readers announce actual <ul> and <ol> elements with their item count, giving users a sense of scope. Fake lists deny that context.

Build with the right materials

eiSEO flags semantic HTML issues during site scans: missing landmarks, improper heading hierarchy, interactive elements built from non-semantic markup. But the most important shift is a mental one: reaching for the semantic element first and the <div> only when nothing else fits.

Build with the right materials. The structure will hold, the machines will understand it, and the people who depend on assistive technology will be able to use it. Everything else is just a barn made of cardboard.