What is the difference between ` ` and ` `?

` ` is for self-contained content that could be independently distributed. ` ` is for thematic grouping within a document.

WEB DEVELOPMENT

Home › Glossary › Web Development· 362 ·

Semantic HTML

\sɪˈmæntɪk ˌeɪtʃ tiː ˈɛm ˈɛl\n.

Filed underWeb DevelopmentSEOAccessibility

In brief · quick answer

Semantic HTML uses elements that convey meaning about their content (like `<article>`, `<nav>`, `<header>`) rather than generic containers that only describe visual presentation.

§ 1 Definition

Semantic HTML is the practice of using HTML elements that describe the meaning and structure of content, not just its appearance. Instead of wrapping everything in `<div>` and `<span>` tags, semantic HTML uses elements like `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`, `<figure>`, `<figcaption>`, and `<address>`. These elements tell browsers, screen readers, and search engines what each part of the page is for. Semantic HTML is the foundation of web accessibility. Screen readers use element semantics to navigate pages. Search engines use semantic structure to understand content hierarchy and relevance. The HTML5 specification introduced many new semantic elements, but the concept predates them. Using `<h1>` through `<h6>` correctly is also semantics. So is using `<ul>` for lists and `<table>` for tabular data. A page built entirely from `<div>` elements is technically valid HTML but semantically empty. It is harder to maintain, harder to test, harder to index, and inaccessible.

§ 2 Why it matters

Accessibility: Screen readers rely on semantic landmarks to navigate. A non-semantic page forces users to tab through every element. SEO: Search engines use heading hierarchies and semantic structure for ranking and rich snippets. Maintainability: A semantic document is easier for humans to read and modify. Performance: Semantic HTML uses fewer bytes than wrapping everything in class-decorated divs.

§ 3 Common patterns

Use `<nav>` for navigation blocks, `<main>` for primary content (only one per page), `<article>` for self-contained content pieces, `<section>` for thematic grouping, `<aside>` for tangential content, `<figure>` and `<figcaption>` for images with captions. Use heading levels in order (`<h1>` then `<h2>` then `<h3>`, not skipping levels). Use `<button>` for actions, not `<div onclick>`.

§ 4 Common misconception

Using `<div class="header">` is not semantic HTML. The class name is only meaningful to humans. The browser and screen reader do not care about class names. They care about the element type. A `<div>` is a generic container regardless of what class you give it. Use the actual semantic element.

§ 5 Note

Landmark roles (like `role="banner"`) are redundant when using proper semantic HTML5 elements. Browsers implicitly map `<header>` to banner, `<nav>` to navigation, `<main>` to main, and so on. Use ARIA roles only when HTML semantics are insufficient.

§ 6 In code

```html
<!-- Non-semantic -->
<div class="header">
  <div class="nav"><a href="/">Home</a></div>
</div>
<div class="main-content">
  <div class="article">
    <div class="title">My Post</div>
    <div class="body">Content here.</div>
  </div>
</div>

<!-- Semantic -->
<header>
  <nav><a href="/">Home</a></nav>
</header>
<main>
  <article>
    <h1>My Post</h1>
    <p>Content here.</p>
  </article>
</main>
```

§ 7 Common questions

Q. Does semantic HTML affect SEO?: A. Yes, significantly. Search engines use semantic structure for ranking, featured snippets, and knowledge panels.
Q. What is the difference between `<article>` and `<section>`?: A. `<article>` is for self-contained content that could be independently distributed. `<section>` is for thematic grouping within a document.

Key takeaways

Semantic HTML uses meaningful elements instead of generic containers.
It improves accessibility, SEO, and code maintainability.
Screen readers and search engines rely on element semantics for navigation and understanding.

How Atomic Glue helps

Atomic Glue writes semantic HTML on every project. Better accessibility. Better SEO. Cleaner code. Our SEO & GEO services include semantic markup audits.

Get in touch

# Semantic HTML

Semantic HTML uses elements that convey meaning about their content (like `<article>`, `<nav>`, `<header>`) rather than generic containers that only describe visual presentation.

Category: Web Development (also: SEO, Accessibility)

Author: Atomic Glue Team

## Definition

## Why it matters

## Common patterns

## Common misconception

## Note

## In code

## Common questions
Q: Does semantic HTML affect SEO?
A: Yes, significantly. Search engines use semantic structure for ranking, featured snippets, and knowledge panels.
Q: What is the difference between `<article>` and `<section>`?
A: `<article>` is for self-contained content that could be independently distributed. `<section>` is for thematic grouping within a document.

## Key takeaways

Semantic HTML uses meaningful elements instead of generic containers.
It improves accessibility, SEO, and code maintainability.
Screen readers and search engines rely on element semantics for navigation and understanding.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/semantic-html-website-development