HTML Layout

Semantic Headers and Footers

The header element represents introductory content, typically holding logos, search inputs, or navigation menus. The footer element marks closing content, such as copyright info, contacts, or system links.

Example: Semantic Headers and Footers

<header>Site Logo</header>
<footer>&copy; 2024 My Site</footer>

Semantic Navigation (nav)

The nav element is a specialized container used to group primary website navigation links. Using this tag signals to search engine crawlers and screen readers that this block handles page routing.

Example: Semantic Navigation (nav)

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

Structuring Main Content with article and section

The main tag represents the unique, core topic of your page. Within it, you can group content semantically using the article tag (for standalone, self-contained elements like blog posts) and the section tag (for grouping related features).

Example: Structuring Main Content with article and section

<main>
  <article>Blog post content</article>
  <section>Related features</section>
</main>

Sidebars and Callouts (aside)

The aside element represents content that is tangentially related to the main page content, such as a sidebar listing popular tools, quick tips, or callout advertisements.

Example: Sidebars and Callouts (aside)

<aside>Popular tools this week</aside>

Generic Dividers vs. Semantic Tags

Before semantic HTML tags like header, nav, and article were introduced, developers had to use generic div containers with custom class names (like div class="header") for every section.

While standard divs are still highly useful for styling layout cards, using semantic tags is much better for accessibility and search engine optimization.

Example: Generic Dividers vs. Semantic Tags

<div class="header">Old approach</div>
<header>Semantic approach</header>

CSS Box Model for Layout

Every HTML element is a rectangular box made of four layers: the content itself, padding around the content, a border around the padding, and margin outside the border separating it from other elements.

Understanding this model is the foundation for building any layout correctly.

Example: CSS Box Model for Layout

<div style="padding: 10px; border: 1px solid black; margin: 20px;">
  Content
</div>

Flexbox Basics

Flexbox is a CSS layout method designed for arranging items in a single row or column, distributing space between them automatically.

Setting display: flex on a container turns its direct children into flexible items that can grow, shrink, or align along that single direction.

Example: Flexbox Basics

<div style="display: flex; justify-content: space-between;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

CSS Grid Basics

CSS Grid is a layout method built for two-dimensional layouts, letting you define both rows and columns at the same time.

Setting display: grid on a container along with grid-template-columns lets you place items into a precise grid structure that flexbox cannot easily replicate.

Example: CSS Grid Basics

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Choosing the Right Layout Method

For arranging items in a single row or column, like a navigation bar or a list of buttons, flexbox is usually the simplest choice.

For laying out an entire page structure with rows and columns together, like a dashboard with a sidebar, header, and main content area, CSS Grid tends to be clearer and more powerful.

Example: Choosing the Right Layout Method

<div style="display: grid; grid-template-columns: 200px 1fr;">
  <nav>Sidebar</nav>
  <div style="display: flex;">
    <button>Save</button>
    <button>Cancel</button>
  </div>
</div>