The main tag for main content

Let’s temporarily switch from metadata to content. We are currently designing the structure for our pages at the level of major blocks (introduction, main content, conclusion and so forth), and to do this we need suitable tags.

And the first such tag is the <main> tag. It is used to define the main content of the page. The main content excludes sections which are repeated on other pages, such as header and site logo, site-wide navigation and the footer of the site. Usually only one <main> is used on a single page.

<main>
  Hello, I am the main content! I live only on this page.
</main>

Our website will consist of several pages. Each of them will have a duplicate header and footer, as well as content unique to each page. We will enclose it using <main> tags.

The main page, which we are currently laying out, displays the introductory text. This text will constitute its main content, and it will not be reproduced on other pages. In other words, this text must be enclosed in a <main> tag. <main> will also be used to present other main content on internal pages.

The specification does not allow the use of more than one <main> tag on one page if they do not have the special attribute hidden. This attribute is added to the HTML element, such as, for example, in Single Page Applications to change the content of the page, which makes one or another <main> visible in various application states. The hidden attribute indicates to the browser that the element should not be displayed and used when the content of another element is displayed and used.