The main Element

Learn how to use the <main> element to identify primary content and implement the skip-to-content accessibility pattern for keyboard users.

What it is

The <main> element represents the dominant content of the <body> of a document. It contains content that is directly related to or expands upon the central topic of a page, such as an article, blog post, or search results. Crucially, it excludes repeated site-wide elements like navigation bars, footers, sidebars, and logos.

Mental Model: Think of <main> as the "stage" where the unique performance happens, while everything else (nav, footer) is the "theater building" that stays the same regardless of the show playing.

Related terms include landmark roles, assistive technology (screen readers), and semantic HTML.

Why it matters

• Accessibility: Screen reader users can jump directly to the main content, bypassing repetitive navigation links.
• SEO: Search engines better understand the core topic of your page by identifying the primary content area.
• Keyboard Navigation: Enables the "Skip to Content" link pattern, allowing users to tab past menus quickly.
• Clean Structure: Provides a clear hook for CSS styling without relying on generic <div> wrappers.

Syntax or steps

1. Place exactly one <main> element inside the <body>.
2. Ensure no other structural landmarks (<header>, <footer>, <nav>) are nested inside <main>.
3. Add an id attribute (e.g., id="main-content") to enable linking.
4. Create a hidden-by-default "skip link" at the very top of the body that points to this ID.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #333;
      color: white;
      padding: 8px;
      z-index: 100;
    }
    .skip-link:focus {
      top: 0;
    }
  </style>
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  
  <header>
    <nav><a href="/">Home</a></nav>
  </header>

  <main id="main-content">
    <h1>Welcome to Our Site</h1>
    <p>This is the primary content area.</p>
  </main>

  <footer>
    <p>&copy; 2023 Company Name</p>
  </footer>
</body>
</html>

Explanation: The .skip-link is positioned off-screen until focused via Tab key. When activated, it moves focus to the <main> element with id="main-content", skipping the header and nav entirely.

Common mistakes

• Nesting landmarks: Placing <nav> or <footer> inside <main>. This confuses screen readers about what constitutes "primary" vs. "secondary" content.
• Multiple mains: Using more than one <main> per page. Only one is allowed per document.
• Missing IDs: Forgetting to add an id to <main>, which breaks the skip-to-content anchor link.
• Hiding the skip link permanently: Using display: none prevents keyboard users from ever seeing or using the link. Use positioning instead.

When to use it

Use <main> when you need to define the single most important region of the page for assistive technologies.

Practice

Guided Exercise: Take a simple HTML page with a header, nav, and footer. Wrap the unique content in <main id="content"> and add a skip link at the top of the body pointing to #content. Test by pressing Tab repeatedly.

Challenge: Modify the CSS so the skip link becomes visible only when focused, ensuring high contrast against the background.

Quick check

Q: Can you place a <nav> element inside the <main> element?

A: No. Landmarks should not be nested within each other if they serve different purposes. <nav> belongs outside <main> to allow users to skip it.

Summary

The <main> element is essential for semantic structure and accessibility, marking the unique content of a page. By combining it with a skip-to-content link, you significantly improve the experience for keyboard and screen reader users.