Элемент <main>

Элемент <main> (от англ. main — основной, главный) используется в качестве контейнера для основного содержимого документа.

На странице может быть только один элемент <main>. Однако спецификация уточняет: «в документе не должно быть больше одного элемента <main>, у которого не указан атрибут hidden». Это означает, что в документе можно иметь и другие элементы <main hidden>. Такая возможность сделана специально для навигации в одностраничных сайтах/приложениях.

Содержимое элемента <main> должно быть уникальным для документа. Он не должен содержать никакого контента, который повторяется в разных документах, например, боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта и поисковые формы.

К допустимым родительским элементам для <main> относятся: <html> (если элемент <body> опущен), <body>, <div>, <form>.

Категории	Потоковое содержимое, явное содержимое.
Синтаксис	`<main>...</main>`
Опускание тегов	Начальный и конечный теги обязательны.
Модель содержимого	Потоковое содержимое.

Атрибуты

Для элемента <main> доступны глобальные атрибуты и события.

Стиль по умолчанию

Стиль по умолчанию для элемента <main>, определённый в спецификации HTML:

main { display: block; }

Примеры

<body>
  <main>
    <h1>Кошки</h1>
    <p>Кошки — один из видов домашних животных.</p>

    <article>
      <h2>Порода «Сиамская кошка»</h2>
      <p>Текст статьи...</p>
    </article>

    <article>
      <h2>Порода «Персидская кошка»</h2>
      <p>Текст статьи...</p>
    </article>
  </main>

  <footer>
    <p>Copyright © 1991 Пример сайта</p>
  </footer>
</body>

Результат

Кошки

Кошки — один из видов домашних животных.

Порода «Сиамская кошка»

Текст статьи...

Порода «Персидская кошка»

Текст статьи...

В следующем примере используются несколько элементов <main> и скрипт, позволяющий осуществлять навигацию без обращения к серверу:

<head>
  <meta charset="utf-8">
  <title>Заголовок страницы</title>
  <script src="spa.js"></script>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#introduction">Введение</a></li>
      <li><a href="#chapter1">Глава 1</a></li>
      <li><a href="#chapter2">Глава 2</a></li>
    </ul>
  </nav>

  <main id="introduction">
    <h1>Введение</h1>
    <p>Остальное содержимое...</p>
  </main>

  <main hidden id="chapter1">
    <h1>Глава 1</h1>
    <p>Остальное содержимое...</p>
  </main>

  <main hidden id="chapter2">
    <h1>Глава 2</h1>
    <p>Остальное содержимое...</p>
  </main>

  <footer>
    <p>Copyright © 1991 Пример сайта</p>
  </footer>
</body>

Результат

Введение
Глава 1
Глава 2

Введение

Остальное содержимое...