📘 Lesson  ·  Lesson 25

Semantic Tags: header, nav, footer

Semantic Tags: header, nav, footer

Why Semantic Tags Exist

OLD WAY (div soup - nobody knows what anything IS):
<div id="header">...</div>
<div id="nav">...</div>
<div class="content">...</div>
<div id="footer">...</div>

HTML5 WAY (the tag NAMES the meaning):
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
Semantic = meaningful. A <div> is a blank box — it says nothing about what's inside. A <nav> announces "these are navigation links"; a <footer> says "this is the page footer". Same visual result, but now Google, screen readers and other developers instantly understand your page's structure. It is the difference between labelled boxes and identical brown cartons in a warehouse.

The Semantic Tags — the whole family

TagMeans
<header>Top area — logo, site title, often the nav (can also head a section/article)
<nav>The main navigation links block
<main>The ONE main content area — one per page
<section>A thematic grouping of content (with its own heading)
<article>Self-contained content that makes sense alone (a blog post, a product card)
<aside>Side content — related links, ads, author box
<footer>Bottom area — copyright, contact, footer links
<figure>/<figcaption>An image/diagram with its caption (met earlier)

section vs article — the question everyone gets wrong

<article>   ← Would this make sense ALONE, lifted out of the page?
              A blog post, a news item, a product card, a single comment.
              Test: could it be republished/syndicated on its own? → article

<section>   ← A thematic CHUNK of a larger page, usually with a heading.
              "Our Services", "Testimonials", "Contact" areas.
              Test: is it just a labelled part of THIS page? → section
The clean rule: article = independent and reusable (an RSS reader could show it alone); section = a themed part of a whole. A blog homepage often has one <section> of latest posts containing many <article> cards — they nest naturally. When neither meaning fits, a plain <div> is still the correct choice; don't force semantics where there's no meaning.

A Full Page Layout — everything in place

<body>
  <header>
      <h1>Alpine Public School</h1>
      <nav>
          <a href="/">Home</a>
          <a href="/admission/">Admission</a>
          <a href="/contact/">Contact</a>
      </nav>
  </header>

  <main>
      <section>
          <h2>Latest News</h2>
          <article>
              <h3>Annual Day 2026</h3>
              <p>Our annual day was celebrated...</p>
          </article>
          <article>
              <h3>Admissions Open</h3>
              <p>Admissions for 2026-27...</p>
          </article>
      </section>

      <aside>
          <h2>Quick Links</h2>
          <a href="/fees/">Fee Structure</a>
      </aside>
  </main>

  <footer>
      <p>&copy; 2026 Alpine Public School, Khurja</p>
  </footer>
</body>
┌─ header: logo + nav ──────────────┐ ├─ main ────────────────────────────┤ │ section: news → article, article │ │ aside: quick links │ ├─ footer: copyright ───────────────┤ └───────────────────────────────────┘

Read the structure top-to-bottom — it reads like an outline of the page in plain English. That readability IS the point of semantic HTML.

SEO and Accessibility Payoff

  • SEO: Google understands page structure better — it knows your <nav> is navigation and your <article> is the real content, helping it rank the right text.
  • Accessibility: screen readers offer "jump to main content", "list all navigation" — powered entirely by these tags. div soup gives blind users no landmarks.
  • Maintainability: six months later, <footer> is instantly findable; <div class="f2"> is a guessing game.
  • Same CSS effort: you style <header> exactly like you'd style <div id="header"> — zero extra cost for all these gains.

Exam Corner

Q: What are semantic tags? Tags that describe the meaning/role of their content (header, nav, article) rather than just being generic containers (div, span).

Q: Difference between section and article? article = self-contained, independently reusable content; section = a thematic part of a page.

Q: How many main tags per page? One.

Q: Give 2 benefits of semantic HTML. Better SEO and better accessibility (also maintainability).

Q: Is div still valid in HTML5? Yes — use it when no semantic tag fits the meaning.

Semantic Tags क्यों हैं

PURANA TAREEKA (div soup - kisi ko nahi pata kya KYA hai):
<div id="header">...</div>
<div id="nav">...</div>
<div class="content">...</div>
<div id="footer">...</div>

HTML5 TAREEKA (tag ka NAAM hi matlab batata hai):
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
Semantic = अर्थपूर्ण. <div> खाली डिब्बा है — अंदर क्या है कुछ नहीं बताता. <nav> ऐलान करता है "ये navigation links हैं"; <footer> कहता है "यह page का footer है". दिखने में वही नतीजा, पर अब Google, screen readers और दूसरे developers आपके page की structure तुरंत समझते हैं. यह गोदाम में एक जैसे भूरे cartons और label लगे डिब्बों का फर्क है.

Semantic Tags — पूरा परिवार

Tagमतलब
<header>ऊपरी हिस्सा — logo, site title, अक्सर nav (section/article का भी head हो सकता है)
<nav>मुख्य navigation links का block
<main>EK मुख्य content area — page में एक
<section>Content की thematic grouping (अपनी heading के साथ)
<article>अपने आप में पूरा content जो अकेले समझ आए (blog post, product card)
<aside>किनारे का content — related links, ads, author box
<footer>निचला हिस्सा — copyright, contact, footer links
<figure>/<figcaption>Image/diagram उसके caption के साथ (पहले मिल चुका)

section vs article — वह सवाल जो सब गलत करते हैं

<article>   ← Kya yeh AKELE, page se nikaalkar bhi samajh aayega?
              Blog post, news item, product card, ek single comment.
              Test: kya ise akele republish/syndicate kiya ja sakta hai? → article

<section>   ← Bade page ka ek thematic HISSA, aksar heading ke saath.
              "Our Services", "Testimonials", "Contact" areas.
              Test: kya yeh sirf IS page ka ek labelled part hai? → section
साफ rule: article = स्वतंत्र और reusable (RSS reader इसे अकेले दिखा सके); section = पूरे का themed हिस्सा. Blog homepage पर अक्सर latest posts का एक <section> होता है जिसमें कई <article> cards — ये स्वाभाविक रूप से nest होते हैं. जब कोई भी meaning fit न हो, सादा <div> ही सही choice है; बिना अर्थ के semantics मत थोपिए.

पूरा Page Layout — सब अपनी जगह

<body>
  <header>
      <h1>Alpine Public School</h1>
      <nav>
          <a href="/">Home</a>
          <a href="/admission/">Admission</a>
          <a href="/contact/">Contact</a>
      </nav>
  </header>

  <main>
      <section>
          <h2>Latest News</h2>
          <article>
              <h3>Annual Day 2026</h3>
              <p>Our annual day was celebrated...</p>
          </article>
          <article>
              <h3>Admissions Open</h3>
              <p>Admissions for 2026-27...</p>
          </article>
      </section>

      <aside>
          <h2>Quick Links</h2>
          <a href="/fees/">Fee Structure</a>
      </aside>
  </main>

  <footer>
      <p>&copy; 2026 Alpine Public School, Khurja</p>
  </footer>
</body>
┌─ header: logo + nav ──────────────┐ ├─ main ────────────────────────────┤ │ section: news → article, article │ │ aside: quick links │ ├─ footer: copyright ───────────────┤ └───────────────────────────────────┘

Structure ऊपर से नीचे पढ़िए — यह सादे English में page के outline जैसा पढ़ता है. वही readability semantic HTML का मकसद है.

SEO और Accessibility फायदा

  • SEO: Google page structure बेहतर समझता है — जानता है आपका <nav> navigation है और <article> असली content, सही text rank करने में मदद.
  • Accessibility: screen readers "jump to main content", "list all navigation" देते हैं — पूरी तरह इन्हीं tags से चलता है. div soup blind users को कोई landmark नहीं देता.
  • Maintainability: छह महीने बाद <footer> तुरंत मिल जाता है; <div class="f2"> अंदाज़े का खेल है.
  • CSS की मेहनत वही: <header> को बिल्कुल वैसे style करते हैं जैसे <div id="header"> — इन सब फायदों के लिए शून्य extra खर्च.

Exam Corner

Q: Semantic tags क्या हैं? वे tags जो अपने content का अर्थ/भूमिका बताते हैं (header, nav, article) बजाय सिर्फ generic container होने के (div, span).

Q: section और article में अंतर? article = अपने आप में पूरा, स्वतंत्र रूप से reusable content; section = page का thematic हिस्सा.

Q: Page में कितने main tags? एक.

Q: Semantic HTML के 2 फायदे बताइए. बेहतर SEO और बेहतर accessibility (और maintainability).

Q: क्या HTML5 में div अब भी valid है? हां — जब कोई semantic tag अर्थ में fit न हो तब use कीजिए.
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.