HTML gives structure to every page on the web. But structure and meaning are two different things. You can build an entire website out of thousands of <div> tags and it'll render just fine in a browser—but nothing in the code explains what any of it actually is. A navigation menu, a list, and a footer can all look the same under the hood.
Semantic HTML fixes that. In this guide, we'll explain what semantic HTML is, go through each of these structural HTML tags with code examples, and then cover the most common issues we see—things like non-sequential headings, misused emphasis tags, and missing alt text.
What is HTML?
HTML, or hypertext markup language, is the standard markup language used to create content on the internet. It’s the foundation for every website (even this one). HTML uses a system of tags (also called elements) that instruct web browsers how to display headings, paragraphs, links, images, etc. A <p> tag, for instance, tells the browser “this is a paragraph”.
Looking for a book to learn HTML and CSS? We recommend the HTML and CSS QuickStart Guide by David DuRocher.
<div class="header">
<div class="nav">
<div class="nav-item">Home</div>
<div class="nav-item">Tomatoes</div>
</div>
</div>
<div class="main-content">
<div class="article">
<div class="title">How to Grow Tomatoes</div>
<div class="text">Start with good soil...</div>
</div>
</div>
<div class="footer">
<div class="copyright">© 2026</div>
</div>
The non-semantic version is all <div> tags. You'd have to read every class name to figure out what something is for. In most modern websites, there are 10x to 100x the amount of div tags shown here with cryptic class or id names that obfuscate their meaning.
<header>
<nav>
<a href="/">Home</a>
<a href="/tomatoes">Tomatoes</a>
</nav>
</header>
<main>
<article>
<h1>How to Grow Tomatoes</h1>
<p>Start with good soil...</p>
</article>
</main>
<footer>
<p>© 2026</p>
</footer>
The semantic version, on the other hand, reads like an outline of the page. There’s a header, navigation, a main content element that contains an article, which contains a heading and text, and then a footer at the end. Within each of those elements, there can still be hundreds of div tags, but the element around them explains what it is.
Why does semantic HTML matter?
Semantic HTML matters for three reasons: SEO, accessibility, and future maintenance.
SEO: Crawlers like Google use semantic tags to understand what your content is about and how it's structured. Proper heading hierarchy and tags like
<article>give it a clear map of the page.Accessibility: Screen readers use semantic tags to navigate. A
<nav>element tells a screen reader "this is navigation" so users can jump to it. A<div class="nav">tells it nothing.Maintenance: When someone else opens your code (or you open it in a year and ask, ‘what the hell is this?!’),
<header>is immediately clear.<div id="9454198d-6b3b" class="inner-header">is not.
Structural tags
These define the major sections of your page.
<header>
Introductory content for a page or section. Usually contains a logo, title, and navigation.
<header>
<img src="/files/tourient-logo.svg" alt="Tourient logo">
<h1>Tourient</h1>
<nav>
<a href="/">Home</a>
<a href="/self-guided-tours">Product Tour</a>
<a href="/compare">Compare</a>
</nav>
</header>
<header> isn't limited to the top of the page. You can use it inside an <article> or <section> to introduce that specific block.
<nav>
A group of navigation links. Use it for your main site navigation, a table of contents, or a grouped set of links within a section.
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/about">About Us</a></li>
</ul>
</nav>
Not every group of links needs <nav>. A few related links in your footer are fine without it. Use <nav> for the navigation blocks that define how someone moves through your site.
<main>
The primary content of the page. Use it once per page, and don't nest it inside other landmark elements.
<body>
<header>...</header>
<main>
<h1>Our Latest Articles</h1>
<article>...</article>
<article>...</article>
</main>
<footer>...</footer>
</body>
What's a landmark element? Landmarks are HTML tags that identify major regions of a page: <header>, <nav>, <main>, <aside>, and <footer>. Screen readers use them to let users jump between sections (e.g., "skip to main content" or "go to navigation"). Because <main> represents the primary content area, it should sit at the top level of <body>, not buried inside one of them.
<section>
Groups related content under a common theme. A <section> should almost always have a heading.
<section>
<h2>Features</h2>
<p>Our platform includes real-time collaboration,
version history, and automated backups.</p>
</section>
<section>
<h2>Pricing</h2>
<p>Plans start at $9/month for individuals.</p>
</section>
If the content would make sense as a line in a table of contents, it's probably a <section>.
<article>
A self-contained piece of content that could stand on its own—a blog post, a product review, a news story, a forum comment.
<article>
<header>
<h2>How to Repot a Houseplant</h2>
<p>By Jane Oliviér · March 14, 2026</p>
</header>
<p>Repotting is stressful for plants, so timing matters.
The best window is early spring, just before the
growing season kicks in.</p>
<footer>
<p>Filed under: <a href="/gardening">Gardening</a></p>
</footer>
</article>
Articles can nest. A blog post (<article>) might contain user comments, each in their own <article>.
<aside>
An aside is content that's tangentially related to the rest of the content on the page. Sidebars, pull quotes, related links, callout boxes.
<main>
<article>
<h1>The History of Espresso</h1>
<p>Espresso was born in early 20th-century Italy...</p>
<aside>
<h2>Did you know?</h2>
<p>The word "espresso" comes from the Italian
for "pressed out," referring to how water is
forced through the coffee grounds.</p>
</aside>
<p>By the 1940s, the lever-driven machine had
transformed café culture across Europe...</p>
</article>
</main>
If you removed the <aside>, the main content should still make complete sense on its own.
<footer>
The footer of a page or section. Copyright, contact info, secondary navigation.
<footer>
<nav>
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
<a href="/contact">Contact Us</a>
</nav>
<p>© 2026 Acme Co. All rights reserved.</p>
</footer>
Like <header>, you can use <footer> inside <article> or <section> elements too.
Text tags
These describe the meaning and role of inline and block-level text.
<h1> through <h6>
Headings define the hierarchy of your content. <h1> is the top-level heading. <h2> through <h6> are subheadings in descending order.
<h1>Complete Guide to Indoor Gardening</h1>
<h2>Choosing Your Plants</h2>
<h3>Low-Light Options</h3>
<h3>Bright-Light Options</h3>
<h2>Soil and Containers</h2>
<h3>Potting Mix Types</h3>
<h3>Drainage Tips</h3>
<h2>Watering and Feeding</h2>
Use one <h1> per page. Don't skip levels—we'll cover why in the common issues section.
<p>
A paragraph. Use it for blocks of running text, not for single words or labels.
<p>Tomatoes need at 6 to 8 hours of direct sunlight
each day. Without it, the plants become leggy and
produce fewer fruit.</p>
<p>If your garden doesn't get enough sun, consider
growing cherry tomatoes in containers that you can
move throughout the day.</p>
<a>
Creates a hyperlink. The text inside should describe where the link goes.
<!-- Good: descriptive -->
<p>Read our <a href="/guide-to-composting">complete guide to composting</a>
for step-by-step instructions.</p>
<!-- Bad: vague -->
<p>For our composting guide, <a href="/guide">click here</a>.</p>
Screen readers can pull up a list of every link on the page. A list full of "click here" entries is useless.
<ol> and <ul>
Ordered lists (<ol>) are for items in a specific sequence. Unordered lists (<ul>) are for items where order doesn't matter.
<!-- Ordered: the sequence matters -->
<h2>How to Brew Pour-Over Coffee</h2>
<ol>
<li>Boil water to 200°F (93°C).</li>
<li>Place filter in dripper and rinse with hot water.</li>
<li>Add 20g of medium-ground coffee.</li>
<li>Pour 40g of water and wait 30 seconds (the bloom).</li>
<li>Slowly pour remaining water in circular motions.</li>
</ol>
<!-- Unordered: the sequence doesn't matter -->
<h2>What You'll Need</h2>
<ul>
<li>Pour-over dripper</li>
<li>Paper filters</li>
<li>Gooseneck kettle</li>
<li>Kitchen scale</li>
<li>Fresh coffee beans</li>
</ul>
<blockquote> and <q>
<blockquote> is for long, standalone quotations. <q> is for short quotes inline with a sentence.
<!-- Long quotation -->
<blockquote cite="<https://example.com/interview>">
<p>The web was designed to be universal. Semantic HTML
is how we honor that original intent—by writing
code that any device, any browser, and any person
can understand.</p>
<footer>— Tim Berners–Lee</footer>
</blockquote>
<!-- Short inline quotation -->
<p>As the W3C puts it, <q>semantics are the contract
between the author and the user agent.</q></p>
Browsers add quotation marks around <q> automatically.
<em> and <strong>
<em> adds emphasis—the kind that changes how a sentence sounds when read aloud. Browsers render it as italics. <strong> marks strong importance. Browsers render it as bold.
<!-- Emphasis: voice would shift here -->
<p>You need to water the plants <em>before</em> adding
fertilizer, not after.</p>
<!-- Strong importance: critical info -->
<p><strong>Do not</strong> mix bleach with ammonia.
The resulting fumes are toxic.</p>
These are about meaning, not appearance. If you just want bold or italic text for visual reasons, use CSS or the <b> and <i> tags instead.
Media and specialized tags
<figure> and <figcaption>
Wraps media (images, diagrams, charts, code) with an optional caption.
<figure>
<img src="soil-layers.jpg"
alt="Cross-section showing topsoil, subsoil,
and bedrock layers">
<figcaption>
Figure 1: The three primary soil layers found
in most temperate environments.
</figcaption>
</figure>
<figure> works for anything that's referenced from the main text but could stand alone—not just images.
<mark>
Highlights text relevant to the current context. Browsers give it a yellow background by default.
<p>Search results for "semantic HTML":</p>
<p>...using <mark>semantic HTML</mark> tags improves
both accessibility and search engine optimization...</p>
<pre>
Preserves whitespace and line breaks exactly as written. Use it for code snippets or anything where formatting matters.
<pre><code>
function greet(name) {
return `Hello, ${name}!`;
}
</code></pre>
<time>
A date, time, or duration. The datetime attribute gives machines a parseable value.
<p>The event takes place on
<time datetime="2026-04-15">April 15, 2026</time>
at <time datetime="14:00">2:00 PM</time>.</p>
Useful for blog posts and event listings where dates feed into structured data.
<details> and <summary>
A collapsible section. <summary> is the clickable label. The rest is hidden until opened.
<details>
<summary>What is your return policy?</summary>
<p>We accept returns within 30 days of purchase.
Items must be in original packaging and unused.
Refunds process within 5-7 business days.</p>
</details>
No JavaScript needed. Good for FAQs and supplementary info.
<address>
Contact information for the nearest <article> or <body>. It's not just for street addresses—email, phone, and links work too.
<address>
<p>Written by <a href="/authors/plain-jane">Jane Plane</a></p>
<p>Email: <a href="mailto:jane@example.com">jane@example.com</a></p>
</address>
Common issues
These are the mistakes that happen most often. Each has real consequences for accessibility and how search engines read your pages, which can negatively affect how your website ranks in SEO terms.
Non-sequential heading levels
Heading levels should follow a logical order, like an outline. Don't skip levels.
<!-- Incorrect: jumps from h1 to h4 -->
<h1>Our Services</h1>
<h4>Web Design</h4>
<h4>SEO Consulting</h4>
<!-- Incorrect: h3 before any h2 -->
<h1>Baking Sourdough Bread</h1>
<h3>What You'll Need</h3>
<h2>Instructions</h2>
<!-- Correct: sequential -->
<h1>Our Services</h1>
<h2>Web Design</h2>
<h3>Custom Websites</h3>
<h3>E-commerce</h3>
<h2>SEO Consulting</h2>
<h3>Technical Audits</h3>
<h3>Content Strategy</h3>
Screen readers let users navigate by heading level. Skipped levels make it seem like content is missing. And search engines interpret heading hierarchy as an outline of the page—a broken outline is a confusing signal.
Start with one <h1>, use <h2> for major sections, <h3> for subsections. Don't skip.
Multiple <h1> tags
One <h1> per page. It's the page title.
<!-- Incorrect -->
<h1>Our Company</h1>
<h1>Our Products</h1>
<!-- Correct -->
<h1>Our Company</h1>
<h2>Our Products</h2>
Using heading tags for styling
Headings define content hierarchy. They're not a way to make text big or small.
<!-- Incorrect: h2 used to make promotional text large -->
<h2>Free shipping on orders over $50!</h2>
<!-- Correct: style it with CSS -->
<p class="promo-banner">Free shipping on orders over $50!</p>
If you need big text, use font-size in CSS. If you need small text, set that CSS property to something smaller.
Using <strong> and <em> for visual styling
<strong> tells screen readers that this text is important. <em> changes the stress emphasis. If you just want bold or italic for visual reasons, use the font-style property in CSS..
<!-- Incorrect: strong used just for bold appearance -->
<p><strong>Ingredients</strong></p>
<p><strong>Flour</strong> — 2 cups</p>
<p><strong>Sugar</strong> — 1 cup</p>
<!-- Correct: use appropriate structure -->
<h2>Ingredients</h2>
<dl>
<dt>Flour</dt>
<dd>2 cups</dd>
<dt>Sugar</dt>
<dd>1 cup</dd>
</dl>
Nesting <main> inside landmarks
<main> should be a direct child of <body>, sitting alongside the other landmark elements (<header>, <nav>, <footer>, <aside>).
<!-- Incorrect -->
<body>
<header>
<main>
<p>This doesn't belong here.</p>
</main>
</header>
</body>
<!-- Correct -->
<body>
<header>...</header>
<main>
<p>This belongs here.</p>
</main>
<footer>...</footer>
</body>
Using <div> when a semantic tag exists
<div> is a generic container with no meaning. It's fine for layout wrappers, but if a semantic tag fits, use that instead.
<!-- div as navigation -->
<div class="navigation">
<a href="/">Home</a>
<a href="/about">About</a>
</div>
<!-- nav as navigation -->
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<!-- div as blog post -->
<div class="blog-post">
<div class="post-title">My Post</div>
<div class="post-body">Content here...</div>
</div>
<!-- Correct -->
<article>
<h2>My Post</h2>
<p>Content here...</p>
</article>
Missing alt text on images
Every <img> tag needs an alt attribute. ALT Text (or alternative text) provides a concise description for users that can’t see it, either because of a visual impairment or, more commonly, a broken link.
<!-- No alt text -->
<img src="team-photo.jpg">
<!-- Useless alt text -->
<img src="team-photo.jpg" alt="image">
<!-- Descriptive alt text -->
<img src="team-photo.jpg"
alt="The company team standing outside
their Portland office">
<!-- Decorative image: empty alt tells screen readers to skip -->
<img src="decorative-divider.svg" alt="">
Visual lists made with <br> tags
If content is a list, use a list tag like ol or li. Screen readers announce list items and their count.
<!-- Incorrect -->
<p>
- Apples<br>
- Oranges<br>
- Bananas<br>
</p>
<!-- Correct -->
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
Conclusion
Semantic HTML comes down to one habit: pick the tag that describes what the content is, and let CSS handle how it looks. Use one <h1> per page, keep your headings sequential, use landmark elements, write link text that describes where the link goes, and add alt text to every image.
If you want to catch mistakes you've missed, run your pages through the W3C Markup Validator—it can help flag nesting errors, missing attributes, and structural problems before they reach your users.