Элемент main представляет основное содержимое веб-страницы. Он представляет уникальный контент, в который не следует включать повторяющиеся на разных веб-страницах элементы сайдбаров, навигационные ссылки, информацию о копирайте, логотипы и тому подобное.
Используем элемент main:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Семантическая разметка в HTML5</title> </head> <body> <main> <h1>Модели на Snapdragon 808</h1> <p>Смартфоны, оснащенные процессором Snapdragon 808</p> <article> <h2>Google Nexus 5X</h2> <p>Nexus 5X представляет компактное и надежное устройство для решения повседневных задач. Оснащенный 5,2-дюймовым экраном и шестиядерный процессор Snapdragon 808...</p> </article> <article> <h2>Microsoft Lumia 950</h2> <p>С помощью Microsoft Display Dock ваш смартфон Lumia 950 Dual SIM с внешним монитором, клавиатурой и мышью превращается в полноценный компьютер...</p> </article> </main> </body> </html>
Не стоит думать, что абсолютно все содержимое надо обязательно помещать в элемент main. Нет мы также можем использовать вне его другие элементы, например, header и footer:
<body> <header> .............. </header> <main> ................. </main> <footer> ................. </footer> </body>
Однако надо помнить, что элемент main не может быть вложенным в такие элементы, как article, aside, footer, header, nav. Кроме того, на веб-странице допустимо наличие только одного элемента main.
Также стоит отметить, что на данный момент есть небольшие проблемы с поддержкой этого элемента в браузерах. В частности, IE 11 не поддерживает данный элемент (в остальных браузерах полная поддержка), поэтому в этом случае стоит использовать атрибут роли:
<main role="main"> ... </main>
Указание роли позволит IE11 и более старшим версиям IE должным образом интерпретировать элемент.