HTML Layout

Webpages aren't just blocks of text piled on top of each other. A good layout organizes information logically, making it easy for users to navigate and digest content. While HTML provides the skeleton tags, it relies entirely on CSS to position those bones.

The Common Anatomy of a Webpage

Before writing a single line of CSS, developers generally map out the page structure using the semantic HTML5 layout tags you learned in the previous lesson. Most modern websites follow a very similar, predictable blueprint:

How Do We Move the Blocks?

As you know, tags like <header>, <main>, and <div> are block-level elements. By default, they will just stack directly underneath each other vertically. To place a sidebar next to the main content, CSS layout techniques must be applied.

1. CSS Flexbox (The Modern Standard)

Flexbox is currently the most popular method for laying out web pages. It was designed specifically to distribute space dynamically and align items in a single row or a single column. It's perfect for navigation bars, aligning buttons, or creating a main content area with a sidebar.

<!-- A simple Flexbox row -->
<div style="display: flex;">
  <main style="flex: 2;">Takes up 2/3 of the width</main>
  <aside style="flex: 1;">Takes up 1/3 of the width</aside>
</div>

2. CSS Grid (The Powerhouse)

If Flexbox is a 1-dimensional tool (handling just rows or just columns), CSS Grid is a 2-dimensional system. It allows developers to create complex, magazine-style layouts by explicitly defining a spreadsheet-like grid of columns and rows.

<!-- A simple Grid layout -->
<div style="display: grid; grid-template-columns: 70% 30%;">
  <main>Goes into the first column</main>
  <aside>Goes into the second column</aside>
</div>

3. CSS Frameworks (Bootstrap / Tailwind)

Because writing complex CSS Flexbox and Grid rules from scratch can be time-consuming, millions of developers use pre-written CSS frameworks. For example, Bootstrap allows you to create a layout just by adding specific HTML classes (like class="row" and class="col-md-6") directly to your tags.