HTML <main> Element

Publish in HTML Tutorial el 24/05/2025 16:49

The HTML <main> Element

The <main> element represents the dominant content of the <body> of a document. It should contain content that is unique to that document and not repeated across multiple pages (like navigation links, headers, or footers).

Key characteristics of <main>:

There should be only one <main> element per page
It shouldn't be a descendant of <article>, <aside>, <footer>, <header>, or <nav>
It helps with accessibility by identifying the primary content
It improves SEO by clearly marking your main content

Basic Syntax

Here's how the <main> element is structured in HTML:

Examples of <main> Usage

Example 1: Basic Main Element

A simple page structure with <main> containing the primary content.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Basic Main Example</title>
</head>
<body>
  <header>
    <h2>Website Header</h2>
  </header>
  <main>
    <h1>Welcome to our site</h1>
    <p>This is the main content area where you put your unique content.</p>
  </main>
  <footer>
    <p>© 2023 My Website</p>
  </footer>
</body>
</html>

Example 2: Main with Articles

<main> can contain <article> elements for blog posts or news items.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Blog Example</title>
</head>
<body>
  <nav>
    <a href="/">Home</a> |
    <a href="/about">About</a>
  </nav>
  <main>
    <article>
      <h2>Blog Post Title</h2>
      <p>This is the content of my first blog post.</p>
    </article>
    <article>
      <h2>Another Blog Post</h2>
      <p>Here's another interesting article for you to read.</p>
    </article>
  </main>
</body>
</html>

Example 3: Main with JavaScript Content

Using JavaScript to dynamically update content within the <main> element.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Main Content</title>
</head>
<body>
  <main id="dynamic-content">
    <p>Initial content that will be replaced.</p>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const main = document.getElementById('dynamic-content');
      main.innerHTML = `
        <h1>Content Loaded Dynamically</h1>
        <p>This content was inserted using JavaScript.</p>
        <p>Current time: ${new Date().toLocaleTimeString()}</p>
      `;
    });
  </script>
</body>
</html>

Example 4: Main with Form

A contact form placed within the <main> element.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
</head>
<body>
  <header>
    <h1>Contact Us</h1>
  </header>
  <main>
    <form>
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </div>
      <div>
        <label for="message">Message:</label>
        <input type="text" id="message" placeholder="message">
      </div>
      <button type="submit">Send</button>
    </form>
  </main>
</body>
</html>

Example 5: Main with Tabbed Interface

Using JavaScript to create a tabbed interface within the <main> element.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Tabbed Interface</title>
  <style>
    .tab { display: none; }
    .active { display: block; }
    button { margin: 5px; padding: 5px 10px; }
  </style>
</head>
<body>
  <main>
    <div>
      <button onclick="showTab(1)">Tab 1</button>
      <button onclick="showTab(2)">Tab 2</button>
      <button onclick="showTab(3)">Tab 3</button>
    </div>
    <div id="tab1" class="tab active">
      <h2>First Tab Content</h2>
      <p>This is the content for the first tab.</p>
    </div>
    <div id="tab2" class="tab">
      <h2>Second Tab Content</h2>
      <p>Here's the content for the second tab.</p>
    </div>
    <div id="tab3" class="tab">
      <h2>Third Tab Content</h2>
      <p>Content for the third tab goes here.</p>
    </div>
  </main>
  <script>
    function showTab(tabNumber) {
      // Hide all tabs
      document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
      });
      // Show selected tab
      document.getElementById(`tab${tabNumber}`).classList.add('active');
    }
  </script>
</body>
</html>

Tips and Tricks

Accessibility: The <main> element has an implicit ARIA role of "main", which helps screen readers identify the primary content.
SEO: Search engines give more weight to content within the <main> element.
Styling: You can target the <main> element in CSS with main { /* styles */ }.
Progressive Enhancement: Even if JavaScript fails, your main content will still be accessible.
Single Page Apps: In SPAs, the <main> element is often the target for dynamic content updates.