HTML-тег <main>
Тег <main> — блочный элемент спецификации HTML5. Он задаёт доминирующее содержимое документа внутри <body>. Содержимое <main> должно быть уникальным и не дублировать повторяющиеся блоки, как шапка сайта, подвал, меню, поиск, копирайт и т.п.
Элемент <main> нельзя вкладывать в <article>, <aside>, <footer>, <header> или <nav>. В документе не должно быть более одного видимого <main> (без атрибута hidden).
Элемент входит в дерево DOM, но не участвует в схематичном контуре документа в отличие от заголовков вроде <h2>.
Вспомогательные технологии используют ориентиры (landmarks) для быстрого перехода к крупным разделам. Рекомендуется применять <main> вместо role="main": роль задаётся неявно.
Пользователи скринридеров могут пропускать повторяющиеся блоки техникой «skipnav». Если добавить к <main> атрибут id, он станет целью ссылки «перейти к основному содержимому».
Синтаксис
Тег <main> парный: содержимое между <main> и </main>.
Пример тега HTML <main>:
HTML-тег <main>
<!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>Результат
Атрибуты
Тег <main> поддерживает глобальные атрибуты и атрибуты событий.
Стилизация тега <main>
main {
padding: 20px;
background-color: #f9f9f9;
}Practice
Каково назначение тега <main> в HTML?