What is HTML Layout?

HTML layout refers to how content is organized and structured on a webpage. A well-planned layout uses semantic HTML elements to create clear, accessible, and maintainable page structures.

Why Layout Matters:

  • Users - Intuitive navigation and content organization
  • Developers - Cleaner, more readable, maintainable code
  • Search Engines - Better understanding of content hierarchy (SEO)
  • Assistive Technologies - Screen readers can navigate effectively
  • Browsers - Proper rendering and default styling

Evolution of HTML Layout:

  • 1990s: Tables for layout (bad practice now)
  • 2000s: Div-based layouts with CSS
  • 2010s+: Semantic HTML5 elements (current best practice)

Back to top

Semantic Layout Elements

Semantic elements clearly describe their meaning to both browsers and developers. Use these instead of generic divs whenever possible.

Core Semantic Elements:

Element Purpose Common Use
<header> Introductory content or navigation Logo, site title, main navigation
<nav> Navigation links Main menu, breadcrumbs, pagination
<main> Primary content (unique to page) Main article, product info, search results
<section> Thematic grouping of content Chapters, tabs, themed content blocks
<article> Self-contained, reusable content Blog post, news article, product card
<aside> Tangentially related content Sidebar, related links, ads, widgets
<footer> Footer information Copyright, contact, social links
<div> Generic container (non-semantic) Styling wrapper, grid containers

Element Descriptions:

<header>

Represents introductory content. Can be used multiple times per page (page header, article header, section header).

<header>
  <img src="logo.png" alt="Company Logo">
  <h1>Website Title</h1>
  <nav>...</nav>
</header>

<nav>

Contains navigation links. Use for major navigation blocks only, not every group of links.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<main>

The dominant content of the page. Use only once per page. Should not include repeated content like headers, footers, or sidebars.

<main>
  <h1>Page Title</h1>
  <p>Main content that's unique to this page...</p>
</main>

<section>

Groups thematic content. Should typically have a heading. Use when content represents a distinct section of the document.

<section>
  <h2>Our Services</h2>
  <p>We offer web development, design, and consulting.</p>
</section>

<article>

Self-contained content that makes sense independently. Could be distributed or reused separately.

<article>
  <h2>Blog Post Title</h2>
  <p>Published on Jan 1, 2025</p>
  <p>Post content here...</p>
</article>

<aside>

Content indirectly related to main content. Often used for sidebars, pullquotes, or advertising.

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
  </ul>
</aside>

<footer>

Footer for its nearest sectioning content or root. Can be used multiple times (page footer, article footer).

<footer>
  <p>&copy; 2025 Company Name</p>
  <nav>
    <a href="privacy.html">Privacy</a>
    <a href="terms.html">Terms</a>
  </nav>
</footer>

Back to top

Typical Page Structure

Here's how semantic elements typically work together:

<body>
  <header>
    <!-- Site header: logo, title, main nav -->
  </header>

  <main>
    <!-- Main unique content of the page -->
    
    <section>
      <!-- Thematic content group -->
      
      <article>
        <!-- Self-contained content -->
      </article>
      
    </section>
    
    <aside>
      <!-- Sidebar or related content -->
    </aside>
    
  </main>

  <footer>
    <!-- Site footer: copyright, links -->
  </footer>
</body>

Visual Structure Diagram:

┌─────────────────────────────────────┐
│           <header>                  │
│  Logo  |  Navigation Menu           │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│           <main>                    │
│  ┌───────────────┐  ┌────────────┐  │
│  │   <article>   │  │  <aside>   │  │
│  │               │  │            │  │
│  │  Main Content │  │  Sidebar   │  │
│  │               │  │            │  │
│  └───────────────┘  └────────────┘  │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│           <footer>                  │
│  © 2025  |  Privacy  |  Contact     │
└─────────────────────────────────────┘

Back to top

Complete Layout Examples

Example 1: Simple Blog Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; }
    
    header { 
      background: #333; 
      color: white; 
      padding: 20px;
      text-align: center;
    }
    
    nav { 
      background: #444; 
      padding: 10px;
      text-align: center;
    }
    nav a { 
      color: white; 
      margin: 0 15px; 
      text-decoration: none;
    }
    
    main { 
      display: flex; 
      margin: 20px;
      gap: 20px;
    }
    
    article { 
      flex: 3; 
      background: #f4f4f4; 
      padding: 20px;
      border-radius: 5px;
    }
    
    aside { 
      flex: 1; 
      background: #e0e0e0; 
      padding: 20px;
      border-radius: 5px;
    }
    
    footer { 
      background: #333; 
      color: white; 
      text-align: center; 
      padding: 15px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <header>
    <h1>My Awesome Blog</h1>
    <p>Web Development & Technology</p>
  </header>

  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="blog.html">Blog</a>
    <a href="contact.html">Contact</a>
  </nav>

  <main>
    <article>
      <h2>How to Learn HTML</h2>
      <p>Published: Jan 15, 2025</p>
      <p>HTML is the foundation of web development. Here's how to get started...</p>
    </article>

    <aside>
      <h3>Popular Posts</h3>
      <ul>
        <li><a href="#">CSS Basics</a></li>
        <li><a href="#">JavaScript Tips</a></li>
        <li><a href="#">Responsive Design</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Blog. All rights reserved.</p>
  </footer>
</body>
</html>

Example 2: Landing Page Layout

<body>
  <header>
    <nav>
      <img src="logo.png" alt="Logo">
      <ul>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="hero">
      <h1>Welcome to Our Product</h1>
      <p>The best solution for your needs</p>
      <button>Get Started</button>
    </section>

    <section id="features">
      <h2>Features</h2>
      <article>
        <h3>Fast</h3>
        <p>Lightning-fast performance</p>
      </article>
      <article>
        <h3>Secure</h3>
        <p>Bank-level security</p>
      </article>
    </section>

    <section id="pricing">
      <h2>Pricing</h2>
      <!-- Pricing cards -->
    </section>
  </main>

  <footer>
    <p>Contact: hello@example.com</p>
    <p>&copy; 2025 Company Name</p>
  </footer>
</body>

Back to top

Benefits of Semantic Layout

1. SEO (Search Engine Optimization)

  • Search engines understand content hierarchy
  • <main> identifies primary content
  • <article> marks individual pieces of content
  • Better indexing and ranking

2. Accessibility

  • Screen readers navigate by landmarks (header, nav, main, footer)
  • Users can skip to main content easily
  • Clearer structure for assistive technologies
  • ARIA roles often unnecessary with semantic HTML

3. Maintainability

  • Code is self-documenting
  • Easier for teams to understand structure
  • Reduces need for comments
  • Simpler to update and refactor

4. Default Styling

  • Browsers provide default styling
  • Reader modes work better
  • Print stylesheets easier to create

Back to top

Quick Quiz

Q1. Which tag should be used for a website's footer?
Q2. Which tag contains navigation links?
Q3. How many <main> elements should a page have?
Q4. Which element is best for a self-contained blog post?
Q5. What's the main benefit of semantic HTML for SEO?

Back to top

Practice Tasks

  1. Portfolio Page:
    • Create header with your name and navigation
    • Main section with "About Me" article
    • Section for "Projects" with multiple article elements
    • Aside with skills or contact info
    • Footer with social links
  2. Blog Layout:
    • Header with blog title and nav
    • Main content area with 3 blog post articles
    • Aside with "Categories" and "Archive"
    • Footer with copyright and author info
  3. Landing Page:
    • Header with logo and navigation
    • Hero section with main message
    • Features section with 3 feature articles
    • Pricing section with pricing cards
    • Footer with contact and social media
  4. Convert Non-Semantic to Semantic:
    • Take a page built with divs only
    • Replace with proper semantic elements
    • Test with a screen reader or accessibility tool

Back to top

Lesson Summary

Key Takeaways:

  • HTML layout: Organization and structure of webpage content
  • Semantic elements: header, nav, main, section, article, aside, footer
  • <main>: Use only once per page for primary content
  • <article>: Self-contained, reusable content
  • <section>: Thematic grouping of content
  • <aside>: Tangentially related sidebar content
  • SEO benefits: Better search engine understanding and ranking
  • Accessibility: Screen readers can navigate effectively
  • Maintainability: Self-documenting, easier to understand code
  • Best practice: Use semantic elements instead of divs whenever possible

Semantic HTML creates accessible, SEO-friendly, and maintainable websites. Always choose meaning over generic containers!