HTML Tutorial

HTML Tag: <main>

What is the <main> tag?

The <main> tag represents the primary content of a web page, excluding navigation, sidebars, and other auxiliary content.

Usage of <main>:

  • Place the <main> tag after the <body> tag and before any other content sections.
  • Wrap all primary content, such as text, images, and videos, within the <main> tag.

Attributes of <main>:

  • id: A unique identifier for the main content.
  • class: One or more space-separated CSS class names to style the main content.
  • role: Accessibility attribute to indicate the role of the main content, typically set to "main".

Examples with <main>:

<body>
  <main>
    <h1>Welcome!</h1>
    <p>This is the main content of the page.</p>
  </main>
</body>

<body>
  <nav>...</nav>

  <main id="content">
    <h1>Title</h1>
    <p>Content...</p>
  </main>

  <aside>...</aside>
</body>

Exploring the <main> tag:

  1. Open an HTML page in a text editor.
  2. Add the <body> and <main> tags as shown in the examples above.
  3. Place your primary content inside the <main> tag.
  4. Save and open the HTML file in a browser to view the result.

Accessibility:

The <main> tag helps assistive technologies, such as screen readers, easily identify the most important content on a page. By using the role="main" attribute, you can improve the accessibility of your web page for users with disabilities.