W3docs
en
Log in

HTML <main> Tag

The tag is used in HTML5 to define the main content of the document. Tag description, attributes and examples.

The <main> tag is a new block-level element in the HTML5 specification. The tag specifies the dominant content of the document's <body>. The content of the <main> tag must be unique and does not duplicate blocks of the same type that are repeated in other documents, such as the header of a site, header, footer, menu, search, copyright information, etc.

The <main> element mustn’t be placed in the <article>, <aside>, <footer>, <header> or <nav> tags. A document must not have more than one <main> tag which does not have a specified hidden attribute.

This element is part of the DOM tree but is excluded from the document outline, unlike heading elements such as <h2> which contribute to it.

Assistive technology can use landmarks for quickly identifying and navigating to the document’s large sections. It is recommended to use the <main> element instead of declaring role="main", as the element implicitly carries that ARIA role.

Assistive technology users can skip large sections of repeated content using the “skipnav” technique. This allows the user to easily access a page’s main content. If you add an id attribute to the <main> element, it will be the target of a skip navigation link.

Syntax

The <main> tag comes in pairs. The content is written between the opening (<main>) and closing (</main>) tags.

Example of the HTML <main> tag:

HTML <main> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>
        Languages HTML and CSS are intended for site layout.
      </p>
      <article>
        <h2>HTML</h2>
        <p>
          HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
        </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>
          CSS is a language of styles, defining the display of HTML documents.
        </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>
Try it Yourself »

Result

main tag example

Attributes

The <main> tag supports the Global Attributes and the Event Attributes.

How to style an HTML <main> Tag

main {
  padding: 20px;
  background-color: #f9f9f9;
}

Practice

Practice

What is the significance and usage of the <main> tag in HTML?