HTML тег `<main>`

Значение и применение

Тег <main> предназначен для основного содержимого документа (основной контент). Контент внутри элемента должен быть уникальным для всего документа и не должен содержать элементы, которые повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских правах, логотип сайта, формы поиска и тому подобное). В документе допускается не более одного <main> без атрибута hidden.

<header></header>

<nav></nav>

<main></main>

<aside></aside>

<footer></footer>

Пример размещения тега <main> на странице.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Смысловые элементы

<header></header>

<nav></nav>

<section></section>

<aside></aside>

<section></section>

<footer></footer>

Только <div>

<div></div>

Расположение блоков одинаковое, но смысловые теги объясняют назначение каждой части страницы.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML "Теги разметки страницы".

Размещайте основное содержимое непосредственно в <body> или в нейтральной обёртке <div>. Элемент не должен находиться внутри <section>, как и внутри перечисленных ниже смысловых областей. Это ориентир основного содержимого для программ экранного доступа; визуальное положение задаёт CSS.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.main
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`main`	✓26	✓12	✓21	✓16	✓7	✓26	✓21	✓14	✓7	✓1.5	✓4.4	✓7

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Примеры, попробуйте сами

Основное содержимое

Измените main. Шапка и подвал остаются за его пределами.

index.html

HTML

<header>Учебный сайт</header>
<main>
  <h1>Справочник</h1>
  <p>Основное содержимое.</p>
</main>
<footer>Контакты редакции</footer>

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".