HTML
main tag


The <main> tag in HTML is used to define the primary content of a webpage. This content is unique to the page and excludes elements that repeat across pages like headers, footers, sidebars, and navigation menus. The <main> tag improves accessibility by helping assistive technologies (like screen readers) and search engines understand where the core content of the page begins and ends.

Key Characteristics:

  • Semantic: The <main> element provides semantic meaning to the structure of a page by indicating where the main content resides.
  • Accessibility: Assistive technologies can quickly skip to the main content, enhancing navigation for users with disabilities.
  • One per Page: Only one <main> element should be used per page, as it represents the main content. It should not be nested within other content sectioning elements like <article>, <aside>, <header>, or <footer>.

Example:

<!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 Header</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <h2>Welcome to My Website</h2> <p>This is the main content of the page. It contains important information specific to this webpage.</p> </main> <footer> <p>Footer content goes here.</p> </footer> </body> </html>

Key Points:

  • Primary Content: The content inside the <main> tag should be unique to the page and critical for its purpose.
  • Does Not Contain: The <main> element should not include content like headers, footers, sidebars, or other elements that are repeated across pages.
  • Browser Support: All modern browsers support the <main> tag, and it is recognized by screen readers for better accessibility.

In essence, the <main> tag is a semantic element that identifies the main content of a web page, making it an essential tool for structuring HTML documents, improving accessibility, and providing a clear structure for SEO.