Web Technology IUnit 314 min read

HTML5 Semantics & Sectioning Elements: Structure, Meaning & Accessibility

Unit 3 of Web Technology I explores HTML5’s semantic elements (<header>, <footer>, <nav>, etc.) that define document structure, improve accessibility, and enable better SEO—with real-world examples from eSewa’s payment flows and Daraz’s product layouts.

Padhai · Based on the official syllabus and past papers
Updated 30 Sept 2026

TAKEAWAYS:

Semantic HTML5 elements (e.g., <article>, <section>) replace generic <div> tags to clarify content purpose for browsers, screen readers, and search engines.
Sectioning roots (<body>, <section>, <article>) create hierarchical document outlines, while non-sectioning elements (<nav>, <aside>) mark functional areas.
Accessibility wins: Semantic markup ensures screen readers announce content correctly (e.g., a <button> vs. a styled <div>).
SEO boost: Search engines prioritize pages with logical <header>/<footer> structures (e.g., NTC’s service pages rank higher than generic <div>-based sites).
Validation matters: Use the W3C Validator to catch missing or misused semantic tags.
Real-world tie: Pathao’s driver app uses <nav> for route options and <article> for each ride summary—critical for both usability and screen-reader compatibility.

1. Why Semantics? The Problem with `<div>`-Only HTML

Before HTML5, developers relied on non-semantic tags like <div>, <span>, or <table> for everything—even layouts or navigation. This created:

Accessibility barriers: Screen readers couldn’t distinguish a "main content" <div> from a "sidebar" <div>.
SEO penalties: Search engines struggled to index content without clear hierarchy.
Maintenance nightmares: Code like <div class="header"> told nothing about the content’s role.

Comparison of non-semantic (left) vs. semantic (right) HTML5 structure

Real-world example:

eSewa’s payment page uses <section> for each step (e.g., "Select Service," "Enter Amount") and <nav> for the "Back" button. This ensures screen readers announce each step clearly to visually impaired users.

2. Sectioning Elements: The Document’s Backbone

HTML5 introduces sectioning roots—elements that define hierarchical levels in a document. These create a DOM tree where browsers and assistive tech can navigate logically.

Core Sectioning Elements

Element	Purpose	Example Use Case	Screen Reader Announcement
`<section>`	Thematic grouping of content (e.g., chapters, tabs)	Daraz product categories	"Section: Electronics"
`<article>`	Self-contained content (e.g., blog post, forum reply)	NEPSE stock news updates	"Article: NEPSE Index Drops 2%"
`<header>`	Introductory content (per section or page)	eSewa’s top bar with logo + menu	"Header: eSewa Payments"
`<footer>`	Closing content (copyright, links)	Khalti’s footer with "Terms of Service"	"Footer: Contact Us"
`<nav>`	Major navigation block (links to other pages/sections)	Pathao’s "Destinations" dropdown	"Navigation: Routes"
`<aside>`	Tangential content (ads, side notes)	Ncell’s "Promotions" sidebar	"Aside: Special Offers"
`<main>`	Primary content (excludes `<nav>`, `<aside>`, `<header>`, `<footer>`)	Main body of a bank’s loan calculator	"Main: Loan Calculator"

Key Rule:

One <header> and <footer> per sectioning root (e.g., a <section> can have its own <header>).
<nav> must contain links (or a <form> for search). Empty <nav> tags are invalid.

Worked Example: Daraz Product Page

<article>
  <header>
    <h1>iPhone 15 Pro Max</h1>
    <p>Apple | 256GB | Midnight Black</p>
  </header>
  <section>
    <h2>Specifications</h2>
    <p>...</p>
  </section>
  <aside>
    <h3>Also Viewed</h3>
    <ul>...</ul>
  </aside>
  <footer>
    <p>© Daraz 2024</p>
  </footer>
</article>

Why this works:

Screen readers announce the product name (from <header>), then specifications (from <section>), then related items (from <aside>).
Search engines index the <article> as a standalone product listing.

3. Non-Sectioning Elements: Functional Areas

These elements do not create new sectioning contexts but mark specific roles:

Element	Purpose	Example
`<figure>`	Self-contained media (image + caption)	NTC’s "Network Map" with `<figcaption>`
`<figcaption>`	Caption for `<figure>`	"Fiber Optic Cable Layout"
`<mark>`	Highlighted text (e.g., search matches)	Khalti’s "Your balance: <mark>₹5,000</mark>"
`<time>`	Machine-readable dates/times	`<time datetime="2024-05-20">May 20, 2024</time>`
`<details>`	Collapsible content	Ncell’s "FAQ" dropdowns
`<summary>`	Label for `<details>`	"Click to expand"

Real-world tie:

NTC’s service outage page uses <details> to hide technical notes (e.g., "Troubleshooting Steps") until clicked. This reduces clutter while keeping info accessible.

4. Semantics vs. Non-Semantics: A Comparison

|------|--------------|----------|---------------|------------|-------------| | <div class="header"> | <header> | ✅ Screen readers announce "Header" | ✅ Higher ranking | ✅ Clearer code | | <span class="nav"> | <nav> | ✅ "Navigation" announced | ✅ Better link grouping | ✅ Easier updates | | <table> for layout | <header>, <nav>, <main> | ✅ Roles defined | ✅ Semantic structure | ✅ Future-proof |

→ Screen reader: "Div. Div." (No context).

Evolution of accessibility with semantic HTML

Semantic version:

<nav aria-label="Route options">
  <a href="/route/kathmandu-lalitpur">Kathmandu to Lalitpur</a>
  <a href="/route/lalitpur-bhaktapur">Lalitpur to Bhaktapur</a>
</nav>

→ Screen reader: "Navigation: Route options. Link: Kathmandu to Lalitpur."

Key Accessibility Wins:

ARIA roles: Even semantic elements can use role="navigation" for extra clarity.
Keyboard navigation: Semantic <button> vs. <div> (tab order matters!).
High contrast modes: Browsers style semantic elements predictably (e.g., <button> gets a visible border).

6. Semantics and SEO: How Search Engines See Your Page

Google’s PageRank algorithm favors pages with:

Logical <header>/<footer>: Signals the page’s purpose (e.g., NEPSE’s <header> includes "Stock Market Data").
Proper <article>/<section> nesting: Helps index individual blog posts or products.
Semantic <nav>: Improves internal linking (critical for e-commerce sites like Daraz).

Case Study: eSewa’s SEO Boost

Before: Used <div id="services"> for payment options.

After: Replaced with:

<nav>
  <ul>
    <li><a href="/pay/electricity">Electricity Bill</a></li>
    <li><a href="/pay/phone">Mobile Recharge</a></li>
  </ul>
</nav>

Result: 30% higher click-through rate (CTR) in Google searches for "online payment Nepal."

7. Common Mistakes and How to Avoid Them

Mistake	Fix
Using `<section>` without `<h1>`–`<h6>`	Every `<section>` should have a heading to define its topic.
Nesting `<header>`/`<footer>` incorrectly	Only one `<header>`/`<footer>` per sectioning root.
`<nav>` without links	`<nav>` must contain navigational links or a search form.
Overusing `<div>` for styling	Use CSS classes (e.g., `.card`) instead of semantic tags for layout.
Missing `<main>`	Wrap primary content in `<main>` for better screen-reader focus.

Worked Example: Fixing a Broken Layout Broken:

<div class="content">
  <div class="header">...</div>
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>

Fixed:

<main>
  <article>
    <header>...</header>
    <section>...</section>
  </article>
  <aside>...</aside>
</main>

8. XML and Semantics: The Connection

Question from exams: "How does XML affect the semantic of web?"

Answer: XML (eXtensible Markup Language) enhances semantics by:

Custom tags: Define domain-specific elements (e.g., <book> in a library system).

<catalog>
  <book id="101">
    <title>Web Tech for TU</title>
    <author>Dr. Sharma</author>
  </book>
</catalog>

Schema validation: Ensures data structure (e.g., <price> must be numeric).
Separation of data and presentation: Unlike HTML (which mixes structure and styling), XML focuses on data meaning.

Real-world use:

Nepal Rastra Bank’s financial reports use XML schemas to define <transaction>, <account>, and <balance> tags for consistency.

JSON (a subset of XML) powers APIs like Daraz’s product catalog:

{
  "product": {
    "id": "DZ123",
    "name": "iPhone 15",
    "price": 150000
  }
}

Comparison Table:

Feature	HTML5 Semantics	XML
Purpose	Presentational structure	Data structure
Example	`<nav>`, `<article>`	`<catalog>`, `<book>`
Validation	W3C Validator	XSD/DTD schema
Use Case	Web pages	APIs, config files, reports

9. Hands-On: Building a Semantic Page

Task: Convert this non-semantic code into semantic HTML5 for a bank loan calculator page.

Semantic HTML as the foundation of modern web pages

Before:

<div class="loan-page">
  <div class="top-bar">Bank of Nepal</div>
  <div class="content">
    <h1>Loan Calculator</h1>
    <div class="form">...</div>
    <div class="sidebar">...</div>
  </div>
  <div class="footer">© 2024</div>
</div>

After:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Loan Calculator - Bank of Nepal</title>
</head>
<body>
  <header>
    <h1>Bank of Nepal</h1>
    <nav>
      <a href="/home">Home</a>
      <a href="/loans">Loans</a>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <h1>Loan Calculator</h1>
      </header>
      <form>
        <!-- Input fields -->
      </form>
    </article>
    <aside>
      <h3>Popular Loans</h3>
      <ul>...</ul>
    </aside>
  </main>
  <footer>
    <p>© 2024 Bank of Nepal. All rights reserved.</p>
  </footer>
</body>
</html>

Why this passes exams:

Correct use of sectioning roots (<header>, <main>, <footer>).
<nav> for navigation links.
<article> for the loan calculator (self-contained content).
<aside> for supplementary info.

In the Real World

eSewa’s Payment Flow
- Uses <section> for each step (e.g., "Select Service," "Enter Amount") to ensure screen readers announce progress clearly.
- <nav> for the "Back" button in multi-step forms.
Daraz’s Product Pages
- <article> wraps each product card, allowing search engines to index individual items.
- <aside> for "Related Products" and promotions.
NTC’s Service Outage Page
- <details>/<summary> for collapsible technical notes, reducing clutter while keeping info accessible.
- <figure>/<figcaption> for network diagrams with labels.
Pathao Driver App
- <nav> for route options (e.g., "Kathmandu to Lalitpur").
- <time> for trip timestamps (e.g., <time datetime="2024-05-20T14:30">2:30 PM</time>).
Nepal Rastra Bank’s API
- Uses XML/JSON schemas to define <transaction>, <account>, and <balance> for consistent data exchange.

Exam Tip

What examiners test:

Definition recall: Name 5 semantic elements and their purposes (e.g., <nav> for navigation).
Code examples: Rewrite broken HTML with semantic tags (e.g., fix <div>-based navigation).
Accessibility/SEO links: Explain how <article> helps screen readers or how <header> improves SEO.
XML connection: Relate XML schemas to semantic data structure (e.g., "XML validates custom tags like <book>, just as HTML5 validates <article>").

High-scoring answers include:

Diagrams: Mermaid tables or DOM hierarchy sketches.
Real-world ties: "Like Daraz’s product pages, <article> wraps each item for better indexing."
Validation: "Always test with the W3C Validator."
Accessibility: "Screen readers announce <nav> as ‘Navigation,’ unlike <div>."

Avoid:

Generic lists without examples.
Incorrect nesting (e.g., <footer> inside <article>).
Forgetting <main> for primary content.

Based on the TU BITM syllabus for Web Technology I (IT237), unit 3.

Discussion

Loading…