Skip to content
finote

02. Layout Tags

Introduction

Section titled “Introduction”

HTML5 introduced semantic layout elements that describe the structure and purpose of different sections of a web page. These elements replace generic <div> containers with meaningful tags that help browsers, search engines, and assistive technologies understand page structure. Using layout tags creates more accessible, maintainable, and SEO-friendly websites.

Core Layout Elements

Section titled “Core Layout Elements”
Section titled “header”

Site or section header:

<header>
    <h1>Site Title</h1>
    <nav>Navigation</nav>
</header>
Section titled “nav”

Navigation links:

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

main

Section titled “main”

Main content area:

<main>
    <article>
        <h1>Article Title</h1>
        <p>Content...</p>
    </article>
</main>

article

Section titled “article”

Independent, self-contained content:

<article>
    <h1>Blog Post Title</h1>
    <p>Post content...</p>
</article>

section

Section titled “section”

Thematic grouping:

<section>
    <h2>Introduction</h2>
    <p>Content...</p>
</section>

aside

Section titled “aside”

Sidebar or complementary content:

<aside>
    <h2>Related Articles</h2>
    <ul>...</ul>
</aside>
Section titled “footer”

Site or section footer:

<footer>
    <p>&copy; 2024 My Site</p>
</footer>

Complete Layout Example

Section titled “Complete Layout Example”
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout Example</title>
</head>
<body>
    <header>
        <h1>Site Title</h1>
        <nav>Navigation</nav>
    </header>
    <main>
        <article>
            <header>
                <h1>Article Title</h1>
            </header>
            <section>
                <h2>Section 1</h2>
                <p>Content...</p>
            </section>
        </article>
        <aside>
            <h2>Sidebar</h2>
            <p>Related content...</p>
        </aside>
    </main>
    <footer>
        <p>Footer content</p>
    </footer>
</body>
</html>

Best Practices

Section titled “Best Practices”

One main Per Page

Section titled “One main Per Page”

Use only one <main> element per page:

<body>
    <header>...</header>
    <main>Main content</main>
    <footer>...</footer>
</body>

Proper Nesting

Section titled “Proper Nesting”

Maintain logical hierarchy:

<article>
    <header>Article header</header>
    <section>Article section</section>
    <footer>Article footer</footer>
</article>

References

Section titled “References”