HTML Layout Elements

Construct organized page architectures utilizing HTML5 meaningful structural components

Contemporary websites arrange material across multi-column presentations resembling print publications. HTML5 introduces contextual elements defining distinct page regions, producing more comprehensible and accessible markup patterns.

What is HTML Layout?

HTML layout elements help you structure your web page into logical sections. Instead of using generic div elements everywhere, HTML5 provides semantic elements that clearly describe their purpose.

HEADER
NAV
SECTION
ARTICLE
ASIDE
FOOTER

HTML Semantic Layout Elements

HTML5 introduced semantic elements that clearly describe their meaning to both the browser and the developer:

  • header: Defines a header for a document or section
  • nav: Defines a set of navigation links
  • main: Specifies the main content of a document
  • section: Defines a section in a document
  • article: Defines independent, self-contained content
  • aside: Defines content aside from the main content (sidebar)
  • footer: Defines a footer for a document or section

HTML Header Element

The header element represents introductory content or a set of navigational links. It typically contains:

  • One or more heading elements (h1 - h6)
  • Logo or site name
  • Search form
  • Navigation menu

Example

<header>
    <h1>My Website</h1>
    <p>Welcome to my awesome website</p>
</header>

Note:

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

HTML Nav Element

The nav element defines a set of navigation links. Not all links should be inside a nav element - only major navigation blocks.

Example

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

HTML Main Element

The main element specifies the main content of a document. The content should be unique and not repeated across documents (like sidebars, navigation, copyright info, etc.).

Example

<main>
    <h1>Page Title</h1>
    <p>This is the main content of the page.</p>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>

Important:

There should be only ONE main element per page, and it should not be a descendant of article, aside, footer, header, or nav elements.

HTML Section Element

The section element defines a section in a document. A section is a thematic grouping of content, typically with a heading.

Example

<section>
    <h2>About Us</h2>
    <p>We are a company dedicated to excellence...</p>
</section>

<section>
    <h2>Our Services</h2>
    <p>We offer the following services...</p>
</section>

HTML 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.

Examples of where article can be used:

  • Blog posts
  • Forum posts
  • News stories
  • Comments
  • Product cards

Example

<article>
    <h2>Getting Started with HTML</h2>
    <p>Posted on January 1, 2024</p>
    <p>HTML is the foundation of web development...</p>
</article>

<article>
    <h2>CSS Basics</h2>
    <p>Posted on January 5, 2024</p>
    <p>Learn how to style your web pages...</p>
</article>

HTML Aside Element

The aside element defines content aside from the main content (like a sidebar). The aside content should be indirectly related to the surrounding content.

Example

<main>
    <article>
        <h2>Main Article</h2>
        <p>Main content here...</p>
    </article>

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

HTML 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
  • Related documents

Example

<footer>
    <p>Copyright 2024 My Website</p>
    <p>Contact: info@mywebsite.com</p>
    <nav>
        <a href="/privacy">Privacy Policy</a> |
        <a href="/terms">Terms of Service</a>
    </nav>
</footer>

Note:

You can have several footer elements in one document. For example, you can have a footer in an article as well as a page footer.

Complete Layout Example

Here is a complete example using all semantic layout elements:

Example - Full Page Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>

    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Featured Articles</h2>

            <article>
                <h3>Article Title 1</h3>
                <p>Article content...</p>
            </article>

            <article>
                <h3>Article Title 2</h3>
                <p>Article content...</p>
            </article>
        </section>

        <aside>
            <h3>Sidebar</h3>
            <p>Additional information...</p>
        </aside>
    </main>

    <footer>
        <p>© 2024 My Website. All rights reserved.</p>
    </footer>

</body>
</html>

CSS Layout Techniques

While HTML provides the structure, CSS is used to style and position layout elements. Here are common CSS techniques for layouts:

CSS Flexbox

Modern one-dimensional layout system for rows or columns:

.container {
    display: flex;
    gap: 20px;
}

.main-content {
    flex: 1;
}

.sidebar {
    width: 300px;
}

CSS Grid

Two-dimensional layout system for complex layouts:

.container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: 20px;
}

CSS Floats

Traditional technique (now less common):

.sidebar {
    float: left;
    width: 25%;
}

.main-content {
    float: right;
    width: 75%;
}

CSS Frameworks

Popular frameworks that provide ready-made layouts:

  • Bootstrap
  • Tailwind CSS
  • Foundation
  • Bulma

Layout Best Practices

  • Use semantic elements: Use header, nav, main, section, article, aside, and footer instead of divs
  • One main per page: Each page should have exactly one main element
  • Meaningful nesting: Structure elements logically (e.g., articles within sections)
  • Accessibility first: Semantic elements improve screen reader navigation
  • Mobile-first design: Design for mobile devices first, then scale up
  • Use CSS for styling: Keep HTML for structure, CSS for presentation
  • Consistent structure: Use similar layouts across pages for familiarity
  • Test responsiveness: Ensure layout works on all screen sizes

Semantic vs Non-Semantic Elements

Compare semantic and non-semantic approaches:

Non-Semantic (Bad)

<div id="header">
    <div id="nav">...</div>
</div>
<div id="main">
    <div class="article">...</div>
</div>
<div id="footer">...</div>

Semantic (Good)

<header>
    <nav>...</nav>
</header>
<main>
    <article>...</article>
</main>
<footer>...</footer>

Benefits of semantic HTML:

  • Better accessibility for screen readers
  • Improved SEO (search engines understand structure)
  • Easier to read and maintain code
  • More meaningful to other developers

Accessibility Best Practices for Layout

When using div elements and creating layouts, accessibility should be a top priority. Here are important practices to follow:

When to Use Div vs Semantic Elements

Using Div Correctly

<!-- Good: Div for styling wrapper -->
<div class="container">
    <header>...</header>
    <main>...</main>
</div>

<!-- Good: Div for grid layout -->
<div class="grid">
    <article>...</article>
    <article>...</article>
</div>

Using Div Incorrectly

<!-- Bad: Using div instead of semantic elements -->
<div class="header">...</div>  <!-- Use header -->
<div class="navigation">...</div>  <!-- Use nav -->
<div class="main-content">...</div>  <!-- Use main -->
<div class="sidebar">...</div>  <!-- Use aside -->
<div class="footer">...</div>  <!-- Use footer -->

Adding ARIA Landmarks to Divs

If you must use div elements for layout sections, add ARIA landmark roles to improve accessibility:

Example - ARIA Roles

<!-- When semantic elements are not possible -->
<div role="banner">
    <!-- Header content -->
</div>

<div role="navigation">
    <!-- Navigation content -->
</div>

<div role="main">
    <!-- Main content -->
</div>

<div role="complementary">
    <!-- Sidebar content -->
</div>

<div role="contentinfo">
    <!-- Footer content -->
</div>

Important:

Using semantic HTML elements is always better than using div with ARIA roles. Only use ARIA roles when semantic elements are not possible.

Accessibility Checklist for Layouts

  • Use semantic elements first: Always prefer header, nav, main, article, aside, footer over divs
  • Provide skip links: Allow keyboard users to skip navigation and jump to main content
  • Use proper heading hierarchy: Use h1-h6 in order (h1, then h2, then h3, etc.)
  • Add ARIA landmarks sparingly: Only when semantic HTML is not possible
  • Label regions: Use aria-label or aria-labelledby to name landmark regions
  • Test with screen readers: Verify navigation works with NVDA, JAWS, or VoiceOver
  • Ensure keyboard navigation: All interactive elements should be accessible via keyboard
  • Maintain logical tab order: Tab order should follow visual layout

Skip Navigation Links

Skip links help keyboard and screen reader users bypass repetitive navigation:

Example - Skip Link

<body>
    <!-- Skip link (hidden until focused) -->
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <header>
        <nav>
            <!-- Navigation with many links -->
        </nav>
    </header>

    <main id="main-content">
        <!-- Main content starts here -->
    </main>
</body>

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}
</style>

Labeling Landmark Regions

When you have multiple landmarks of the same type, label them for clarity:

Example - Labeled Regions

<!-- Multiple navigation regions -->
<nav aria-label="Main navigation">
    <!-- Primary navigation -->
</nav>

<nav aria-label="Footer navigation">
    <!-- Footer links -->
</nav>

<!-- Multiple aside regions -->
<aside aria-label="Related articles">
    <!-- Related content -->
</aside>

<aside aria-label="Advertisement">
    <!-- Ad content -->
</aside>

💡 Accessibility Summary

The Golden Rule:

Use div only for styling and layout purposes. For content structure, always use semantic HTML elements (header, nav, main, article, aside, footer). This makes your website accessible to all users, including those using assistive technologies.

Test Your Knowledge