DEV Community

Srijan
Srijan

Posted on • Originally published at hackinbits.com

What is the purpose of the <main> tag in HTML?

This post first appeared on hackinbits.com.

The main element represents the main content of the body of a document or application. -w3c

The tag in HTML represents the central topic or core content of the document body. It is a semantic and structural element introduced in HTML5.

<body>
  <!-- Other content such as header, nav -->
  <main>
    <!-- main content of the document body -->
  </main>
  <!-- Other content such as footer -->
</body>
Enter fullscreen mode Exit fullscreen mode

The element is also useful for screen readers to skip the navigation and other irrelevant content and jump directly to the core content of the document.

A document should only contain a single <main> element.

Top comments (1)

Collapse
 
kenbellows profile image
Ken Bellows

Yes! There's a whole ton of "semantic" tags like these that both make your code easier to read and actually help assistive technology to parse the page. Along with <main>, we have <header>, <footer>, <section>, <aside>, and lots of others