Learn HTML – Part 27 – Building a Complete HTML Page Layout

In previous lessons, we learned several semantic HTML elements such as header, nav, main, section, article, and footer.

In this lesson, we will combine these elements to build a complete HTML page layout.

What is an HTML Page Layout?

An HTML page layout defines how different parts of a webpage are organized.

Modern websites use semantic HTML elements to clearly structure the page content.

Common HTML Page Layout Structure

• header – Top section containing title or logo
• nav – Navigation links
• main – Main content area
• section – Thematic grouping of content
• article – Independent content block
• footer – Bottom section of the page

Basic Page Layout Example

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

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

<main>
   <section>
      <h2>Latest Articles</h2>

      <article>
         <h3>Learn HTML</h3>
         <p>HTML is the foundation of web development.</p>
      </article>

      <article>
         <h3>Learn CSS</h3>
         <p>CSS is used to style web pages.</p>
      </article>

   </section>
</main>

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

Visual Structure of the Layout

The structure of the page looks like this:

Header
   ↓
Navigation
   ↓
Main Content
   ↓
Sections
   ↓
Articles
   ↓
Footer

HTML Layout Structure Diagram

The following diagram shows how the main semantic HTML elements are arranged in a typical webpage layout.

+----------------------+
|        HEADER        |
+----------------------+
|         NAV          |
+----------------------+
|         MAIN         |
|  +----------------+  |
|  |    SECTION     |  |
|  |  +----------+  |  |
|  |  | ARTICLE  |  |  |
|  |  +----------+  |  |
|  +----------------+  |
+----------------------+
|        FOOTER        |
+----------------------+

This layout helps organize content clearly and improves both accessibility and SEO.

Explanation of Each Section

• Header – Contains the website title, logo, or introductory content.
• Nav – Contains navigation links to other pages.
• Main – Contains the primary content of the page.
• Section – Groups related content together.
• Article – Represents independent content such as blog posts.
• Footer – Contains copyright, contact details, or additional links.

Why Use Semantic Layout Elements?

• Improves website structure
• Helps search engines understand the page
• Improves accessibility for screen readers
• Makes code easier to read and maintain

Semantic HTML helps browsers, search engines, and developers understand the structure of a webpage.

Common Mistakes Beginners Make

• Using only div instead of semantic elements
• Placing multiple main elements on a page
• Not organizing content into logical sections

Conclusion

By combining semantic HTML elements like header, nav, main, section, article, and footer, you can create a well-structured webpage layout.

This structure improves readability, accessibility, and SEO.

What’s Next?

Now that you understand how to build a complete HTML page layout, the next step is learning about the audio tag, which is used to embed audio content in HTML.

Next: Learn HTML – Part 28 – audio Tag – Embedding Audio →

Series: Learn HTML Series