• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

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.

HTML Semantics Quiz

Q1: What does "semantic" mean in HTML?

A. Adds animations
B. Tags with style
C. Tags that convey meaning
D. JavaScript-based layout

Q2: Which tag is used to wrap the main content of a page?

A. <main>
B. <body>
C. <article>
D. <div>

Q3: Which element is used for a blog post?

A. <aside>
B. <section>
C. <article>
D. <main>

Q4: What does <nav> tag represent?

A. Website footer
B. Navigation menu
C. Top heading
D. Side content

Q5: Which tag is used for secondary content like sidebars?

A. <header>
B. <main>
C. <aside>
D. <figure>

Q6: Which semantic tag is suitable for grouping related media?

A. <mark>
B. <figure>
C. <span>
D. <pre>

Q7: What does <footer> tag represent?

A. Top of page
B. Style for links
C. End of a section or document
D. Article title

Q8: Which of these is a non-semantic tag?

A. <div>
B. <article>
C. <section>
D. <footer>

Q9: Which tag is used to highlight text?

A. <highlight>
B. <mark>
C. <bold>
D. <span>

Q10: Which tag is used to display a timestamp or date?

A. <date>
B. <time>
C. <samp>
D. <var>
← Previous Next →
Login
Go Back Top