What Is Semantic HTML?

Q: What is the difference between semantic and non-semantic elements?

Semantic elements (` `, ` `, ` `, ` `) carry a defined meaning about the content they wrap. Non-semantic elements (` `, ` `) are neutral containers with no inherent meaning. Both can be styled identically, but only semantic elements communicate their role to machines.

Q: Is a div semantic?

No. ` ` is a generic block-level container with no semantic meaning, and ` ` is its inline equivalent. They are useful for grouping and styling, but where a meaningful element exists — a heading, a navigation region, an article — you should use that instead so the content's role is clear.

Written byFlavio Amiel Founder, Roborank

Updated July 15, 2026

Semantic HTML is markup that uses elements chosen for their meaning rather than their appearance. A semantic element gives the content it wraps a defined role — a heading, an article, a navigation block — that browsers, assistive technologies, and search engines can interpret. It contrasts with non-semantic containers like div and span, which carry no inherent meaning about their content.

Key Takeaways

MDN defines semantics as “the meaning of a piece of code” — asking what role an element has, not what it looks like.
A semantic element like <h1> gives its text the role of “a top level heading,” while a styled <span> that merely looks like a heading “has no semantic value.”
Semantic elements include <article>, <section>, <nav>, <header>, <footer>, <main>, <figure>, and <time>; <div> and <span> are the main non-semantic containers.
MDN lists SEO, accessibility, and developer experience as concrete benefits: search engines weight semantic content, and screen readers use it as navigation signposts.
The guiding principle is to code HTML to represent the data, and leave presentation entirely to CSS.

How Semantic HTML Works

Every HTML element carries a role, or is deliberately neutral. MDN puts the idea at the center of its definition: “Semantics refers to the meaning of a piece of code” — the question is “what purpose or role does that HTML element have,” not “what does it look like?” A semantic element, MDN says, “gives the text it wraps around the role (or meaning)” of something specific.

The <h1> element is MDN’s own example. Writing <h1>This is a top level heading</h1> tells every machine that reads the page that this text is the page’s top-level heading. Compare that to a <span> styled to look identical: <span style="font-size: 32px;">Not a top-level heading!</span> renders the same, but as MDN notes, “it has no semantic value, so it will not get any extra benefits.” It looks like a heading and means nothing.

That distinction — meaning versus appearance — is the whole concept. Browsers, screen readers, and search engines act on the element you choose, and CSS handles how it looks. MDN states the principle directly: “HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Presentation… is the sole responsibility of CSS.”

Semantic vs Non-Semantic Elements

HTML gives you roughly a hundred elements that name a role. The commonly used semantic elements include:

<header>, <footer>, <main>, <nav> — page regions: the top matter, the bottom matter, the primary content, and the navigation.
<article>, <section>, <aside> — content grouping: a self-contained piece, a thematic section, and tangential content.
<h1>–<h6> — the heading hierarchy that outlines the document.
<figure>, <figcaption>, <time>, <mark> — specific content types with defined meaning.

Against these stand the two non-semantic containers: <div> (block-level) and <span> (inline). They’re perfectly valid for grouping and styling, but they say nothing about their contents. The rule of thumb: when a meaningful element exists for what you’re marking up, use it; fall back to <div> or <span> only when nothing more specific fits.

Example of Semantic HTML

MDN’s own worked contrast is the cleanest documented example. Take a page heading. The non-semantic way to build it is a styled span:

<span style="font-size: 32px; margin: 21px 0;">Not a top-level heading!</span>

It renders as large, bold text that looks like a heading. But MDN is explicit that this version “has no semantic value.” A screen reader won’t announce it as a heading, so a user navigating by headings skips right past it. A search engine won’t weight its words as heading-level content. The meaning is invisible to every machine; only the styling survives.

The semantic version is a single element:

<h1>This is a top level heading</h1>

Identical on screen, but now MDN’s listed benefits kick in: search engines “will consider its contents as important keywords to influence the page’s search rankings,” screen readers “can use it as a signpost to help visually impaired users navigate a page,” and any developer reading the source instantly sees what the element is. That’s the entire trade in one line of markup — same pixels, real meaning — and it’s why semantic HTML underpins both accessibility and on-page SEO.

The thing people get wrong

The trap I watch developers fall into is "div soup" — building an entire page out of styled <div> and <span> elements because CSS can make anything look like anything. It renders fine, so it feels done. But a <span> styled to look like a heading is, in MDN’s words, an element that "has no semantic value," which means a screen reader can’t announce it as a heading and a search engine can’t weight it as one. You’ve thrown away meaning to save a few keystrokes. The fix costs nothing: reach for the element that names what the content is — <h1> for the top heading, <nav> for navigation, <article> for a self-contained piece, <main> for the primary content. The page looks identical and suddenly it’s legible to every machine that reads it.

Frequently Asked Questions

What is semantic HTML?

Semantic HTML is markup that uses elements for their meaning rather than their appearance. Elements like <article>, <nav>, and <h1> describe the role of the content they contain, so browsers, screen readers, and search engines can understand a page’s structure — unlike generic <div> and <span> containers.

Why is semantic HTML important for SEO?

Semantic elements tell search engines what each part of a page means and how content is structured, which helps them identify important content and rank a page. MDN notes that search engines treat semantic content as important keywords influencing rankings, and it also improves the accessibility signals Google values.

What is the difference between semantic and non-semantic elements?

Semantic elements (<header>, <article>, <h1>, <nav>) carry a defined meaning about the content they wrap. Non-semantic elements (<div>, <span>) are neutral containers with no inherent meaning. Both can be styled identically, but only semantic elements communicate their role to machines.

Is a div semantic?

No. <div> is a generic block-level container with no semantic meaning, and <span> is its inline equivalent. They are useful for grouping and styling, but where a meaningful element exists — a heading, a navigation region, an article — you should use that instead so the content’s role is clear.

The Bottom Line

Semantic HTML is the difference between markup that merely looks right and markup that means something. By choosing elements for their role — headings, articles, navigation, main content — you hand browsers, assistive technology, and search engines a readable map of your page, and you keep presentation where it belongs, in CSS. Same rendered result, far more machine-legible page.

Sources

Semantics (MDN Web Docs Glossary) — MDN Web Docs

Rank & Cash — the weekly SEO breakdown

One practical teardown a week on ranking in search and getting cited by AI. No fluff.