• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Semantics

← Previous Next →

🔹 What Are Semantic Elements?

Semantic HTML refers to using HTML5 tags that clearly describe their meaning both to the browser and the developer.

Instead of using generic <div> and <span> tags, semantic elements like <header>, <footer>, <article>, etc., define the purpose of the content within them.

🔹 Why Use Semantic Tags?

✅ Improves code readability
✅ Helps screen readers and accessibility tools
✅ Enhances SEO (Search Engine Optimization)
✅ Makes debugging and maintenance easier

🔹 Common Semantic Elements

Tag Meaning
<header> Introductory content or navigation links
<nav> Navigation menus
<main> Main content of the document
<section> Thematic grouping of content
<article> Self-contained, reusable content
<aside> Secondary content (e.g., sidebars)
<footer> Footer for a section or page
<figure> Groups media content (like images)
<figcaption> Caption for a <figure>
<mark> Highlighted text
<time> Time or date

💻 Example: Basic Semantic Page Structure

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic HTML Example</title>
  </head>
  <body>

    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
      </nav>
    </header>

    <main>
      <section>
        <h2>Welcome</h2>
        <p>This is a section with some text.</p>
      </section>

      <article>
        <h2>Blog Post</h2>
        <p>This article explains semantic HTML elements.</p>
      </article>

      <aside>
        <h4>Related Links</h4>
        <ul>
          <li><a href="#">HTML Basics</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>Copyright © 2025</p>
    </footer>

  </body>
</html>

Practice Questions

Q1. Create a web page using <header>, <main>, and <footer>.

Q2. Add a <nav> menu inside the <header>.

Q3. Use <section> to group content like services or features.

Q4. Add an <article> representing a blog post.

Q5. Create an <aside> element with related links.

Q6. Use <figure> and <figcaption> to display an image with a caption.

Q7. Highlight text using the <mark> tag.

Q8. Insert a date and time using the <time> tag.

Q9. Create a layout without any <div>, using only semantic tags.

Q10. Build a blog layout with multiple <article> elements.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top