<main>

В блоке <main> лежит главное содержимое страницы: тот основной и уникальный контент, который относится к главной теме страницы.

        
          
          <header>Сайт об архитекторах Санкт-Петербурга</header><main>  <h1>Несколько фактов о Растрелли</h1>  <p>Франческо Растрелли — российский архитектор итальянского происхождения.</p>  <p>Он был ярким представителем елизаветинского барокко.</p></main><footer>Подписывайтесь на нас в Инстаграме</footer>
          <header>Сайт об архитекторах Санкт-Петербурга</header>

<main>
  <h1>Несколько фактов о Растрелли</h1>
  <p>Франческо Растрелли — российский архитектор итальянского происхождения.</p>
  <p>Он был ярким представителем елизаветинского барокко.</p>
</main>

<footer>Подписывайтесь на нас в Инстаграме</footer>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тег <main> помогает собрать самую важную информацию на странице в одном контейнере. <main> — один из ориентиров (landmark), к которому скринридер может удобно перейти. Также <main> считают основным содержимым встроенные в браузеры режимы для чтения: они отбрасывают ваши стили и прячут всё остальное, кроме главного контента.

В <main> помещают главное содержимое — то, которое больше нигде не повторяется на сайте. Соответственно, второстепенные элементы сюда не входят: шапка сайта, подвал, боковые панели, ссылки навигации, информация об авторских правах, логотипы сайта и поисковые формы, как правило, остаются вне контейнера <main>.

Единственный случай, когда поисковую форму стоит положить в <main> —  это когда она является главным элементом на странице, например, на странице поиска.

На странице может быть только один <main>. Однако спецификация уточняет:

В документе не должно быть больше одного <main>, у которого нет атрибута hidden

Получается, что можно иметь и другие <main hidden>, но это равносильно тому, что их не будет на странице. Это исключение сделано специально для навигации в одностраничных приложениях (SPA).

Этот тег парный, обязательно закрывать его с помощью </main>.

У <main> нет своих атрибутов: к нему можно применить все глобальные атрибуты.

        
          
          <header>  Бургерочная «Минутка»</header><main>  <h1>О команде</h1>  <p>Мы готовим бургеры с 2011 года. Это долго.</p></main>
          <header>
  Бургерочная «Минутка»
</header>
<main>
  <h1>О команде</h1>
  <p>Мы готовим бургеры с 2011 года. Это долго.</p>
</main>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку "На практике" Скопировано

Дока Дог советует

Скопировать ссылку "Дока Дог советует" Скопировано

🛠 С виду <main> — это обычный <div>, но он семантически более важен для поисковиков. Обычно это блок, в котором расположен самый основной и важный блок страницы, чтобы поисковик индексировал его с повышенным приоритетом.

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Тег <main> появился в HTML не так давно. Поэтому даже опытные разработчики не всегда понимают его предназначение и не добавляют его в код.

Я всегда оборачиваю в этот тег всё, кроме <header>, <footer> и <aside>. Таким образом поисковый робот быстрее найдёт основную информацию на сайте и лучше его проиндексирует.

+ Развернуть