HTML Semantic Elements

Semantic HTML elements are tags that clearly describe their purpose and meaning — both to the browser and to developers reading the code. Instead of using generic <div> tags for everything, semantic elements give the content a meaningful label.

For example, using <header> instead of <div id="header"> immediately tells everyone (and search engines) that this section is the page header.

Why Use Semantic Elements?

Readability – The code is easier to read and understand
SEO – Search engines better understand the structure and content of the page
Accessibility – Screen readers use semantic tags to help visually impaired users navigate
Maintainability – It is easier to update and work with well-structured code

Semantic vs Non-Semantic

Non-Semantic (Avoid)	Semantic (Use Instead)
`<div id="header">`	`<header>`
`<div id="nav">`	`<nav>`
`<div id="main">`	`<main>`
`<div class="article">`	`<article>`
`<div class="section">`	`<section>`
`<div id="sidebar">`	`<aside>`
`<div id="footer">`	`<footer>`

Common HTML5 Semantic Elements

<header>

Represents the top section of a page or a section. Typically contains the logo, site name, and main navigation.

<header>
  <h1>My Blog</h1>
  <p>Stories, tutorials and ideas</p>
</header>

<nav>

Contains the main navigation links of a page or section.

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="courses.html">Courses</a>
  <a href="contact.html">Contact</a>
</nav>

<main>

Contains the primary content of the page. There should be only one <main> element per page.

<main>
  <h2>HTML Beginner Course</h2>
  <p>Welcome to the HTML learning journey.</p>
</main>

<section>

Groups related content into a distinct section of the page. Each section typically has its own heading.

<section>
  <h2>What is HTML?</h2>
  <p>HTML stands for HyperText Markup Language.</p>
</section>

<section>
  <h2>Why Learn HTML?</h2>
  <p>HTML is the foundation of every web page.</p>
</section>

<article>

Represents a self-contained piece of content that can stand on its own — like a blog post, news article, or comment. An article should make sense even when taken out of the page context.

<article>
  <h2>Top 5 HTML Tips for Beginners</h2>
  <p>Posted on January 10, 2025 by Admin</p>
  <p>Learning HTML becomes easy when you start with the right tips...</p>
</article>

<aside>

Contains content that is related to but separate from the main content — like a sidebar, advertisement, related posts, or author bio.

<aside>
  <h3>Related Topics</h3>
  <ul>
    <li><a href="#">CSS Basics</a></li>
    <li><a href="#">JavaScript Introduction</a></li>
  </ul>
</aside>

<footer>

Contains the bottom section of a page or section — typically copyright, contact info, and footer links.

<footer>
  <p>&copy; 2025 eStudy247. All rights reserved.</p>
  <a href="privacy.html">Privacy Policy</a>
</footer>

<figure> and <figcaption>

Used to group an image, diagram, or code example with its descriptive caption.

<figure>
  <img src="html-structure.png" alt="HTML Document Structure Diagram">
  <figcaption>Figure 1: The structure of an HTML document</figcaption>
</figure>

<time>

Represents a specific date, time, or duration. The datetime attribute provides a machine-readable format for search engines and browsers.

<p>Published on <time datetime="2025-01-10">January 10, 2025</time></p>
<p>Event starts at <time datetime="14:30">2:30 PM</time></p>

Complete Semantic Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>

  <header>
    <h1>My Website</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Featured Articles</h2>
      <article>
        <h3>Learn HTML in 30 Days</h3>
        <p>A complete guide for beginners.</p>
      </article>
    </section>

    <aside>
      <h3>Newsletter</h3>
      <p>Subscribe for weekly updates.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>

</body>
</html>

Key Points to Remember

Semantic elements describe what the content is, not just how it looks
Use semantic elements instead of plain <div> tags wherever possible
Only one <main> element should exist per page
Semantic HTML improves SEO, accessibility, and code readability
All HTML5 semantic elements are supported in all modern browsers
<article> is for standalone content; <section> is for related grouped content

Previous lessons

Back to courses

Next lessons