D DevBrainBox

HTML5 Semantic Elements

HTML

What are Semantic Elements?

Semantic elements are HTML elements that clearly describe their meaning and role in a web page.

Unlike generic div and span, which don’t tell you anything about their content, semantic tags tell both the browser and developers what kind of content is inside.

Why Use Semantic Elements?

Better readability: Easier for developers to understand the structure. Accessibility: Helps screen readers and assistive technologies. SEO friendly: Search engines understand your page better.

Common HTML5 Semantic Elements

ElementTypical Use
<header>Defines the header for a page or section (often contains logo, nav).
<nav>Contains navigation links.
<main>Main content of the document.
<section>Groups related content (like chapters or thematic groups).
<article>Independent piece of content (blog post, news article).
<aside>Sidebar content (ads, related links).
<footer>Footer of a page or section (contact info, copyright).
<figure>Self-contained content (like images with captions).
<figcaption>Caption for <figure>.
<mark>Highlights text.
<time>Represents a date.
<!DOCTYPE html>
<html>
<head>
  <title>My Blog</title>
</head>
<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a> | 
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML5 is awesome!</h2>
      <p>Semantic elements make your HTML clearer.</p>
    </article>

    <aside>
      <h3>Related Posts</h3>
      <ul>
        <li><a href="#">CSS Basics</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    &copy; 2025 My Blog
  </footer>
</body>
</html>

<header> holds the site title & navigation.

<main> holds the primary content.

<article> is an individual piece (blog post).

<aside> is for extra info (like related posts).

<footer> has copyright.

Why it matters?

  • Easier to read and maintain your code.
  • Improves SEO (Google knows which part is your article vs sidebar).
  • Better for accessibility (screen readers understand it).

HTML5 Div Span

HTML

HTML5 Video

HTML

On this page