Semantic HTML: Write Code That Means Something

Semantic HTML uses tags that describe their content’s purpose, not just its appearance. Instead of using generic <div> tags everywhere, semantic elements tell browsers, search engines, and screen readers exactly what each part of your page does. Let’s learn how to write cleaner, more accessible HTML!

What Does “Semantic” Mean?

“Semantic” means “relating to meaning.” Semantic HTML elements clearly describe their purpose:

<header> — “This is a header section”
<nav> — “This is navigation”
<main> — “This is the main content”
<article> — “This is a self-contained article”

Compare this to non-semantic elements like <div> and <span>, which just mean “a division” or “a span of text”—they don’t tell us anything about what’s inside.

Why Semantic HTML Matters

1. Accessibility

Screen readers use semantic elements to help blind and visually impaired users navigate. They can jump directly to the <nav>, skip to the <main> content, or browse through <article> elements.

2. SEO (Search Engine Optimization)

Search engines understand semantic elements better. They know that content in <main> is more important than content in <aside>, and that <article> elements contain complete pieces of content.

3. Code Readability

Compare these two approaches:

<!-- Non-semantic: What does this mean? -->
<div class="top-section">
<div class="logo">...</div>
<div class="links">...</div>
</div>
<div class="content-area">
<div class="main-stuff">...</div>
<div class="side-stuff">...</div>
</div>
<div class="bottom-section">...</div>

<!-- Semantic: Crystal clear! -->
<header>
<img src="logo.png" alt="Company Logo">
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>

The semantic version is immediately understandable, even without class names!

The Main Semantic Elements

`<header>` — Page or Section Header

Use <header> for introductory content at the top of a page or section. Typically contains the logo, site title, and main navigation.

<header>
<img src="logo.png" alt="htmlEditor.net Logo">
<h1>htmlEditor.net</h1>
<nav>
  <a href="/">Home</a>
  <a href="/tutorials">Tutorials</a>
  <a href="/editor">Editor</a>
</nav>
</header>

Note: You can have multiple headers! Each <article> or <section> can have its own header.

`<nav>` — Navigation Links

Use <nav> for major navigation blocks. Not every group of links needs <nav>—use it for main navigation, breadcrumbs, and table of contents.

<nav aria-label="Main navigation">
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/services">Services</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>
</nav>

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
<ol>
  <li><a href="/">Home</a></li>
  <li><a href="/tutorials">Tutorials</a></li>
  <li aria-current="page">HTML Basics</li>
</ol>
</nav>

Tip: Use aria-label to distinguish between multiple <nav> elements on a page.

`<main>` — The Main Content

Use <main> for the primary content of your page. There should only be ONE <main> element per page.

<body>
<header>...</header>

<main>
  <!-- Your page's unique, primary content goes here -->
  <h1>Welcome to Our Website</h1>
  <p>This is where your main content lives...</p>
</main>

<footer>...</footer>
</body>

What goes in main? Everything that’s unique to this page. Headers, footers, and sidebars that repeat across pages should be outside <main>.

`<article>` — Self-Contained Content

Use <article> for content that could stand alone and make sense on its own—blog posts, news articles, product cards, forum posts, comments.

<article>
<header>
  <h2>How to Learn HTML in 30 Days</h2>
  <p>By Jane Smith | Published: January 15, 2024</p>
</header>

<p>Learning HTML doesn't have to be hard. In this guide,
I'll show you exactly how to go from zero to building
your own websites in just 30 days...</p>

<footer>
  <p>Tags: HTML, Tutorial, Beginners</p>
</footer>
</article>

The test: Could this content be shared, syndicated, or displayed on another site and still make sense? If yes, it’s an article!

`<section>` — Thematic Grouping

Use <section> to group related content with a heading. Think of it like chapters in a book.

<main>
<section>
  <h2>Our Services</h2>
  <p>We offer three main services...</p>
</section>

<section>
  <h2>Meet Our Team</h2>
  <p>Our talented team includes...</p>
</section>

<section>
  <h2>Client Testimonials</h2>
  <p>Here's what our clients say...</p>
</section>
</main>

Section vs Article: An article is self-contained and could exist on its own. A section is a thematic grouping that’s part of something larger.

`<aside>` — Related but Secondary Content

Use <aside> for content that’s related to the main content but could be removed without losing meaning—sidebars, pull quotes, ads, related links.

<main>
<article>
  <h1>HTML Tutorial</h1>
  <p>HTML is the foundation of the web...</p>
</article>

<aside>
  <h2>Related Tutorials</h2>
  <ul>
    <li><a href="/css">CSS Basics</a></li>
    <li><a href="/javascript">JavaScript Intro</a></li>
  </ul>

  <h2>Did You Know?</h2>
  <p>HTML was invented in 1991 by Tim Berners-Lee!</p>
</aside>
</main>

`<footer>` — Page or Section Footer

Use <footer> for closing content—copyright notices, contact info, site links, author information.

<footer>
<nav>
  <a href="/about">About</a>
  <a href="/privacy">Privacy Policy</a>
  <a href="/terms">Terms of Service</a>
</nav>
<p>&copy; 2024 htmlEditor.net. All rights reserved.</p>
</footer>

Like <header>, you can have multiple footers—one for the page, and one for each article or section.

More Useful Semantic Elements

`<figure>` and `<figcaption>`

Use these for images, diagrams, or code examples that have captions:

<figure>
<img
  src="html-structure.png"
  alt="Diagram showing HTML document structure with head and body"
>
<figcaption>
  Figure 1: The basic structure of an HTML document
</figcaption>
</figure>

`<time>`

Use for dates and times. The datetime attribute provides a machine-readable format:

<p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>

<p>The meeting starts at <time datetime="14:30">2:30 PM</time></p>

<p>Event: <time datetime="2024-03-15T09:00">March 15, 2024 at 9 AM</time></p>

`<address>`

Use for contact information for the author or owner of the content:

<address>
<p>Written by <a href="mailto:[email protected]">Jane Smith</a></p>
<p>Visit us at: 123 Web Street, Internet City</p>
</address>

`<mark>`

Highlights text that’s relevant to the current context, like search results:

<p>Search results for "HTML":</p>
<p>Learn <mark>HTML</mark> with our interactive tutorials at htmlEditor.net</p>

Complete Page Example

Let’s put it all together in a complete, semantically correct page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech Blog - Latest Articles</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: system-ui, sans-serif; line-height: 1.6; }
  header { background: #2563eb; color: white; padding: 1rem 2rem; }
  nav ul { list-style: none; display: flex; gap: 1rem; margin-top: 1rem; }
  nav a { color: white; text-decoration: none; }
  .container { display: flex; max-width: 1200px; margin: 0 auto; gap: 2rem; padding: 2rem; }
  main { flex: 2; }
  aside { flex: 1; background: #f3f4f6; padding: 1.5rem; border-radius: 8px; }
  article { border: 1px solid #e5e7eb; padding: 1.5rem; margin-bottom: 1.5rem; border-radius: 8px; }
  article header { background: none; color: inherit; padding: 0; margin-bottom: 1rem; }
  article h2 { color: #2563eb; }
  footer.site-footer { background: #1f2937; color: white; text-align: center; padding: 2rem; }
</style>
</head>
<body>
<header>
  <h1>Tech Blog</h1>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/articles">Articles</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<div class="container">
  <main>
    <article>
      <header>
        <h2>Getting Started with Semantic HTML</h2>
        <p>By Jane Smith on <time datetime="2024-01-15">January 15, 2024</time></p>
      </header>
      <p>Semantic HTML is about writing code that clearly communicates
      your content's meaning...</p>
      <footer>
        <p>Tags: HTML, Accessibility</p>
      </footer>
    </article>
  </main>

  <aside>
    <h2>Popular Posts</h2>
    <ul>
      <li><a href="#">HTML for Beginners</a></li>
      <li><a href="#">CSS Animation Tips</a></li>
    </ul>
  </aside>
</div>

<footer class="site-footer">
  <p>&copy; 2024 Tech Blog. All rights reserved.</p>
</footer>
</body>
</html>

Quick Reference Chart

Element	Use For	Example
<header>	Introductory content	Site header, article header
<nav>	Navigation links	Main menu, breadcrumbs
<main>	Primary page content	One per page
<article>	Self-contained content	Blog post, product card
<section>	Thematic grouping	Chapter, feature area
<aside>	Secondary content	Sidebar, related links
<footer>	Closing content	Copyright, author info

Common Mistakes to Avoid

Do Not Use Section Instead of Div for Styling

<!-- Bad: section used just for styling -->
<section class="blue-background">
<p>Some content...</p>
</section>

<!-- Good: div for pure styling -->
<div class="blue-background">
<p>Some content...</p>
</div>

Avoid Using Multiple Main Elements

<!-- Bad: multiple mains -->
<main>Content 1</main>
<main>Content 2</main>

<!-- Good: one main per page -->
<main>
<section>Content 1</section>
<section>Content 2</section>
</main>

Try It Yourself!

Basic: Convert a page using only <div> tags to use semantic elements
Intermediate: Create a blog article page with header, main content, sidebar, and footer
Advanced: Build a news site homepage with multiple articles

Next Steps

Great job! You now understand semantic HTML and why it matters. Continue learning:

HTML Forms — Create interactive forms
HTML Tables — Display data in rows and columns
Accessibility Best Practices — Make your sites work for everyone
Back to HTML Basics — Review the fundamentals

💡 Practice Makes Perfect

Try building a semantically correct page in our free online HTML editor! Copy the complete example above and modify it to create your own blog or portfolio page.