Siksha Sarovar

Siksha Sarovar (sikshasarovar.com) is a free educational web application that helps students in India learn programming and prepare for academic and competitive exams. The platform offers structured coding courses (C, C++, Python, Java, HTML, CSS, PHP, Power BI, AI, Machine Learning, Data Science), complete university curriculum notes for BCA/MCA students with previous year question papers, Class 10 and Class 12 CBSE/HBSE school notes, and dedicated preparation material for SSC, UPSC, Banking, Railway and other government exams. Browsing the site is completely free and requires no account. Users may optionally sign in with Google solely to save their learning progress, quiz scores and personal preferences across devices.

Privacy Policy | Terms of Service | Contact Siksha Sarovar | About Siksha Sarovar

v4.0.9 · PWA
Siksha Sarovar logo
Siksha Sarovar
Your Learning Universe

Siksha Sarovar is a free e-learning platform for coding courses, BCA university notes and competitive exam preparation. Optional Google sign-in saves your learning progress across devices.

Initializing knowledge base…
Compiling modules 0%

HTML5 Semantic Elements

Lesson 7 of 34 in the free Web Technologies notes on Siksha Sarovar, written by Rohit Jangra.

HTML5 Semantic Elements

What are Semantic Elements?

Semantic HTML elements clearly describe their meaning to both the browser and the developer. They improve accessibility, SEO, and code readability.

Compare:

<!-- Non-semantic -->
<div id="header">...</div>
<div id="nav">...</div>

<!-- Semantic -->
<header>...</header>
<nav>...</nav>

HTML5 Semantic Layout Elements

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Semantic Page</title>
</head>
<body>
  <header>
    <h1>Site Title</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <section>
        <h3>Section 1</h3>
        <p>Content here...</p>
      </section>
    </article>

    <aside>
      <h3>Related Links</h3>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>
</body>
</html>

Semantic Elements Reference

ElementPurpose
<header>Page or section header
<nav>Navigation links
<main>Main content (unique per page)
<article>Self-contained content
<section>Thematic grouping
<aside>Sidebar/tangential content
<footer>Page or section footer
<figure>Media with caption
<figcaption>Caption for figure
<mark>Highlighted text
<time>Date/time
<details>Expandable content
<summary>Heading for details

Benefits of Semantic HTML

  1. Accessibility – Screen readers understand page structure
  2. SEO – Search engines better index content
  3. Maintainability – Easier to read and maintain
  4. Browser compatibility – Consistent rendering

Figure and Figcaption

<figure>
  <img src="chart.png" alt="Sales Chart">
  <figcaption>Figure 1: Monthly Sales 2024</figcaption>
</figure>

Details and Summary

<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed on click.</p>
</details>
Key Takeaway: Semantic HTML5 elements communicate meaning to browsers, screen readers, and search engines. Always prefer semantic elements over generic <div> and <span> containers.