Skip to content
html.sh

Basic Page Structure

Basic Page Structure

Section titled “Basic Page Structure”

Beyond just putting content on a page, good HTML structure is about organizing that content in a way that makes sense to browsers, search engines, and people using assistive technology. This tutorial introduces you to semantic HTML elements that give meaning to page structure.

What you’ll learn:

  • Semantic HTML elements and why they matter
  • Using <header>, <nav>, <main>, and <footer>
  • The <section> and <article> elements
  • The <aside> element for sidebars
  • Creating accessible, well-organized pages
  • Why structure matters for SEO

Prerequisites:

What is Semantic HTML?

Section titled “What is Semantic HTML?”

Semantic HTML means using elements that describe their meaning, not just their appearance. Compare:

<!-- Not semantic - no meaning -->
<div>Welcome to my site</div>
<div>Home | About | Contact</div>
<div>My latest article...</div>


<!-- Semantic - clear meaning -->
<header>Welcome to my site</header>
<nav>Home | About | Contact</nav>
<article>My latest article...</article>

Both render similarly, but semantic HTML:

  • Helps search engines understand your content
  • Makes assistive technology work better
  • Makes your code easier to maintain
  • Shows your intent to other developers

The Basic Page Structure

Section titled “The Basic Page Structure”

Here’s a typical semantic page structure:

Result

The Main Structural Elements

Section titled “The Main Structural Elements”

<header>: Top of the Page

Section titled “<header>: Top of the Page”

The <header> contains introductory content, branding, and navigation:

Result
Section titled “<nav>: Navigation”

The <nav> element contains navigation links:

Result

Use <nav> for:

  • Main site navigation
  • Breadcrumbs (navigation trails)
  • Table of contents
  • Pagination links

Don’t use <nav> for:

  • Every link on the page
  • Footer links (use <footer> instead)
  • Single links

<main>: Main Content

Section titled “<main>: Main Content”

The <main> element contains the primary content of your page:

Result

<section>: Content Groupings

Section titled “<section>: Content Groupings”

<section> groups related content together:

Result

Use <section> to:

  • Group related content
  • Create logical divisions in your content
  • Organize topics

Don’t use <section> for:

  • Styling purposes (use <div> instead)
  • Sidebar content (use <aside>)
  • Individual articles (use <article>)

<article>: Independent Content

Section titled “<article>: Independent Content”

<article> contains content that stands alone:

Result

Use <article> for:

  • Blog posts
  • News articles
  • Forum posts
  • Podcast episodes
  • Product reviews
  • User comments

Key difference from <section>:

  • <article> makes sense on its own
  • <section> is part of a larger whole

<aside>: Sidebars and Supplementary Content

Section titled “<aside>: Sidebars and Supplementary Content”

<aside> contains tangentially related content:

Result

Use <aside> for:

  • Sidebars with related links
  • Supplementary information
  • Pull quotes
  • Related articles
  • Advertising sections

<footer>: Bottom of the Page

Section titled “<footer>: Bottom of the Page”

The <footer> contains closing information:

Result

A Complete Website Layout

Section titled “A Complete Website Layout”

Here’s a complete example combining all structural elements:

Result

Thinking in Semantics

Section titled “Thinking in Semantics”

Before you start coding, sketch out your content structure:

  1. What’s the main title/branding? → <header>
  2. How do users navigate? → <nav>
  3. What’s the main content? → <main> with <article> or <section>
  4. Is there supporting information? → <aside>
  5. What goes at the bottom? → <footer>

Accessibility and SEO Benefits

Section titled “Accessibility and SEO Benefits”

Semantic structure helps:

Screen Readers:

  • Users can navigate by heading levels
  • They can jump to <main> content
  • They understand <nav> sections

Search Engines:

  • Better understand your content
  • Find your main topic (h1 in header)
  • Index your pages more accurately

Mobile Browsers:

  • Can reflow content appropriately
  • Provide better reading modes

Developers:

  • Your code is self-documenting
  • Easier to maintain and update

Try It Yourself

Section titled “Try It Yourself”

Create a structured page about a topic you know:

Result

Experiment with:

  1. Adding more sections
  2. Creating an article instead of sections
  3. Adding an aside with related links
  4. Making footer content more detailed

Common Mistakes

Section titled “Common Mistakes”

Summary

Section titled “Summary”
  • Semantic HTML gives meaning to your page structure
  • <header> — Top branding and introductory content
  • <nav> — Navigation links
  • <main> — Primary content (one per page)
  • <section> — Groups of related content
  • <article> — Independent, self-contained content
  • <aside> — Supplementary content and sidebars
  • <footer> — Bottom closing content
  • Semantic structure improves SEO, accessibility, and maintainability

Next Steps

Section titled “Next Steps”

Semantic HTML

Dive deeper into semantic HTML and advanced structures. Continue →

Forms

Build interactive forms with input validation. Continue →