🧩 HTML Semantic and Non-semantic Tag

Last Updated: 01 Nov 2025

  • Semantic tags are HTML5 elements that describe the meaning of their content — not just how they look.
  • It Provide Better Readability
  • It Improve Accessibility
  • Consistent Structure
  • Helps Search Engines (SEO friendly)

🧠 Example:

<header>Website Header</header>
<main>Main  Content</ma>
<footer>Footer Section</footer>

These tags tell browsers and developers what each part of the page means.

🗣 Hinglish Tip: “Semantic” ka matlab hota hai meaningful.Ye tags content ka purpose batate hain — jaise <header> = upar ka section, main= middle section, <footer> = neeche ka section.

Common Semantic Tags

  • <header>: Top section (logo, nav, title)
  • nav: Navigation links
  • <main>: Main content or Central Content (articles, blog posts, etc.)
  • section: Group of related content
  • article: Independent, self-contained content
  • <aside>: Sidebar content or ads
  • <footer>: Bottom section (copyright, contact info, etc.)
  • figure: Image or figure with caption
  • figcaption: Caption for figure
  • mark: Highlighted text
  • time: Date or time

Example 1 — Semantic Webpage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Semantic Webpage Example</title>
  </head>
  <body>
    <header>
      <h1>🌐 My Website</h1>
      <nav>
        <a href="#home">Home</a> | <a href="#about">About</a> |
        <a href="#contact">Contact</a>
      </nav>
    </header>

    <main>
      <section id="home">
        <h2>Welcome Section</h2>
        <p>This is the introduction to my webpage.</p>
      </section>

      <section id="about">
        <article>
          <h2>About Me</h2>
          <p>I love building websites using HTML, CSS, and JavaScript.</p>
        </article>
      </section>

      <aside>
        <h3>Did You Know?</h3>
        <p>HTML5 introduced 20+ new semantic tags!</p>
      </aside>
      <figure>
        <img src="nature.jpg" alt="Beautiful Nature" width="400" />
        <figcaption>Figure 1: A Beautiful View of Nature</figcaption>
      </figure>
    </main>

    <footer>
      <p>&copy; 2025 MyWebsite. All rights reserved.</p>
      <p>Contact: info@mywebsite.com</p>
    </footer>
  </body>
</html>

Example 2 — Blog Page Layout:

<header>
  <h1>Tech Blog</h1>
  <nav>
    <a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h2>Understanding HTML Semantic Tags</h2>
    <p>Semantic tags make HTML code more meaningful and structured.</p>
  </article>

  <aside>
    <h3>Recent Posts</h3>
    <ul>
      <li>CSS Basics</li>
      <li>Responsive Design</li>
    </ul>
  </aside>
  <section>
    <p>
      Event Date:
      <time datetime="2025-12-01">1st December 2025</time>
    </p>

    <p>
      HTML5 introduced many <mark>Semantic Tags</mark> for better structure.
    </p>
  </section>
</main>

<footer>
  <p>© 2025 Tech Blog | Built with ❤️ in HTML</p>
</footer>

Non-Semantic Tags /Non Semantic helper

A Box Without Meaning

  • div — Block-level wrapper
  • span — Inline wrapper
  • details — Collapsible content
  • summary — Summary for details

Example:

<div>
  <p>Some content <span>With span <span></p>
  <p>More content</p>
</div>
<details>
  <summary>Read more about HTML</summary>
  <p>HTML stands for HyperText Markup Language. It structures web pages.</p>
</details>

🧠 Quick Practice

← PreviousNext →