Skip to content
Laviyx Learn

Try

HTML course menu

Semantic HTML: What It Is and Why It Matters

Learn what semantic HTML means, why choosing elements by meaning improves accessibility, SEO and maintainability, how to replace div soup with meaningful elements, and a quick guide to picking the right element.

Intermediate5 min readUpdated
On this page

Semantic HTML means choosing elements for what content is, not for how it should look. A heading is an <h2>, a list is a <ul>, a button is a <button>, and navigation is a <nav>. CSS then takes care of the appearance.

Two versions of the same thing#

Both of these can be styled to look identical:

HTML
<!-- Non-semantic -->
<div class="top">
  <div class="title">My Blog</div>
  <div class="links">
    <span onclick="go('/')">Home</span>
    <span onclick="go('/about')">About</span>
  </div>
</div>

<!-- Semantic -->
<header>
  <h1>My Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

The second version tells the browser, search engines and assistive technology that this is the page header, that "My Blog" is the main heading, and that the links are navigation. The first version tells them nothing, and its "links" do not even work with a keyboard.

Why it matters#

BenefitHow
AccessibilityScreen readers list headings, landmarks (header, nav, main, footer) and links, so users can jump straight to what they need. Real buttons and links work with the keyboard.
Search enginesHeadings, links, articles and lists help search engines understand what the page is about.
Built-in behaviour<button>, <a>, <details> and form elements come with keyboard support, focus and states for free.
Maintainability<nav> and <article> are easier to understand than <div class="x"> when you or a teammate reads the code later.
Reader modes and toolsBrowser reading views, translation tools and other software rely on structure to find the main content.

Choosing the right element#

ContentElement
Page or section title<h1> to <h6>
Paragraph<p>
Navigation links<nav> with a list of <a>
Main content of the page<main>
A self-contained piece (post, product card, comment)<article>
A themed group with a heading<section>
Related side content<aside>
Important text<strong>
Something clickable that does an action<button>
Something clickable that goes somewhere<a href>
Data in rows and columns<table>
Image with a caption<figure> and <figcaption>
Date or time<time>
Nothing else fits, just for styling<div> or <span>

The layout elements are explained with a full example in Page Layout Elements.

Semantics is about meaning, not looks#

  • Do not choose <h3> because you like its size; restyle the correct heading with CSS.
  • Do not use <blockquote> to indent text that is not a quotation; use CSS margin.
  • Do not use <table> to place things in columns; use CSS Grid or Flexbox.

Practice#

Practice exercise

Rewrite this non-semantic snippet using meaningful elements:

HTML
<div class="post">
  <div class="post-title">Learning HTML in 30 days</div>
  <div class="date">12 Oct 2026</div>
  <div>Day one was all about elements and tags.</div>
  <div class="btn" onclick="like()">Like</div>
</div>
Show solution
HTML
<article class="post">
  <h2>Learning HTML in 30 days</h2>
  <p><time datetime="2026-10-12">12 Oct 2026</time></p>
  <p>Day one was all about elements and tags.</p>
  <button type="button">Like</button>
</article>
Result

A blog post is self-contained, so it is an <article>; its title is a heading; the date is a <time>; the text is a paragraph; and the "Like" control performs an action, so it is a <button>. (The like behaviour itself would be added with JavaScript.)

Key takeaway#

Finished this lesson?

Related lessons

HTMLHTML Page Layout Elements: header, nav, main, section, article, aside and footerLearn the HTML5 layout elements header, nav, main, section, article, aside and footer, the landmarks they create for screen readers, the difference between section and article, and a complete page layout example.Intermediate7 min readHTMLHTML Accessibility: Building Pages Everyone Can UseLearn the HTML side of web accessibility: who benefits, semantic elements and landmarks, headings, alt text, labelled forms, keyboard access and focus, link text, colour and contrast, language, and how to test with a keyboard and a screen reader.Advanced5 min readHTMLBlock and Inline Elements in HTML: div and span ExplainedUnderstand block-level and inline elements in HTML: how they flow on the page, which elements are which, the generic div and span containers, and how CSS display changes an element's box.Intermediate4 min read