HTML Layout & Sections

Semantic Sectioning Elements

HTML5 introduced several semantic elements that define different parts of a web page. These elements make your HTML more readable and help with accessibility and SEO.

Image source: W3Schools. © W3Schools. Used with permission.

Semantic elements clearly describe their meaning to both the browser and the developer. Examples include:

<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<main> - Specifies the main content of a document
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section

The <header> Element

The <header> element represents a container for introductory content or a set of navigational links.


<header>
    <h1>Site Title</h1>
    <p>Site tagline or description</p>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

A <header> typically contains:

One or more heading elements (<h1> - <h6>)
Logo or icon
Authorship information
Navigation menu (often wrapped in a <nav> element)

You can have multiple <header> elements in one document. However, a <header> cannot be placed within a <footer>, <address> or another <header> element.

The <nav> Element

The <nav> element defines a set of navigation links. It should be used only for major navigation blocks.


<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Not all links in a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Typically, the <footer> element often has a list of links that don't need to be in a <nav> element.

The <main> Element

The <main> element specifies the main content of a document. The content inside the <main> element should be unique to the document and should not include content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.


<main>
    <h1>Most Popular Browsers</h1>
    <p>Chrome, Firefox, and Edge are the most used browsers today.</p>
    
    <article>
        <h2>Google Chrome</h2>
        <p>Google Chrome is a web browser developed by Google, released in 2008.</p>
    </article>
    
    <article>
        <h2>Mozilla Firefox</h2>
        <p>Mozilla Firefox is an open-source web browser developed by Mozilla.</p>
    </article>
</main>

There must not be more than one <main> element in a document. The <main> element must not be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

The <section> Element

The <section> element defines a section in a document. According to the HTML5 documentation, "a section is a thematic grouping of content, typically with a heading."


<section>
    <h2>WWF History</h2>
    <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment.</p>
</section>

<section>
    <h2>WWF's Mission</h2>
    <p>The World Wide Fund for Nature (WWF) mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</section>

A website could normally be split into sections for introduction, content, and contact information. It's a good practice to use heading elements to define the theme of a section.

The <article> Element

The <article> element specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.


<article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008.</p>
</article>

<article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla.</p>
</article>

Examples of where an <article> element can be used:

Forum posts
Blog posts
News stories
Product cards
User-submitted comments

The <aside> Element

The <aside> element defines content that is tangentially related to the content around it. It is often presented as a sidebar or callout box.


<p>My family and I visited The Epcot center this summer.</p>

<aside>
    <h4>Epcot Center</h4>
    <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

The <aside> element can be used for:

Sidebars
Pull quotes
Advertising
Groups of navigation elements
Other content that is considered separate from the main content

The <footer> Element

The <footer> element defines a footer for a document or section. A <footer> typically contains authorship information, copyright information, contact information, sitemap, back to top links, and related documents.


<footer>
    <p>Author: John Doe</p>
    <p><a href="mailto:john@example.com">john@example.com</a></p>
    <p>© 2023 My Website. All rights reserved.</p>
</footer>

You can have several <footer> elements in one document. A <footer> element cannot be placed within a <header>, <address> or another <footer> element.

Common Layout Patterns

Basic Page Layout


<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <!-- Navigation links -->
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Section Title</h2>
            <p>Section content...</p>
        </section>
        
        <section>
            <h2>Another Section</h2>
            <p>More content...</p>
        </section>
    </main>
    
    <footer>
        <p>© 2023 My Website</p>
    </footer>
</body>

Two-Column Layout with Sidebar


<body>
    <header>
        <!-- Header content -->
    </header>
    
    <div class="container">
        <main>
            <article>
                <!-- Main content -->
            </article>
        </main>
        
        <aside>
            <!-- Sidebar content -->
        </aside>
    </div>
    
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Blog Post Layout


<body>
    <header>
        <!-- Site header -->
    </header>
    
    <main>
        <article>
            <header>
                <h1>Blog Post Title</h1>
                <p>Posted on <time datetime="2023-04-21">April 21, 2023</time> by Author</p>
            </header>
            
            <section>
                <!-- Post content -->
            </section>
            
            <footer>
                <!-- Post tags, categories, etc. -->
            </footer>
        </article>
        
        <aside>
            <!-- Related posts, categories, etc. -->
        </aside>
    </main>
    
    <footer>
        <!-- Site footer -->
    </footer>
</body>

Best Practices for Layout & Sections

Use semantic elements to structure your content appropriately
Don't use semantic elements just for styling purposes
Use <div> elements when no other semantic element is appropriate
Include headings in sections and articles to define their theme
Ensure your layout is accessible by using proper heading hierarchy
Use the <main> element only once per page
Nest elements appropriately according to the HTML5 specification
Use CSS for layout styling, not HTML table elements
Test your layout on different screen sizes to ensure responsiveness