Home / HTML / Layout

HTML Layout

What is HTML Layout?

HTML layout refers to how content is structured and organized on a web page. A well-designed layout helps users navigate and understand the content. HTML5 introduced semantic elements that make it easier to create structured, meaningful layouts.

Traditional Layout with Div

Before HTML5, layouts were created using <div> elements with class names:

Example - Traditional Div Layout
<div class="header">
    <h1>Website Title</h1>
</div>
<div class="nav">
    <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
</div>
<div class="main">
    <div class="content">
        Main content here
    </div>
    <div class="sidebar">
        Sidebar content
    </div>
</div>
<div class="footer">
    Copyright 2025
</div>

HTML5 Semantic Layout

HTML5 introduced semantic elements that provide meaning to the layout structure:

Example
<header>
    <h1>Website Title</h1>
</header>
<nav>
    <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
</nav>
<main>
    <section>
        <h2>Main Content</h2>
        <article>
            <h3>Article Title</h3>
            <p>Article content...</p>
        </article>
    </section>
    <aside>
        <h3>Sidebar</h3>
        <p>Sidebar content</p>
    </aside>
</main>
<footer>
    <p>Copyright 2025</p>
</footer>

Semantic Layout Elements

<header>

Represents introductory content or navigational aids. Typically contains the site logo, title, and main navigation.

<nav>

Represents a section with navigation links. Use for main navigation menus, table of contents, or pagination.

<main>

Represents the main content of the document. There should only be one <main> per page.

<section>

Represents a standalone section of content, typically with a heading.

<article>

Represents independent, self-contained content that could be distributed separately (e.g., blog post, news article).

<aside>

Represents content aside from the main content (like a sidebar).

<footer>

Represents footer content, typically containing copyright, contact info, or site links.

Complete Layout Example

Example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        header { background-color: #4b3190; color: white; padding: 20px; text-align: center; }
        nav { background-color: #f2f2f2; padding: 10px; }
        nav a { margin: 0 10px; text-decoration: none; color: #4b3190; }
        main { display: flex; padding: 20px; }
        section { flex: 2; padding: 15px; }
        aside { flex: 1; background-color: #f9f9f9; padding: 15px; }
        footer { background-color: #333; color: white; padding: 10px; text-align: center; }
    </style>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>
    <main>
        <section>
            <article>
                <h2>Article Title</h2>
                <p>Article content goes here...</p>
            </article>
        </section>
        <aside>
            <h3>Sidebar</h3>
            <p>Sidebar content</p>
        </aside>
    </main>
    <footer>
        <p>© 2025 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

CSS Layout Techniques

Layouts can be created using various CSS techniques:

CSS Flexbox

Example
<style>
    .container {
        display: flex;
        gap: 20px;
    }
    .item {
        flex: 1;
        padding: 20px;
        background-color: #f0f0f0;
    }
</style>
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

CSS Grid

Example
<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 20px;
    }
    .grid-item {
        padding: 20px;
        background-color: #f0f0f0;
    }
</style>
<div class="grid-container">
    <div class="grid-item">Column 1</div>
    <div class="grid-item">Column 2</div>
    <div class="grid-item">Column 3</div>
</div>

Best Practices

← Div Element Responsive Design →