Qarpeo LogoInstitute

<main>

The HTML <main> element signifies the primary content of a document, omitting headers, footers, and sidebars, and improves the semantic organization and accessibility of the document.

<main> Tag

The <main> element defines the primary content of a document or application, focusing on its main purpose.

Syntax

index.html
<main>
  <!-- Main content goes here -->
</main>

<main> Demo

Website Header
About Us

Welcome to our website. We provide valuable content and services.

© 2024 Company Name

index.html
<header>
  <h1>Website Header</h1>
</header>
<main>
  <h2>About Us</h2>
  <p>
    Welcome to our website. We provide valuable content and services.
  </p>
</main>
<footer>
  <p>&copy; 2024 Company Name</p>
</footer>
Only one <main> element should be used per page.

Key Points

  • Purpose: Enhances document structure and accessibility by defining the main content.
  • Usage: The <main> tag should be used once per document, containing the core content while excluding headers, footers, and navigation.
  • Browser Support: Supported across modern browsers, benefiting search engines and assistive technologies.

Usage Notes

  • While the WHATWG standard allows multiple <main> elements, W3C restricts it to one per document.
  • <main> cannot be placed inside <article>, <aside>, <footer>, <header>, or <nav>.
  • The content inside <main> should be unique and should not include repeated elements like sidebars or logos.

See Also

  • Basic Structural Elements:

<html> <head> <body>

  • Section-Related Elements:

<article> <aside> <footer> <header> <nav>

Conclusion

The <main> tag is used to define the primary content of a webpage, making it distinct from other sections like headers, footers, and navigation. It improves accessibility and SEO by highlighting the most important content on the page. Only one <main> element should be used per document, and it cannot be placed inside elements like <article>, <aside>, or <nav>.

<aside>

The HTML <aside> element represents supplementary content, like sidebars or pull quotes, that is related but not essential to the main content, often used for extra information.

<div>

The HTML <div> element serves as a versatile container for grouping and styling content sections, enabling flexible layout and CSS-based styling.