Easy Way to Understand: A webpage is like a building. The <header> is the entrance, <nav> is the direction area, <main> is the main room, <aside> is the supporting area, and <footer> is the closing section.

1. Basic HTML Page Structure

A typical semantic HTML page can be organized using these major elements:

<header> - introductory content
<nav> - main navigation
<main> - primary page content
<section> - related content group
<article> - independent content
<aside> - related secondary content
<footer> - footer information

2. Simple Page Layout Example

<header>
    Website Header
</header>

<nav>
    Navigation
</nav>

<main>
    Main Content
</main>

<footer>
    Footer
</footer>

Visual Layout

Header

Navigation

Main Content

3. Complete Semantic Page Layout

A more complete layout can contain a main section and a related sidebar.

<header>
    Website Header
</header>

<nav>
    Main Navigation
</nav>

<main>

    <section>
        Main Content
    </section>

    <aside>
        Related Content
    </aside>

</main>

<footer>
    Footer
</footer>

Visual Structure

Header

Navigation

Main Section

Primary page content.

Aside

Related information.

4. Header Area

The header normally introduces the website or a particular section. It may contain a logo, website title, heading, or introductory information.

<header>

    <h1>
        CIIT Training Institute
    </h1>

    <p>
        Technology Training and Learning
    </p>

</header>

5. Navigation Area

The navigation area contains important links that help users move through the website.

<nav>

    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">Tutorials</a>
    <a href="#">Contact</a>

</nav>

6. Main Content Area

The <main> element contains the most important content of the current page.

<main>

    <h1>
        HTML Tutorial
    </h1>

    <p>
        Learn HTML from basic to advanced concepts.
    </p>

</main>

7. Using Sections

A large main content area can be divided into sections based on topics.

<main>

    <section>

        <h2>
            HTML Basics
        </h2>

        <p>
            Learn HTML fundamentals.
        </p>

    </section>

    <section>

        <h2>
            HTML Forms
        </h2>

        <p>
            Learn HTML form controls.
        </p>

    </section>

</main>

8. Using Articles

Independent content inside the main area can be represented using <article>.

<main>

    <section>

        <h2>
            Latest Tutorials
        </h2>

        <article>
            <h3>HTML Basics</h3>
            <p>
                Learn HTML fundamentals.
            </p>
        </article>

        <article>
            <h3>HTML Forms</h3>
            <p>
                Learn HTML forms.
            </p>
        </article>

    </section>

</main>

9. Sidebar Using aside

A related sidebar can be represented using the <aside> element.

<aside>

    <h3>
        Related Topics
    </h3>

    <ul>
        <li>HTML Forms</li>
        <li>HTML Tables</li>
        <li>HTML Lists</li>
    </ul>

</aside>

10. Footer Area

The footer normally contains supporting information such as copyright, contact details, privacy links, or related navigation.

<footer>

    <p>
        © 2026 Learning Portal
    </p>

</footer>

11. Complete HTML Page Example

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>
        Learning Portal
    </title>

</head>

<body>

    <header>

        <h1>
            Learning Portal
        </h1>

    </header>

    <nav>

        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Tutorials</a>
        <a href="#">Contact</a>

    </nav>

    <main>

        <section>

            <h2>
                HTML Course
            </h2>

            <p>
                Learn HTML from basic to advanced topics.
            </p>

        </section>

        <aside>

            <h3>
                Related Topics
            </h3>

            <p>
                CSS and JavaScript
            </p>

        </aside>

    </main>

    <footer>

        <p>
            © 2026 Learning Portal
        </p>

    </footer>

</body>

</html>

12. Layout Components at a Glance

Element	Simple Meaning
`<header>`	Introduction or top area
`<nav>`	Navigation links
`<main>`	Primary page content
`<section>`	Related content group
`<article>`	Independent content
`<aside>`	Related or secondary content
`<footer>`	Closing or supporting information

13. Semantic Layout vs Generic Layout

A page can technically be built using many <div> elements, but semantic elements make the structure easier to understand.

<!-- Generic layout -->

<div>
    Header
</div>

<div>
    Navigation
</div>

<div>
    Main Content
</div>

<div>
    Footer
</div>

A semantic layout clearly describes each area:

<header>
    Header
</header>

<nav>
    Navigation
</nav>

<main>
    Main Content
</main>

<footer>
    Footer
</footer>

14. Responsive Layout

HTML provides the structure, while CSS is generally responsible for controlling how the layout behaves on different screen sizes.

For example, on a desktop screen, the main content and sidebar may appear side by side. On a smaller screen, CSS can stack them vertically.

15. Common Mistakes

Mistake 1: Using every semantic element without a reason

Semantic elements should describe real content relationships. Do not use them simply because they exist.

Mistake 2: Confusing structure with styling

HTML defines the meaning and structure of the page. CSS controls colors, spacing, positioning, and visual appearance.

Mistake 3: Putting the main content inside aside

The primary content belongs inside <main>. Supporting information can go inside <aside>.

16. Best Practices

Use semantic elements according to their meaning.
Keep the main content inside <main>.
Use <nav> for important navigation areas.
Use sections and articles to organize related content.
Use <aside> for supporting information.
Use <footer> for footer-related information.
Use CSS separately for visual layout and responsive behavior.

17. Practice Example

Create a simple webpage with the following structure:

Header containing a website title
Navigation containing three links
Main area containing one section
Aside containing related topics
Footer containing copyright information

<header>
    <h1>My Website</h1>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">Contact</a>
</nav>

<main>

    <section>
        <h2>HTML Course</h2>
        <p>
            Learn HTML step by step.
        </p>
    </section>

    <aside>
        <h3>Related Topics</h3>
        <p>
            CSS and JavaScript
        </p>
    </aside>

</main>

<footer>
    <p>
        © 2026 My Website
    </p>
</footer>

Summary

HTML page layout is the process of organizing webpage content into meaningful areas. A common semantic layout uses <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. HTML provides the structure, while CSS controls the visual layout and responsive behavior.

← Previous: Footer Next: HTML5 Features →