Phase 03 · Semantic Architecture & SEOChapter 13 of 18

Phase 03Read time ~17 minDifficulty beginner

HTML Page Architecture

In the previous chapter, we learned semantic HTML elements such as:

In this chapter (59 sections)

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Now we'll combine them into a complete professional webpage architecture.

The goal of this chapter is to answer:

How should I structure an entire HTML page from top to bottom?

1. What Is HTML Page Architecture?#

HTML page architecture is the way we organize the complete structure of a webpage.

Think of a webpage like a building.

Building
│
├── Foundation
├── Entrance
├── Rooms
├── Hallways
└── Exit

HTML provides a similar structure:

Webpage
│
├── <html>
│
├── <head>
│
└── <body>
    │
    ├── <header>
    ├── <nav>
    ├── <main>
    └── <footer>

Inside <main> we can have:

main
│
├── section
│   ├── article
│   └── article
│
├── section
│
└── aside

2. The Three Major Parts#

Every normal HTML document has three major structural layers:

<html>
 
    <head>
        ...
    </head>
 
    <body>
        ...
    </body>
 
</html>

Think:

<html>
   │
   ├── <head>
   │     → information about the document
   │
   └── <body>
         → visible document content

3. `<html>`#

The <html> element is the root element of the document.

Example:

<!DOCTYPE html>
 
<html lang="en">
 
    <head>
        ...
    </head>
 
    <body>
        ...
    </body>
 
</html>

The:

lang="en"

attribute tells user agents the primary language of the document.

For Hindi:

<html lang="hi">

For French:

<html lang="fr">

For English:

<html lang="en">

This is important for:

Accessibility
Screen readers
Search engines
Text processing

4. `<head>`#

The <head> contains metadata and resources associated with the document.

It doesn't normally contain the page's main visible content.

Typical contents include:

<head>
 
    <meta charset="UTF-8">
 
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
 
    <title>My Website</title>
 
    <meta
        name="description"
        content="Learn modern web development."
    >
 
    <link rel="stylesheet" href="/styles.css">
 
</head>

We'll study <head> in much greater depth in Chapter 14.

5. `<body>`#

<body> contains the document's actual content.

Example:

<body>
 
    <header>
        ...
    </header>
 
    <nav>
        ...
    </nav>
 
    <main>
        ...
    </main>
 
    <footer>
        ...
    </footer>
 
</body>

The browser renders the content inside the body as the page.

6. Professional Page Skeleton#

A strong starting point is:

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
 
    <title>My Website</title>
 
</head>
 
<body>
 
    <header>
        ...
    </header>
 
    <nav aria-label="Main navigation">
        ...
    </nav>
 
    <main>
        ...
    </main>
 
    <footer>
        ...
    </footer>
 
</body>
 
</html>

This should become second nature.

7. Think in Layers#

A professional webpage can be understood as:

                    HTML DOCUMENT
                         │
              ┌──────────┴──────────┐
              │                     │
             HEAD                  BODY
              │                     │
       Metadata/resources     Page structure
                                    │
              ┌─────────────────────┼─────────────────┐
              │                     │                 │
           HEADER                  MAIN             FOOTER
              │                     │
             NAV              ┌─────┼─────┐
                              │     │     │
                           SECTION ARTICLE ASIDE

8. Header Architecture#

A website header often contains:

┌──────────────────────────────────────────────┐
│ LOGO              Navigation         Search │
└──────────────────────────────────────────────┘

HTML:

<header>
 
    <a href="/" aria-label="NextGen Blog home">
        NextGen Blog
    </a>
 
    <nav aria-label="Main navigation">
 
        <ul>
 
            <li>
                <a href="/">Home</a>
            </li>
 
            <li>
                <a href="/ai">AI</a>
            </li>
 
            <li>
                <a href="/programming">
                    Programming
                </a>
            </li>
 
            <li>
                <a href="/about">About</a>
            </li>
 
        </ul>
 
    </nav>
 
</header>

9. Logo Architecture#

A logo that links to the homepage is commonly:

<a href="/">
    <img
        src="/logo.svg"
        alt="NextGen Blog"
    >
</a>

If the logo image is the only content of the link, its alt can serve as the accessible name.

Another option:

<a href="/" aria-label="NextGen Blog home">
    <img
        src="/logo.svg"
        alt=""
    >
</a>

The right choice depends on the surrounding accessible naming and whether the visible logo itself needs to provide the link's accessible name.

A professional navigation structure:

<nav aria-label="Main navigation">
 
    <ul>
 
        <li>
            <a href="/">Home</a>
        </li>
 
        <li>
            <a href="/articles">Articles</a>
        </li>
 
        <li>
            <a href="/tutorials">Tutorials</a>
        </li>
 
        <li>
            <a href="/about">About</a>
        </li>
 
    </ul>
 
</nav>

Why use:

aria-label="Main navigation"

when useful?

If there are multiple navigation landmarks, labels help distinguish their purposes.

11. Main Content Architecture#

The <main> should contain the page's primary content.

Example:

<main>
 
    <h1>HTML Tutorial</h1>
 
    <section>
 
        <h2>Introduction</h2>
 
        <p>
            HTML defines the structure of webpages.
        </p>
 
    </section>
 
    <section>
 
        <h2>HTML Elements</h2>
 
        <p>
            HTML uses elements to structure content.
        </p>
 
    </section>
 
</main>

12. The `<h1>` Is Important#

A page normally has a primary heading that describes its main topic.

For example:

<h1>Complete HTML Tutorial</h1>

Then:

<h2>HTML Fundamentals</h2>

Then:

<h3>HTML Elements</h3>

Think:

h1
│
├── h2
│   ├── h3
│   └── h3
│
└── h2
    └── h3

13. Don't Choose Headings Based on Size#

A common beginner mistake:

"I want smaller text, so I'll use <h4>."

Don't do that.

Heading level represents document hierarchy, not visual size.

Bad:

<h1>My Website</h1>
 
<h4>About Us</h4>

if there isn't an appropriate reason for that hierarchy.

Instead:

<h1>My Website</h1>
 
<h2>About Us</h2>

Then use CSS to control appearance.

14. Heading Hierarchy#

Imagine:

Complete HTML Course
│
├── HTML Fundamentals
│   ├── Elements
│   ├── Attributes
│   └── Nesting
│
├── Forms
│   ├── Inputs
│   ├── Validation
│   └── Advanced Controls
│
└── Semantic HTML
    ├── Header
    ├── Navigation
    └── Main Content

HTML:

<h1>Complete HTML Course</h1>
 
<h2>HTML Fundamentals</h2>
 
<h3>Elements</h3>
<h3>Attributes</h3>
<h3>Nesting</h3>
 
<h2>Forms</h2>
 
<h3>Inputs</h3>
<h3>Validation</h3>
<h3>Advanced Controls</h3>
 
<h2>Semantic HTML</h2>
 
<h3>Header</h3>
<h3>Navigation</h3>
<h3>Main Content</h3>

15. Important Nuance About Heading Levels#

Don't think of headings as a rigid rule that the browser will reject if you skip a level.

The important principle is:

Use headings to represent a logical hierarchy.

For example:

<h1>HTML Tutorial</h1>
 
<h2>Forms</h2>
 
<h3>Validation</h3>

makes a clear relationship.

Avoid randomly selecting heading levels purely for styling.

16. Sections and Heading Structure#

Consider:

<main>
 
    <h1>Our Products</h1>
 
    <section>
 
        <h2>Smart Watches</h2>
 
        ...
 
    </section>
 
    <section>
 
        <h2>Smartphones</h2>
 
        ...
 
    </section>
 
</main>

The structure is:

h1 Our Products
│
├── h2 Smart Watches
└── h2 Smartphones

Very easy to understand.

17. Article Architecture#

A professional article might look like:

<article>
 
    <header>
 
        <h1>
            Understanding Retrieval-Augmented Generation
        </h1>
 
        <p>
            Published:
            <time datetime="2026-10-01">
                October 1, 2026
            </time>
        </p>
 
    </header>
 
    <section>
 
        <h2>Introduction</h2>
 
        <p>
            RAG combines retrieval with generation.
        </p>
 
    </section>
 
    <section>
 
        <h2>How RAG Works</h2>
 
        <p>
            Documents are retrieved and supplied
            to a language model as context.
        </p>
 
    </section>
 
    <section>
 
        <h2>Benefits</h2>
 
        <p>
            RAG can provide access to external
            knowledge at query time.
        </p>
 
    </section>
 
    <footer>
 
        <p>
            Author: Anubhav Chaudhary
        </p>
 
    </footer>
 
</article>

This is a very strong structure for an article.

Suppose the page contains related content:

<aside>
 
    <h2>Related Articles</h2>
 
    <ul>
 
        <li>
            <a href="/html">
                HTML Fundamentals
            </a>
        </li>
 
        <li>
            <a href="/css">
                CSS Fundamentals
            </a>
        </li>
 
        <li>
            <a href="/javascript">
                JavaScript Fundamentals
            </a>
        </li>
 
    </ul>
 
</aside>

The browser doesn't care whether CSS visually puts it on the left or right.

Its semantic meaning is:

supporting/related content.

19. Two-Column Page Architecture#

A common blog layout:

┌───────────────────────────────────────────────┐
│                    HEADER                     │
├───────────────────────────────────────────────┤
│                    NAV                        │
├─────────────────────────────┬─────────────────┤
│                             │                 │
│            MAIN             │      ASIDE      │
│                             │                 │
│       Article / Content     │ Related Posts   │
│                             │ Categories      │
│                             │                 │
├─────────────────────────────┴─────────────────┤
│                    FOOTER                     │
└───────────────────────────────────────────────┘

HTML:

<body>
 
    <header>
        ...
    </header>
 
    <nav aria-label="Main navigation">
        ...
    </nav>
 
    <main>
 
        <article>
            ...
        </article>
 
        <aside>
            ...
        </aside>
 
    </main>
 
    <footer>
        ...
    </footer>
 
</body>

CSS determines whether those elements appear side-by-side.

20. Breadcrumbs#

Breadcrumbs show the user's position within a website hierarchy.

Example:

Home > Tutorials > HTML > Semantic HTML

A semantic implementation:

<nav aria-label="Breadcrumb">
 
    <ol>
 
        <li>
            <a href="/">Home</a>
        </li>
 
        <li>
            <a href="/tutorials">
                Tutorials
            </a>
        </li>
 
        <li>
            <a href="/tutorials/html">
                HTML
            </a>
        </li>
 
        <li aria-current="page">
            Semantic HTML
        </li>
 
    </ol>
 
</nav>

This is much better than using random <div> elements.

21. Why `<ol>` for Breadcrumbs?#

Breadcrumbs represent an ordered path:

Home
 ↓
Tutorials
 ↓
HTML
 ↓
Semantic HTML

Therefore:

<ol>

is semantically appropriate.

22. `aria-current="page"`#

The current breadcrumb can be marked:

<li aria-current="page">
    Semantic HTML
</li>

This communicates:

This is the current page.

Similarly, navigation can use:

<a
    href="/html"
    aria-current="page"
>
    HTML
</a>

when the current page is represented by that link.

23. Skip Links#

Skip links are an accessibility technique that allows keyboard users to bypass repeated navigation and jump directly to the main content.

Example:

<a href="#main-content">
    Skip to main content
</a>
 
<header>
    ...
</header>
 
<nav>
    ...
</nav>
 
<main id="main-content">
    ...
</main>

Conceptually:

Keyboard user
      │
      ▼
Skip link
      │
      ▼
Main content

This is especially useful on sites with large navigation areas.

24. Table of Contents#

A table of contents can be represented semantically:

<nav aria-label="Table of contents">
 
    <ol>
 
        <li>
            <a href="#introduction">
                Introduction
            </a>
        </li>
 
        <li>
            <a href="#architecture">
                Architecture
            </a>
        </li>
 
        <li>
            <a href="#benefits">
                Benefits
            </a>
        </li>
 
    </ol>
 
</nav>

Then:

<section id="introduction">
 
    <h2>Introduction</h2>
 
    ...
 
</section>
 
<section id="architecture">
 
    <h2>Architecture</h2>
 
    ...
 
</section>

The links connect through fragment identifiers.

25. Search Architecture#

A site search area can use:

<form action="/search" method="get">
 
    <label for="search">
        Search
    </label>
 
    <input
        type="search"
        id="search"
        name="q"
    >
 
    <button type="submit">
        Search
    </button>
 
</form>

You can place this inside:

<header>

or another appropriate region.

A search form:

<form>

isn't automatically:

<nav>

You should structure the page based on the meaning of the content.

For example:

<header>
 
    <a href="/">Logo</a>
 
    <nav>
        Main navigation
    </nav>
 
    <form>
        Search
    </form>
 
</header>

Each part has a different role.

A professional site may have:

Main Navigation
Footer Navigation
Breadcrumb Navigation
Table of Contents
Pagination Navigation

Example:

<nav aria-label="Main navigation">
    ...
</nav>
 
<nav aria-label="Breadcrumb">
    ...
</nav>
 
<nav aria-label="Table of contents">
    ...
</nav>
 
<nav aria-label="Pagination">
    ...
</nav>
 
<nav aria-label="Footer navigation">
    ...
</nav>

The labels help distinguish the navigation landmarks.

28. Pagination Architecture#

Suppose you're on page 3 of a blog:

← Previous     1 2 3 4 5     Next →

Semantic HTML:

<nav aria-label="Pagination">
 
    <a href="/blog?page=2">
        Previous
    </a>
 
    <a href="/blog?page=1">
        1
    </a>
 
    <a href="/blog?page=2">
        2
    </a>
 
    <a
        href="/blog?page=3"
        aria-current="page"
    >
        3
    </a>
 
    <a href="/blog?page=4">
        4
    </a>
 
    <a href="/blog?page=4">
        Next
    </a>
 
</nav>

The current page is explicitly identified.

29. E-Commerce Architecture#

A product page might look like:

BODY
│
├── HEADER
│   ├── Logo
│   ├── NAV
│   └── Search
│
├── MAIN
│   │
│   ├── Breadcrumb
│   │
│   ├── SECTION
│   │   ├── Product Image
│   │   └── Product Information
│   │
│   ├── SECTION
│   │   └── Product Description
│   │
│   ├── SECTION
│   │   └── Specifications
│   │
│   └── SECTION
│       └── Reviews
│
└── FOOTER

Possible HTML:

<main>
 
    <nav aria-label="Breadcrumb">
        ...
    </nav>
 
    <article>
 
        <header>
            <h1>Wireless Headphones</h1>
        </header>
 
        <figure>
 
            <img
                src="/headphones.webp"
                alt="Black wireless headphones"
            >
 
            <figcaption>
                Wireless headphones
            </figcaption>
 
        </figure>
 
        <section>
 
            <h2>Product Description</h2>
 
            <p>
                High-quality wireless headphones...
            </p>
 
        </section>
 
        <section>
 
            <h2>Specifications</h2>
 
            ...
 
        </section>
 
        <section>
 
            <h2>Customer Reviews</h2>
 
            ...
 
        </section>
 
    </article>
 
</main>

30. Blog Architecture#

A blog homepage:

BODY
│
├── HEADER
│
├── NAV
│
├── MAIN
│   │
│   ├── SECTION
│   │   └── Featured Article
│   │
│   ├── SECTION
│   │   └── Latest Articles
│   │       ├── ARTICLE
│   │       ├── ARTICLE
│   │       └── ARTICLE
│   │
│   └── ASIDE
│       ├── Categories
│       └── Popular Posts
│
└── FOOTER

This is a very common architecture.

31. Dashboard Architecture#

An admin dashboard can be structured as:

BODY
│
├── HEADER
│   ├── Logo
│   └── User Controls
│
├── NAV
│   ├── Dashboard
│   ├── Users
│   ├── Reports
│   └── Settings
│
├── MAIN
│   │
│   ├── HEADER
│   │   └── Dashboard
│   │
│   ├── SECTION
│   │   └── KPI Cards
│   │
│   ├── SECTION
│   │   └── Sales Chart
│   │
│   └── SECTION
│       └── Recent Orders
│
└── FOOTER

Important:

Don't use semantic elements merely because they sound professional.

Choose them according to the actual content and relationships.

32. A Very Important Rule: Don't Over-Semanticize#

Suppose you have:

<div class="card">
    <span>₹10,000</span>
</div>

There may be no reason to replace every <div> with:

<section>

or:

<article>

Ask:

Does this content have a meaningful semantic role?

If not:

<div>

is perfectly appropriate.

33. Page Architecture Example — Complete#

Here's a professional blog article architecture:

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
 
    <title>
        Understanding AI Agents
    </title>
 
    <meta
        name="description"
        content="Learn how AI agents work."
    >
 
</head>
 
<body>
 
    <!-- Skip Link -->
 
    <a href="#main-content">
        Skip to main content
    </a>
 
    <!-- Site Header -->
 
    <header>
 
        <a href="/">
            NextGen Blog
        </a>
 
        <nav aria-label="Main navigation">
 
            <ul>
 
                <li>
                    <a href="/">Home</a>
                </li>
 
                <li>
                    <a href="/ai">AI</a>
                </li>
 
                <li>
                    <a href="/programming">
                        Programming
                    </a>
                </li>
 
            </ul>
 
        </nav>
 
        <!-- Search -->
 
        <form action="/search" method="get">
 
            <label for="search">
                Search
            </label>
 
            <input
                type="search"
                id="search"
                name="q"
            >
 
            <button type="submit">
                Search
            </button>
 
        </form>
 
    </header>
 
    <!-- Breadcrumb -->
 
    <nav aria-label="Breadcrumb">
 
        <ol>
 
            <li>
                <a href="/">Home</a>
            </li>
 
            <li>
                <a href="/ai">AI</a>
            </li>
 
            <li aria-current="page">
                AI Agents
            </li>
 
        </ol>
 
    </nav>
 
    <!-- Main Content -->
 
    <main id="main-content">
 
        <article>
 
            <header>
 
                <h1>
                    Understanding AI Agents
                </h1>
 
                <p>
 
                    Published:
 
                    <time datetime="2026-10-01">
                        October 1, 2026
                    </time>
 
                </p>
 
                <address>
                    By Anubhav Chaudhary
                </address>
 
            </header>
 
            <!-- Table of Contents -->
 
            <nav aria-label="Table of contents">
 
                <ol>
 
                    <li>
                        <a href="#introduction">
                            Introduction
                        </a>
                    </li>
 
                    <li>
                        <a href="#how-it-works">
                            How It Works
                        </a>
                    </li>
 
                    <li>
                        <a href="#benefits">
                            Benefits
                        </a>
                    </li>
 
                </ol>
 
            </nav>
 
            <section id="introduction">
 
                <h2>
                    Introduction
                </h2>
 
                <p>
                    AI agents are systems that can
                    perform tasks using tools and
                    reasoning.
                </p>
 
            </section>
 
            <section id="how-it-works">
 
                <h2>
                    How It Works
                </h2>
 
                <p>
                    An agent can receive a goal,
                    reason about it, use tools,
                    and produce an outcome.
                </p>
 
            </section>
 
            <section id="benefits">
 
                <h2>
                    Benefits
                </h2>
 
                <p>
                    Agents can automate multi-step
                    workflows.
                </p>
 
            </section>
 
            <footer>
 
                <p>
                    Categories:
                    Artificial Intelligence
                </p>
 
            </footer>
 
        </article>
 
        <!-- Related Content -->
 
        <aside>
 
            <h2>
                Related Articles
            </h2>
 
            <ul>
 
                <li>
                    <a href="/rag">
                        Understanding RAG
                    </a>
                </li>
 
                <li>
                    <a href="/llms">
                        Large Language Models
                    </a>
                </li>
 
            </ul>
 
        </aside>
 
    </main>
 
    <!-- Site Footer -->
 
    <footer>
 
        <p>
            © 2026 NextGen Blog
        </p>
 
        <nav aria-label="Footer navigation">
 
            <a href="/privacy">
                Privacy
            </a>
 
            <a href="/terms">
                Terms
            </a>
 
        </nav>
 
    </footer>
 
</body>
 
</html>

This example demonstrates many concepts you've learned so far.

34. The Complete Architecture#

Visualize the previous page:

html
│
├── head
│   ├── meta
│   ├── title
│   └── meta description
│
└── body
    │
    ├── skip link
    │
    ├── header
    │   ├── logo
    │   ├── nav
    │   └── search form
    │
    ├── breadcrumb nav
    │
    ├── main
    │   │
    │   ├── article
    │   │   ├── header
    │   │   ├── table of contents
    │   │   ├── section
    │   │   ├── section
    │   │   ├── section
    │   │   └── footer
    │   │
    │   └── aside
    │
    └── footer
        └── footer navigation

This is what page architecture really means.

35. Common Architecture Mistakes#

Mistake 1 — Everything is a `<div>`#

<div class="header">
<div class="nav">
<div class="main">
<div class="article">
<div class="footer">

Use semantic elements when their meaning applies.

Mistake 2 — Multiple `<main>` Elements#

Don't create:

<main>
    ...
</main>
 
<main>
    ...
</main>

just to divide the page.

The document normally has one main content region.

Mistake 3 — Using `<section>` as a Styling Wrapper#

Bad reasoning:

"I need a container, therefore section."

Instead:

Meaningful topic?
    ↓
<section>
 
No semantic meaning?
    ↓
<div>

Mistake 4 — Using `<article>` for Every Card#

A card isn't automatically an article.

Ask:

Is this content independently meaningful/self-contained?

If yes:

<article>

Otherwise:

<div>

may be more appropriate.

Mistake 5 — Heading Based on Font Size#

Don't do:

<h4>

because you want small text.

Use:

<h2>

if it's a second-level heading, then style it with CSS.

Instead of:

<div class="nav">
    <div>Home</div>
    <div>About</div>
</div>

use actual links:

<nav>
 
    <a href="/">
        Home
    </a>
 
    <a href="/about">
        About
    </a>
 
</nav>

36. Interview Questions#

Q1. What is HTML page architecture?#

It is the structural organization of an HTML document into meaningful document regions and content relationships.

Q2. What are the major parts of an HTML document?#

<html>
├── <head>
└── <body>

Q3. What belongs inside `<head>`?#

Metadata, title, links to stylesheets, scripts/resources and other document-level information.

Q4. What belongs inside `<body>`?#

The document's actual page content.

Q5. What is the purpose of `<main>`?#

It identifies the dominant content of the document.

A navigation structure showing the user's position within a website hierarchy.

A link that lets keyboard users bypass repeated content such as navigation and jump to the main content.

Q8. Why use `aria-current="page"`?#

It identifies the current page/item within certain navigation patterns.

Q9. Can a page have multiple `<nav>` elements?#

Yes.

For example:

Main navigation
Breadcrumb
Table of contents
Pagination
Footer navigation

They can be distinguished with accessible labels where needed.

Q10. Can `<article>` contain `<section>`?#

Yes.

Q11. Can `<section>` contain `<article>`?#

Yes.

Q12. Should every `<div>` be replaced with a semantic element?#

No.

Use <div> when no more meaningful semantic element applies.

37. Mini Project — Production Blog Architecture#

Build a complete HTML page for:

              NEXTGEN BLOG
─────────────────────────────────────────────
 
Home | AI | Programming | Cloud | Tutorials
 
Search: [____________________] [Search]
 
Home > AI > AI Agents
 
─────────────────────────────────────────────
 
MAIN
 
    Understanding AI Agents
 
    Published: October 1, 2026
    Author: Anubhav
 
    TABLE OF CONTENTS
 
    1. Introduction
    2. How AI Agents Work
    3. Benefits
    4. Challenges
 
    ─────────────────────
 
    Introduction
    ...
 
    How AI Agents Work
    ...
 
    Benefits
    ...
 
    Challenges
    ...
 
                         ASIDE
 
                         Related Articles
                         - RAG
                         - LLMs
                         - MCP
                         - AI Tools
 
─────────────────────────────────────────────
 
Footer
 
© 2026 NextGen Blog
 
Privacy | Terms | Contact

Requirements#

Use:

<html>
<head>
<body>
 
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>
 
<h1>
<h2>
 
<time>
<address>
 
<form>

where appropriate.

Also add:

<a href="#main-content">
    Skip to main content
</a>

and:

<nav aria-label="Breadcrumb">

This project will combine Chapters 1–11 into one realistic HTML document.

38. Chapter 11 — Final Mental Model#

Think of a webpage like this:

                    DOCUMENT
                       │
          ┌────────────┴────────────┐
          │                         │
        HEAD                       BODY
          │                         │
     Metadata                 Page Structure
                                    │
       ┌────────────────────────────┼──────────────┐
       │                            │              │
    HEADER                         MAIN          FOOTER
       │                            │
      NAV                  ┌────────┼─────────┐
                           │        │         │
                        SECTION   ARTICLE    ASIDE
                           │        │
                          H2      HEADER
                                   │
                                  H1
                                   │
                               SECTION
                                   │
                                  H2
                                   │
                               SECTION

The key principle is:

Build HTML from meaning and relationships first. Use CSS later to control how that structure looks.

Once your HTML architecture is correct, adding CSS, JavaScript, React, or Next.js becomes much easier.

Next Chapter#

Chapter 12 — Multimedia#

Next we'll learn how HTML handles audio, video, and modern media:

<audio>
<video>
<source>
Video formats
Audio formats
controls
autoplay
muted
loop
poster
preload
Captions and <track>
Subtitles
Accessible multimedia
Responsive video
Embedding media
Browser compatibility
Media performance
Common multimedia mistakes
Building a complete HTML media gallery
Interview questions

Finished this chapter?

Mark it as complete to track your mastery.

Previous ChapterChapter 10 — Semantic HTML Next ChapterChapter 12 — HTML Multimedia

Prev Next

In this chapter (59 sections)

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Now we'll combine them into a complete professional webpage architecture.

The goal of this chapter is to answer:

How should I structure an entire HTML page from top to bottom?

1. What Is HTML Page Architecture?#

HTML page architecture is the way we organize the complete structure of a webpage.

Think of a webpage like a building.

Building
│
├── Foundation
├── Entrance
├── Rooms
├── Hallways
└── Exit

HTML provides a similar structure:

Webpage
│
├── <html>
│
├── <head>
│
└── <body>
    │
    ├── <header>
    ├── <nav>
    ├── <main>
    └── <footer>

Inside <main> we can have:

main
│
├── section
│   ├── article
│   └── article
│
├── section
│
└── aside

2. The Three Major Parts#

Every normal HTML document has three major structural layers:

<html>
 
    <head>
        ...
    </head>
 
    <body>
        ...
    </body>
 
</html>

Think:

<html>
   │
   ├── <head>
   │     → information about the document
   │
   └── <body>
         → visible document content

3. `<html>`#

The <html> element is the root element of the document.

Example:

<!DOCTYPE html>
 
<html lang="en">
 
    <head>
        ...
    </head>
 
    <body>
        ...
    </body>
 
</html>

The:

lang="en"

attribute tells user agents the primary language of the document.

For Hindi:

<html lang="hi">

For French:

<html lang="fr">

For English:

<html lang="en">

This is important for:

Accessibility
Screen readers
Search engines
Text processing

4. `<head>`#

The <head> contains metadata and resources associated with the document.

It doesn't normally contain the page's main visible content.

Typical contents include:

<head>
 
    <meta charset="UTF-8">
 
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
 
    <title>My Website</title>
 
    <meta
        name="description"
        content="Learn modern web development."
    >
 
    <link rel="stylesheet" href="/styles.css">
 
</head>

We'll study <head> in much greater depth in Chapter 14.

5. `<body>`#

<body> contains the document's actual content.

Example:

<body>
 
    <header>
        ...
    </header>
 
    <nav>
        ...
    </nav>
 
    <main>
        ...
    </main>
 
    <footer>
        ...
    </footer>
 
</body>

The browser renders the content inside the body as the page.

6. Professional Page Skeleton#

A strong starting point is:

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
 
    <title>My Website</title>
 
</head>
 
<body>
 
    <header>
        ...
    </header>
 
    <nav aria-label="Main navigation">
        ...
    </nav>
 
    <main>
        ...
    </main>
 
    <footer>
        ...
    </footer>
 
</body>
 
</html>

This should become second nature.

7. Think in Layers#

A professional webpage can be understood as:

                    HTML DOCUMENT
                         │
              ┌──────────┴──────────┐
              │                     │
             HEAD                  BODY
              │                     │
       Metadata/resources     Page structure
                                    │
              ┌─────────────────────┼─────────────────┐
              │                     │                 │
           HEADER                  MAIN             FOOTER
              │                     │
             NAV              ┌─────┼─────┐
                              │     │     │
                           SECTION ARTICLE ASIDE

8. Header Architecture#

A website header often contains:

┌──────────────────────────────────────────────┐
│ LOGO              Navigation         Search │
└──────────────────────────────────────────────┘

HTML:

<header>
 
    <a href="/" aria-label="NextGen Blog home">
        NextGen Blog
    </a>
 
    <nav aria-label="Main navigation">
 
        <ul>
 
            <li>
                <a href="/">Home</a>
            </li>
 
            <li>
                <a href="/ai">AI</a>
            </li>
 
            <li>
                <a href="/programming">
                    Programming
                </a>
            </li>
 
            <li>
                <a href="/about">About</a>
            </li>
 
        </ul>
 
    </nav>
 
</header>

9. Logo Architecture#

A logo that links to the homepage is commonly:

<a href="/">
    <img
        src="/logo.svg"
        alt="NextGen Blog"
    >
</a>

If the logo image is the only content of the link, its alt can serve as the accessible name.

Another option:

<a href="/" aria-label="NextGen Blog home">
    <img
        src="/logo.svg"
        alt=""
    >
</a>

The right choice depends on the surrounding accessible naming and whether the visible logo itself needs to provide the link's accessible name.

A professional navigation structure:

<nav aria-label="Main navigation">
 
    <ul>
 
        <li>
            <a href="/">Home</a>
        </li>
 
        <li>
            <a href="/articles">Articles</a>
        </li>
 
        <li>
            <a href="/tutorials">Tutorials</a>
        </li>
 
        <li>
            <a href="/about">About</a>
        </li>
 
    </ul>
 
</nav>

Why use:

aria-label="Main navigation"

when useful?

If there are multiple navigation landmarks, labels help distinguish their purposes.

11. Main Content Architecture#

The <main> should contain the page's primary content.

Example:

<main>
 
    <h1>HTML Tutorial</h1>
 
    <section>
 
        <h2>Introduction</h2>
 
        <p>
            HTML defines the structure of webpages.
        </p>
 
    </section>
 
    <section>
 
        <h2>HTML Elements</h2>
 
        <p>
            HTML uses elements to structure content.
        </p>
 
    </section>
 
</main>

12. The `<h1>` Is Important#

A page normally has a primary heading that describes its main topic.

For example:

<h1>Complete HTML Tutorial</h1>

Then:

<h2>HTML Fundamentals</h2>

Then:

<h3>HTML Elements</h3>

Think:

h1
│
├── h2
│   ├── h3
│   └── h3
│
└── h2
    └── h3

13. Don't Choose Headings Based on Size#

A common beginner mistake:

"I want smaller text, so I'll use <h4>."

Don't do that.

Heading level represents document hierarchy, not visual size.

Bad:

<h1>My Website</h1>
 
<h4>About Us</h4>

if there isn't an appropriate reason for that hierarchy.

Instead:

<h1>My Website</h1>
 
<h2>About Us</h2>

Then use CSS to control appearance.

14. Heading Hierarchy#

Imagine:

Complete HTML Course
│
├── HTML Fundamentals
│   ├── Elements
│   ├── Attributes
│   └── Nesting
│
├── Forms
│   ├── Inputs
│   ├── Validation
│   └── Advanced Controls
│
└── Semantic HTML
    ├── Header
    ├── Navigation
    └── Main Content

HTML:

<h1>Complete HTML Course</h1>
 
<h2>HTML Fundamentals</h2>
 
<h3>Elements</h3>
<h3>Attributes</h3>
<h3>Nesting</h3>
 
<h2>Forms</h2>
 
<h3>Inputs</h3>
<h3>Validation</h3>
<h3>Advanced Controls</h3>
 
<h2>Semantic HTML</h2>
 
<h3>Header</h3>
<h3>Navigation</h3>
<h3>Main Content</h3>

15. Important Nuance About Heading Levels#

Don't think of headings as a rigid rule that the browser will reject if you skip a level.

The important principle is:

Use headings to represent a logical hierarchy.

For example:

<h1>HTML Tutorial</h1>
 
<h2>Forms</h2>
 
<h3>Validation</h3>

makes a clear relationship.

Avoid randomly selecting heading levels purely for styling.

16. Sections and Heading Structure#

Consider:

<main>
 
    <h1>Our Products</h1>
 
    <section>
 
        <h2>Smart Watches</h2>
 
        ...
 
    </section>
 
    <section>
 
        <h2>Smartphones</h2>
 
        ...
 
    </section>
 
</main>

The structure is:

h1 Our Products
│
├── h2 Smart Watches
└── h2 Smartphones

Very easy to understand.

17. Article Architecture#

A professional article might look like:

<article>
 
    <header>
 
        <h1>
            Understanding Retrieval-Augmented Generation
        </h1>
 
        <p>
            Published:
            <time datetime="2026-10-01">
                October 1, 2026
            </time>
        </p>
 
    </header>
 
    <section>
 
        <h2>Introduction</h2>
 
        <p>
            RAG combines retrieval with generation.
        </p>
 
    </section>
 
    <section>
 
        <h2>How RAG Works</h2>
 
        <p>
            Documents are retrieved and supplied
            to a language model as context.
        </p>
 
    </section>
 
    <section>
 
        <h2>Benefits</h2>
 
        <p>
            RAG can provide access to external
            knowledge at query time.
        </p>
 
    </section>
 
    <footer>
 
        <p>
            Author: Anubhav Chaudhary
        </p>
 
    </footer>
 
</article>

This is a very strong structure for an article.

Suppose the page contains related content:

<aside>
 
    <h2>Related Articles</h2>
 
    <ul>
 
        <li>
            <a href="/html">
                HTML Fundamentals
            </a>
        </li>
 
        <li>
            <a href="/css">
                CSS Fundamentals
            </a>
        </li>
 
        <li>
            <a href="/javascript">
                JavaScript Fundamentals
            </a>
        </li>
 
    </ul>
 
</aside>

The browser doesn't care whether CSS visually puts it on the left or right.

Its semantic meaning is:

supporting/related content.

19. Two-Column Page Architecture#

A common blog layout:

┌───────────────────────────────────────────────┐
│                    HEADER                     │
├───────────────────────────────────────────────┤
│                    NAV                        │
├─────────────────────────────┬─────────────────┤
│                             │                 │
│            MAIN             │      ASIDE      │
│                             │                 │
│       Article / Content     │ Related Posts   │
│                             │ Categories      │
│                             │                 │
├─────────────────────────────┴─────────────────┤
│                    FOOTER                     │
└───────────────────────────────────────────────┘

HTML:

<body>
 
    <header>
        ...
    </header>
 
    <nav aria-label="Main navigation">
        ...
    </nav>
 
    <main>
 
        <article>
            ...
        </article>
 
        <aside>
            ...
        </aside>
 
    </main>
 
    <footer>
        ...
    </footer>
 
</body>

CSS determines whether those elements appear side-by-side.

20. Breadcrumbs#

Breadcrumbs show the user's position within a website hierarchy.

Example:

Home > Tutorials > HTML > Semantic HTML

A semantic implementation:

<nav aria-label="Breadcrumb">
 
    <ol>
 
        <li>
            <a href="/">Home</a>
        </li>
 
        <li>
            <a href="/tutorials">
                Tutorials
            </a>
        </li>
 
        <li>
            <a href="/tutorials/html">
                HTML
            </a>
        </li>
 
        <li aria-current="page">
            Semantic HTML
        </li>
 
    </ol>
 
</nav>

This is much better than using random <div> elements.

21. Why `<ol>` for Breadcrumbs?#

Breadcrumbs represent an ordered path:

Home
 ↓
Tutorials
 ↓
HTML
 ↓
Semantic HTML

Therefore:

<ol>

is semantically appropriate.

22. `aria-current="page"`#

The current breadcrumb can be marked:

<li aria-current="page">
    Semantic HTML
</li>

This communicates:

This is the current page.

Similarly, navigation can use:

<a
    href="/html"
    aria-current="page"
>
    HTML
</a>

when the current page is represented by that link.

23. Skip Links#

Skip links are an accessibility technique that allows keyboard users to bypass repeated navigation and jump directly to the main content.

Example:

<a href="#main-content">
    Skip to main content
</a>
 
<header>
    ...
</header>
 
<nav>
    ...
</nav>
 
<main id="main-content">
    ...
</main>

Conceptually:

Keyboard user
      │
      ▼
Skip link
      │
      ▼
Main content

This is especially useful on sites with large navigation areas.

24. Table of Contents#

A table of contents can be represented semantically:

<nav aria-label="Table of contents">
 
    <ol>
 
        <li>
            <a href="#introduction">
                Introduction
            </a>
        </li>
 
        <li>
            <a href="#architecture">
                Architecture
            </a>
        </li>
 
        <li>
            <a href="#benefits">
                Benefits
            </a>
        </li>
 
    </ol>
 
</nav>

Then:

<section id="introduction">
 
    <h2>Introduction</h2>
 
    ...
 
</section>
 
<section id="architecture">
 
    <h2>Architecture</h2>
 
    ...
 
</section>

The links connect through fragment identifiers.

25. Search Architecture#

A site search area can use:

<form action="/search" method="get">
 
    <label for="search">
        Search
    </label>
 
    <input
        type="search"
        id="search"
        name="q"
    >
 
    <button type="submit">
        Search
    </button>
 
</form>

You can place this inside:

<header>

or another appropriate region.

A search form:

<form>

isn't automatically:

<nav>

You should structure the page based on the meaning of the content.

For example:

<header>
 
    <a href="/">Logo</a>
 
    <nav>
        Main navigation
    </nav>
 
    <form>
        Search
    </form>
 
</header>

Each part has a different role.

A professional site may have:

Main Navigation
Footer Navigation
Breadcrumb Navigation
Table of Contents
Pagination Navigation

Example:

<nav aria-label="Main navigation">
    ...
</nav>
 
<nav aria-label="Breadcrumb">
    ...
</nav>
 
<nav aria-label="Table of contents">
    ...
</nav>
 
<nav aria-label="Pagination">
    ...
</nav>
 
<nav aria-label="Footer navigation">
    ...
</nav>

The labels help distinguish the navigation landmarks.

28. Pagination Architecture#

Suppose you're on page 3 of a blog:

← Previous     1 2 3 4 5     Next →

Semantic HTML:

<nav aria-label="Pagination">
 
    <a href="/blog?page=2">
        Previous
    </a>
 
    <a href="/blog?page=1">
        1
    </a>
 
    <a href="/blog?page=2">
        2
    </a>
 
    <a
        href="/blog?page=3"
        aria-current="page"
    >
        3
    </a>
 
    <a href="/blog?page=4">
        4
    </a>
 
    <a href="/blog?page=4">
        Next
    </a>
 
</nav>

The current page is explicitly identified.

29. E-Commerce Architecture#

A product page might look like:

BODY
│
├── HEADER
│   ├── Logo
│   ├── NAV
│   └── Search
│
├── MAIN
│   │
│   ├── Breadcrumb
│   │
│   ├── SECTION
│   │   ├── Product Image
│   │   └── Product Information
│   │
│   ├── SECTION
│   │   └── Product Description
│   │
│   ├── SECTION
│   │   └── Specifications
│   │
│   └── SECTION
│       └── Reviews
│
└── FOOTER

Possible HTML:

<main>
 
    <nav aria-label="Breadcrumb">
        ...
    </nav>
 
    <article>
 
        <header>
            <h1>Wireless Headphones</h1>
        </header>
 
        <figure>
 
            <img
                src="/headphones.webp"
                alt="Black wireless headphones"
            >
 
            <figcaption>
                Wireless headphones
            </figcaption>
 
        </figure>
 
        <section>
 
            <h2>Product Description</h2>
 
            <p>
                High-quality wireless headphones...
            </p>
 
        </section>
 
        <section>
 
            <h2>Specifications</h2>
 
            ...
 
        </section>
 
        <section>
 
            <h2>Customer Reviews</h2>
 
            ...
 
        </section>
 
    </article>
 
</main>

30. Blog Architecture#

A blog homepage:

BODY
│
├── HEADER
│
├── NAV
│
├── MAIN
│   │
│   ├── SECTION
│   │   └── Featured Article
│   │
│   ├── SECTION
│   │   └── Latest Articles
│   │       ├── ARTICLE
│   │       ├── ARTICLE
│   │       └── ARTICLE
│   │
│   └── ASIDE
│       ├── Categories
│       └── Popular Posts
│
└── FOOTER

This is a very common architecture.

31. Dashboard Architecture#

An admin dashboard can be structured as:

BODY
│
├── HEADER
│   ├── Logo
│   └── User Controls
│
├── NAV
│   ├── Dashboard
│   ├── Users
│   ├── Reports
│   └── Settings
│
├── MAIN
│   │
│   ├── HEADER
│   │   └── Dashboard
│   │
│   ├── SECTION
│   │   └── KPI Cards
│   │
│   ├── SECTION
│   │   └── Sales Chart
│   │
│   └── SECTION
│       └── Recent Orders
│
└── FOOTER

Important:

Don't use semantic elements merely because they sound professional.

Choose them according to the actual content and relationships.

32. A Very Important Rule: Don't Over-Semanticize#

Suppose you have:

<div class="card">
    <span>₹10,000</span>
</div>

There may be no reason to replace every <div> with:

<section>

or:

<article>

Ask:

Does this content have a meaningful semantic role?

If not:

<div>

is perfectly appropriate.

33. Page Architecture Example — Complete#

Here's a professional blog article architecture:

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
 
    <title>
        Understanding AI Agents
    </title>
 
    <meta
        name="description"
        content="Learn how AI agents work."
    >
 
</head>
 
<body>
 
    <!-- Skip Link -->
 
    <a href="#main-content">
        Skip to main content
    </a>
 
    <!-- Site Header -->
 
    <header>
 
        <a href="/">
            NextGen Blog
        </a>
 
        <nav aria-label="Main navigation">
 
            <ul>
 
                <li>
                    <a href="/">Home</a>
                </li>
 
                <li>
                    <a href="/ai">AI</a>
                </li>
 
                <li>
                    <a href="/programming">
                        Programming
                    </a>
                </li>
 
            </ul>
 
        </nav>
 
        <!-- Search -->
 
        <form action="/search" method="get">
 
            <label for="search">
                Search
            </label>
 
            <input
                type="search"
                id="search"
                name="q"
            >
 
            <button type="submit">
                Search
            </button>
 
        </form>
 
    </header>
 
    <!-- Breadcrumb -->
 
    <nav aria-label="Breadcrumb">
 
        <ol>
 
            <li>
                <a href="/">Home</a>
            </li>
 
            <li>
                <a href="/ai">AI</a>
            </li>
 
            <li aria-current="page">
                AI Agents
            </li>
 
        </ol>
 
    </nav>
 
    <!-- Main Content -->
 
    <main id="main-content">
 
        <article>
 
            <header>
 
                <h1>
                    Understanding AI Agents
                </h1>
 
                <p>
 
                    Published:
 
                    <time datetime="2026-10-01">
                        October 1, 2026
                    </time>
 
                </p>
 
                <address>
                    By Anubhav Chaudhary
                </address>
 
            </header>
 
            <!-- Table of Contents -->
 
            <nav aria-label="Table of contents">
 
                <ol>
 
                    <li>
                        <a href="#introduction">
                            Introduction
                        </a>
                    </li>
 
                    <li>
                        <a href="#how-it-works">
                            How It Works
                        </a>
                    </li>
 
                    <li>
                        <a href="#benefits">
                            Benefits
                        </a>
                    </li>
 
                </ol>
 
            </nav>
 
            <section id="introduction">
 
                <h2>
                    Introduction
                </h2>
 
                <p>
                    AI agents are systems that can
                    perform tasks using tools and
                    reasoning.
                </p>
 
            </section>
 
            <section id="how-it-works">
 
                <h2>
                    How It Works
                </h2>
 
                <p>
                    An agent can receive a goal,
                    reason about it, use tools,
                    and produce an outcome.
                </p>
 
            </section>
 
            <section id="benefits">
 
                <h2>
                    Benefits
                </h2>
 
                <p>
                    Agents can automate multi-step
                    workflows.
                </p>
 
            </section>
 
            <footer>
 
                <p>
                    Categories:
                    Artificial Intelligence
                </p>
 
            </footer>
 
        </article>
 
        <!-- Related Content -->
 
        <aside>
 
            <h2>
                Related Articles
            </h2>
 
            <ul>
 
                <li>
                    <a href="/rag">
                        Understanding RAG
                    </a>
                </li>
 
                <li>
                    <a href="/llms">
                        Large Language Models
                    </a>
                </li>
 
            </ul>
 
        </aside>
 
    </main>
 
    <!-- Site Footer -->
 
    <footer>
 
        <p>
            © 2026 NextGen Blog
        </p>
 
        <nav aria-label="Footer navigation">
 
            <a href="/privacy">
                Privacy
            </a>
 
            <a href="/terms">
                Terms
            </a>
 
        </nav>
 
    </footer>
 
</body>
 
</html>

This example demonstrates many concepts you've learned so far.

34. The Complete Architecture#

Visualize the previous page:

html
│
├── head
│   ├── meta
│   ├── title
│   └── meta description
│
└── body
    │
    ├── skip link
    │
    ├── header
    │   ├── logo
    │   ├── nav
    │   └── search form
    │
    ├── breadcrumb nav
    │
    ├── main
    │   │
    │   ├── article
    │   │   ├── header
    │   │   ├── table of contents
    │   │   ├── section
    │   │   ├── section
    │   │   ├── section
    │   │   └── footer
    │   │
    │   └── aside
    │
    └── footer
        └── footer navigation

This is what page architecture really means.

35. Common Architecture Mistakes#

Mistake 1 — Everything is a `<div>`#

<div class="header">
<div class="nav">
<div class="main">
<div class="article">
<div class="footer">

Use semantic elements when their meaning applies.

Mistake 2 — Multiple `<main>` Elements#

Don't create:

<main>
    ...
</main>
 
<main>
    ...
</main>

just to divide the page.

The document normally has one main content region.

Mistake 3 — Using `<section>` as a Styling Wrapper#

Bad reasoning:

"I need a container, therefore section."

Instead:

Meaningful topic?
    ↓
<section>
 
No semantic meaning?
    ↓
<div>

Mistake 4 — Using `<article>` for Every Card#

A card isn't automatically an article.

Ask:

Is this content independently meaningful/self-contained?

If yes:

<article>

Otherwise:

<div>

may be more appropriate.

Mistake 5 — Heading Based on Font Size#

Don't do:

<h4>

because you want small text.

Use:

<h2>

if it's a second-level heading, then style it with CSS.

Instead of:

<div class="nav">
    <div>Home</div>
    <div>About</div>
</div>

use actual links:

<nav>
 
    <a href="/">
        Home
    </a>
 
    <a href="/about">
        About
    </a>
 
</nav>

36. Interview Questions#

Q1. What is HTML page architecture?#

It is the structural organization of an HTML document into meaningful document regions and content relationships.

Q2. What are the major parts of an HTML document?#

<html>
├── <head>
└── <body>

Q3. What belongs inside `<head>`?#

Metadata, title, links to stylesheets, scripts/resources and other document-level information.

Q4. What belongs inside `<body>`?#

The document's actual page content.

Q5. What is the purpose of `<main>`?#

It identifies the dominant content of the document.

A navigation structure showing the user's position within a website hierarchy.

A link that lets keyboard users bypass repeated content such as navigation and jump to the main content.

Q8. Why use `aria-current="page"`?#

It identifies the current page/item within certain navigation patterns.

Q9. Can a page have multiple `<nav>` elements?#

Yes.

For example:

Main navigation
Breadcrumb
Table of contents
Pagination
Footer navigation

They can be distinguished with accessible labels where needed.

Q10. Can `<article>` contain `<section>`?#

Yes.

Q11. Can `<section>` contain `<article>`?#

Yes.

Q12. Should every `<div>` be replaced with a semantic element?#

No.

Use <div> when no more meaningful semantic element applies.

37. Mini Project — Production Blog Architecture#

Build a complete HTML page for:

              NEXTGEN BLOG
─────────────────────────────────────────────
 
Home | AI | Programming | Cloud | Tutorials
 
Search: [____________________] [Search]
 
Home > AI > AI Agents
 
─────────────────────────────────────────────
 
MAIN
 
    Understanding AI Agents
 
    Published: October 1, 2026
    Author: Anubhav
 
    TABLE OF CONTENTS
 
    1. Introduction
    2. How AI Agents Work
    3. Benefits
    4. Challenges
 
    ─────────────────────
 
    Introduction
    ...
 
    How AI Agents Work
    ...
 
    Benefits
    ...
 
    Challenges
    ...
 
                         ASIDE
 
                         Related Articles
                         - RAG
                         - LLMs
                         - MCP
                         - AI Tools
 
─────────────────────────────────────────────
 
Footer
 
© 2026 NextGen Blog
 
Privacy | Terms | Contact

Requirements#

Use:

<html>
<head>
<body>
 
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>
 
<h1>
<h2>
 
<time>
<address>
 
<form>

where appropriate.

Also add:

<a href="#main-content">
    Skip to main content
</a>

and:

<nav aria-label="Breadcrumb">

This project will combine Chapters 1–11 into one realistic HTML document.

38. Chapter 11 — Final Mental Model#

Think of a webpage like this:

                    DOCUMENT
                       │
          ┌────────────┴────────────┐
          │                         │
        HEAD                       BODY
          │                         │
     Metadata                 Page Structure
                                    │
       ┌────────────────────────────┼──────────────┐
       │                            │              │
    HEADER                         MAIN          FOOTER
       │                            │
      NAV                  ┌────────┼─────────┐
                           │        │         │
                        SECTION   ARTICLE    ASIDE
                           │        │
                          H2      HEADER
                                   │
                                  H1
                                   │
                               SECTION
                                   │
                                  H2
                                   │
                               SECTION

The key principle is:

Build HTML from meaning and relationships first. Use CSS later to control how that structure looks.

Once your HTML architecture is correct, adding CSS, JavaScript, React, or Next.js becomes much easier.

Next Chapter#

Chapter 12 — Multimedia#

Next we'll learn how HTML handles audio, video, and modern media:

<audio>
<video>
<source>
Video formats
Audio formats
controls
autoplay
muted
loop
poster
preload
Captions and <track>
Subtitles
Accessible multimedia
Responsive video
Embedding media
Browser compatibility
Media performance
Common multimedia mistakes
Building a complete HTML media gallery
Interview questions

Finished this chapter?

Mark it as complete to track your mastery.

Previous ChapterChapter 10 — Semantic HTML Next ChapterChapter 12 — HTML Multimedia

1. What Is HTML Page Architecture?#

2. The Three Major Parts#

3. <html>#

4. <head>#

5. <body>#

6. Professional Page Skeleton#

7. Think in Layers#

8. Header Architecture#

9. Logo Architecture#

10. Main Navigation#

11. Main Content Architecture#

12. The <h1> Is Important#

13. Don't Choose Headings Based on Size#

14. Heading Hierarchy#

15. Important Nuance About Heading Levels#

16. Sections and Heading Structure#

17. Article Architecture#

18. Sidebar Architecture#

19. Two-Column Page Architecture#

20. Breadcrumbs#

21. Why <ol> for Breadcrumbs?#

22. aria-current="page"#

23. Skip Links#

24. Table of Contents#

25. Search Architecture#

26. Search Is Not Necessarily Navigation#

27. Multiple Navigation Regions#

28. Pagination Architecture#

29. E-Commerce Architecture#

30. Blog Architecture#

31. Dashboard Architecture#

32. A Very Important Rule: Don't Over-Semanticize#

33. Page Architecture Example — Complete#

34. The Complete Architecture#

35. Common Architecture Mistakes#

Mistake 1 — Everything is a <div>#

Mistake 2 — Multiple <main> Elements#

Mistake 3 — Using <section> as a Styling Wrapper#

Mistake 4 — Using <article> for Every Card#

Mistake 5 — Heading Based on Font Size#

Mistake 6 — Navigation Without Meaningful Structure#

36. Interview Questions#

Q1. What is HTML page architecture?#

Q2. What are the major parts of an HTML document?#

Q3. What belongs inside <head>?#

Q4. What belongs inside <body>?#

Q5. What is the purpose of <main>?#

Q6. What is a breadcrumb?#

Q7. What is a skip link?#

Q8. Why use aria-current="page"?#

Q9. Can a page have multiple <nav> elements?#

Q10. Can <article> contain <section>?#

Q11. Can <section> contain <article>?#

Q12. Should every <div> be replaced with a semantic element?#

37. Mini Project — Production Blog Architecture#

Requirements#

38. Chapter 11 — Final Mental Model#

Next Chapter#

Chapter 12 — Multimedia#

Finished this chapter?

1. What Is HTML Page Architecture?#

2. The Three Major Parts#

3. <html>#

4. <head>#

5. <body>#

6. Professional Page Skeleton#

7. Think in Layers#

8. Header Architecture#

9. Logo Architecture#

10. Main Navigation#

11. Main Content Architecture#

12. The <h1> Is Important#

13. Don't Choose Headings Based on Size#

14. Heading Hierarchy#

15. Important Nuance About Heading Levels#

16. Sections and Heading Structure#

17. Article Architecture#

18. Sidebar Architecture#

19. Two-Column Page Architecture#

20. Breadcrumbs#

3. `<html>`#

4. `<head>`#

5. `<body>`#

12. The `<h1>` Is Important#

21. Why `<ol>` for Breadcrumbs?#

22. `aria-current="page"`#

Mistake 1 — Everything is a `<div>`#

Mistake 2 — Multiple `<main>` Elements#

Mistake 3 — Using `<section>` as a Styling Wrapper#

Mistake 4 — Using `<article>` for Every Card#

Q3. What belongs inside `<head>`?#

Q4. What belongs inside `<body>`?#

Q5. What is the purpose of `<main>`?#

Q8. Why use `aria-current="page"`?#

Q9. Can a page have multiple `<nav>` elements?#

Q10. Can `<article>` contain `<section>`?#

Q11. Can `<section>` contain `<article>`?#

Q12. Should every `<div>` be replaced with a semantic element?#

3. `<html>`#

4. `<head>`#

5. `<body>`#

12. The `<h1>` Is Important#

21. Why `<ol>` for Breadcrumbs?#

22. `aria-current="page"`#

Mistake 1 — Everything is a `<div>`#

Mistake 2 — Multiple `<main>` Elements#

Mistake 3 — Using `<section>` as a Styling Wrapper#

Mistake 4 — Using `<article>` for Every Card#

Q3. What belongs inside `<head>`?#

Q4. What belongs inside `<body>`?#

Q5. What is the purpose of `<main>`?#

Q8. Why use `aria-current="page"`?#

Q9. Can a page have multiple `<nav>` elements?#

Q10. Can `<article>` contain `<section>`?#

Q11. Can `<section>` contain `<article>`?#

Q12. Should every `<div>` be replaced with a semantic element?#