Layout Elements

Structure your portfolio pages with HTML5 layout elements that create organized sections for headers, navigation, content, and footers.

Remember when websites used <table> tags for everything? Those days are long gone. Modern HTML gives us specific elements that describe what each part of our page actually does. A header is a header. Navigation is navigation. Content lives in its own section. Alex wants to reorganize their portfolio with proper layout structure. Right now everything sits in one big blob of HTML. But real websites have distinct areas - a top banner, navigation menu, main content, sidebar information, and footer links.

The Big Five Layout Elements

HTML5 introduced five major elements that replace the generic <div> soup we used to write. Each one has a specific job:

<header>

Site title, logo, main navigation. Usually at the top.

<nav>

Navigation links. Can be in header or standalone.

<main>

Primary content. Only one per page.

<footer>

And there's a fifth one - <aside> - for sidebar content that's related but not essential. Think of it as the "oh, and one more thing" section.

Visual Structure

Here's how these elements typically nest together in a real webpage:

    <header> - Site title, logo, main navigation
  

    <nav> - Navigation menu (can be inside header)
  

      <main> - Primary content goes here
    

      <aside> - Sidebar info
    

    <footer> - Copyright, links, contact
  

This isn't just visual organization. Screen readers use these elements to help users jump between sections. Search engines understand your content structure better. And your CSS becomes much cleaner.

Building Alex's Portfolio Structure

Let's rebuild Alex's homepage with proper layout elements. No more guessing what each <div> actually contains:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alex Chen - Web Developer</title>
</head>
<body>
    <!-- Main site header with branding -->
    <header>
        <h1>Alex Chen</h1>
        <p>Full Stack Web Developer</p>
    </header>

    <!-- Site navigation menu -->
    <nav>
        <a href="index.html">Home</a>
        <a href="projects.html">Projects</a>
        <a href="blog.html">Blog</a>
        <a href="contact.html">Contact</a>
    </nav>

    <!-- Primary page content -->
    <main>
        <h2>Welcome to my portfolio</h2>
        <p>I build modern web applications using HTML, CSS, and JavaScript. 
           Currently learning React and Node.js.</p>
        
        <h3>Recent Projects</h3>
        <p>Check out my latest work on the projects page.</p>
    </main>

    <!-- Site footer with secondary info -->
    <footer>
        <p>© 2024 Alex Chen. Built with HTML5.</p>
    </footer>
</body>
</html>

What just happened?

Each section now has semantic meaning. The header contains Alex's name and title. Navigation sits in its own <nav> element. Main content lives in <main>. Try this: Right-click and "View Source" to see the clean structure.

Navigation Inside Header

Many sites put navigation inside the header element. Both approaches work perfectly:

<!-- Navigation as part of the header -->
<header>
    <h1>Alex Chen</h1>
    <p>Web Developer</p>
    
    <!-- Nav menu inside header -->
    <nav>
        <a href="index.html">Home</a>
        <a href="projects.html">Projects</a>
        <a href="contact.html">Contact</a>
    </nav>
</header>

<main>
    <h2>About Me</h2>
    <p>I love building things for the web.</p>
</main>

Apple does this on their website. GitHub too. The navigation becomes part of the header banner rather than a separate section.

Adding Sidebar Content

The <aside> element handles sidebar content. It's for information that's related to your main content but not essential. Profile info, recent posts, advertisements, or quick links. Alex wants to add a sidebar with contact information and recent blog posts:

<header>
    <h1>Alex Chen</h1>
    <nav>
        <a href="index.html">Home</a>
        <a href="blog.html">Blog</a>
    </nav>
</header>

<!-- Main content area -->
<main>
    <h2>Latest Blog Post</h2>
    <p>Learning CSS Grid changed how I think about layouts. 
       Here are five techniques that improved my workflow.</p>
</main>

<!-- Sidebar with related info -->
<aside>
    <h3>Quick Contact</h3>
    <p>Email: alex@example.com</p>
    
    <h3>Recent Posts</h3>
    <ul>
        <li>CSS Grid Tips</li>
        <li>JavaScript Arrays</li>
        <li>HTML Semantics</li>
    </ul>
</aside>

The sidebar appears after main content in the HTML flow. With CSS, you'll position it to the side. Screen readers can skip it easily since it's marked as supplementary content.

Complete Page Structure

Here's a full example showing all layout elements working together. This is how professional sites organize their HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alex Chen - Projects</title>
</head>
<body>
    <!-- Site header with branding and nav -->
    <header>
        <h1>Alex Chen</h1>
        <nav>
            <a href="index.html">Home</a>
            <a href="projects.html">Projects</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header>

    <!-- Primary content -->
    <main>
        <h2>My Projects</h2>
        
        <h3>Weather App</h3>
        <p>Built with vanilla JavaScript and OpenWeather API.</p>
        
        <h3>Task Manager</h3>
        <p>React app with local storage persistence.</p>
    </main>

    <!-- Sidebar info -->
    <aside>
        <h3>Technologies</h3>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
        </ul>
    </aside>

    <!-- Site footer -->
    <footer>
        <p>© 2024 Alex Chen</p>
        <p>Built with semantic HTML</p>
    </footer>
</body>
</html>

What just happened?

Every section has semantic meaning. Screen readers can jump from header to main content to footer. Search engines understand the page structure. CSS can target each area precisely. Try this: Use browser dev tools to inspect each element.

Common Mistakes

Multiple main elements

Only use one <main> per page. It represents the primary content. If you need multiple content sections, use <section> elements inside main.

Nesting layout elements incorrectly

Don't put <header> inside <main>. Header comes before main, not inside it. The structure should be header → main → footer at the same level.

Using layout elements for styling

Don't choose layout elements because of how they look. Choose them based on meaning. A <header> contains header information, even if you style it to appear at the bottom.

Think of layout elements as labels for the different rooms in your house. The kitchen is for cooking, the bedroom for sleeping, the living room for gathering. Browsers and assistive technologies use these labels to understand your content. Twitter uses <main> for the tweet feed, <aside> for trending topics, and <nav> for the main menu. Airbnb puts search filters in <aside> and listings in <main>. Same principle everywhere. Your HTML now has meaning beyond just text and links. Each section has a job. And when you add CSS later, targeting these sections becomes much cleaner than hunting through dozens of generic <div> elements.

Quiz

Audio and Video

Add multimedia content to Alex's portfolio with native HTML5 audio and video elements that work across all browsers.

← Previous Course Index Next →