HTML Page Layout Explained - Building a Full Layout Structure

Previous Next

In previous lessons you learned individual tags - paragraphs, images, tables, forms, semantic elements. Now it is time to bring them together into a complete web page structure. This is called Layout - the overall page structure and where its parts sit.

The Classic Web Page Structure

Most websites - regardless of their design - follow one core structure:

Header: logo + navigation + maybe a search bar
Navigation: sometimes inside the header, sometimes separate
Main Content: the heart of the page - article, products, lessons
Sidebar / Aside: suggestions, ads, filters - not always present
Footer: copyright, extra links, site map

+-------------------------------------+
|             <header>                |  <- header
|  Site logo | Navigation <nav>       |
+-------------------------------------+
|                                     |
|              <main>                 |  <- main content
|                                     |
|  +------------------+ +----------+  |
|  |   <article>      | | <aside>  |  |
|  |   or <section>   | | Sidebar  |  |
|  +------------------+ +----------+  |
|                                     |
+-------------------------------------+
|             <footer>                |  <- footer
+-------------------------------------+

Full Code - A Web Page from Scratch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Page description for search engines">
    <title>DevArabi - Learn programming</title>
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>

    <!-- ====== Page Header ====== -->
    <header>
        <a href="/">
            <img src="/assets/images/logo.png" alt="DevArabi" width="150" height="50">
        </a>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/courses">Courses</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/contact">Contact Us</a></li>
            </ul>
        </nav>
    </header>

    <!-- ====== Main Content ====== -->
    <main>

        <!-- Hero Section -->
        <section>
            <h1>Learn programming from scratch</h1>
            <p>Comprehensive courses in HTML, CSS, JavaScript, and more.</p>
            <a href="/courses">Start learning now</a>
        </section>

        <!-- Courses section -->
        <section>
            <h2>Latest Courses</h2>

            <article>
                <h3>HTML Course from Scratch</h3>
                <p>Learn the basics of web markup in 20 lessons</p>
                <a href="/courses/html">Start the course</a>
            </article>

            <article>
                <h3>Complete CSS Course</h3>
                <p>Learn styling and professional web design</p>
                <a href="/courses/css">Start the course</a>
            </article>

        </section>

    </main>

    <!-- ====== Sidebar (Optional) ====== -->
    <aside>
        <h3>Latest Articles</h3>
        <ul>
            <li><a href="#">What is HTML?</a></li>
            <li><a href="#">Best developer tools</a></li>
        </ul>
    </aside>

    <!-- ====== Page Footer ====== -->
    <footer>
        <nav>
            <ul>
                <li><a href="/about">About Us</a></li>
                <li><a href="/privacy">Privacy Policy</a></li>
                <li><a href="/terms">Terms of Use</a></li>
            </ul>
        </nav>
        <p>All rights reserved (c) 2025 DevArabi</p>
    </footer>

</body>
</html>

Common Layout Types on the Web

Type	Description	Site Examples
Single Column	One column - all content stacked vertically	Blogs, login pages
Two Columns	Two columns - main content + sidebar	Blogs, news, documentation sites
Three Columns	Three columns	Older news sites
Grid Layout	Card grid	E-commerce, image galleries
Full-Screen	Full page, large hero section	Landing pages, portfolios

HTML Builds Structure - CSS Builds Appearance

Always remember: HTML is responsible only for structure and semantic order. Making the header appear at the top with a specific color, and placing the aside next to the main content - those are CSS tasks (we will learn it in the next course).

Without CSS, all elements (header, main, aside, footer) appear as vertical blocks stacked on top of each other. That is normal - HTML handles meaning and logical order, and CSS applies visual layout.

<!-- HTML defines the structure: what exists on the page -->
<header>...</header>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- CSS defines placement: where each part goes -->
<!-- CSS example (in style.css) -->
<!--
body { display: grid; grid-template-columns: 1fr 300px; }
header, footer { grid-column: 1 / -1; }
-->

Frequently Asked Questions - FAQ

Does element order in HTML matter for SEO?

Yes. Google reads the page from top to bottom. Put <h1> and the most important content at the start of <main>, and make sure <nav> and <header> are in the correct places. Logical order improves indexing.

Does <aside> have to be on the right or left?

No - that is a CSS decision, not HTML. <aside> can appear anywhere visually depending on CSS layout. In HTML it is usually placed after <main> or inside it depending on the content structure.

Do I need an <aside> on every page?

No - <aside> is optional. Many pages (especially login pages and "About" pages) do not need it. Add it only if there is real sidebar content worth highlighting.

Great! You have now mastered building a full web page structure. In the next lesson we will learn class and id attributes - how to name elements and style them with CSS.