HTML тег <main>
Тег <main> — новый блочный элемент в спецификации HTML5, который предназначен для размещения основного контента документа. Содержимое тега <main> должно быть уникальным и не дублировать однотипные блоки, которые повторяются в других документах, таких как шапка сайта (header), нижний колонтитул (footer), меню, форма поиска, информация об авторских правах и т.д.
Элемент <main> не должен быть вложен в теги <article>, <aside>, <footer>, <header> или <nav>. В одном документе допускается использование одного тега <main>.
Синтаксис
Содержимое тега размещается между открывающим (<main>) и закрывающим (</main>) тегами.
HTML <main> Tag
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</main>
More «Try it Yourself» examples below.
Definition and Usage
The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
Тег main в html для чего нужен
HTML-элемент <main> предназначен для основного контента (содержимого) <body> документа (страницы). Основной контент состоит из контента, который непосредственно относится к главной теме документа или её развивает.
Интерактивный пример
Документ не должен иметь более одного элемента <main> у которого не указан атрибут hidden .
| Категории контента | Основной поток, явный контент. |
|---|---|
| Допустимое содержимое | Основной поток. |
| Пропуск тегов | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. |
| Допустимые родители | Те, в которых разрешается контент основного потока в качестве содержимого, но только если это иерархически корректный main элемент. |
| Допустимые ARIA-роли | Роль main применяется к <main> по умолчанию, и роль presentation также разрешена. |
| DOM-интерфейс | HTMLElement |
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Примечание
Содержимое элемента <main> должно быть уникальным для документа. Содержимое, которое повторяется в наборе документов или разделах документа, такое как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайта и поисковые формы, не должно добавляться, за исключением формы поиска, если она является основной функцией страницы.
<main> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как <body> , заголовков, таких как <h2> (en-US) и т.п., <main> не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.
Пример
Результат
Проблемы доступности
Ориентир
Элемент <main> ведёт себя как роль-ориентир main (en-US) . Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации и навигации по большим разделам документа. Предпочтительно использовать элемент <main> вместо объявления role=»main» , если не нужна поддержка старых браузеров.
Пропуск навигации
Пропуск навигации, также известный как «skipnav», это техника которая позволяет пользователю вспомогательных технологий совершать быстрый обход больших разделов повторяющегося контента (главная навигация, информационные баннеры и т.д.). Это позволяет пользователю получить доступ к основному контенту страницы быстрее.
Добавление атрибута id в элемент <main> позволяет ему становится целью для ссылки пропуска навигации.
Режим чтения
Функционально режим чтения браузера будет искать наличие элемента <main> , а также элементов заголовка и секционных элементов, которые преобразовывают контент в специальный вид для чтения.
Спецификации
| Specification |
|---|
| HTML Standard # the-main-element |
Поддержка браузерами
BCD tables only load in the browser
Элемент <main> широко поддерживается. Для Internet Explorer 11 и ниже предлагается добавить роль ARIA «main» в элемент <main> , чтобы обеспечит его доступность (программы для чтения с экрана, такие как JAWS, используемые совместно со старыми версиями Internet Explorer, смогут понять семантическое значение элемента <main> после добавления атрибута role ).
Как использовать семантические теги HTML5?
Правильно сверстанный сайт будет лучше ранжироваться поисковыми роботами и с большей вероятностью попадет на первые страницы поисковых систем.
И если для вас это важно, то предлагаю почитать статью, в которой я объясню, как использовать семантические теги.
Что такое семантические теги
Это теги, которые предназначены для того, чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.) понимали, какой тип информации заложен в данных тегах.
Проще говоря, это как таблички в супермаркетах, которые указывают, где и какой находится отдел. Таким образом клиент быстрее найдет то, что ему нужно.
И если на вашем сайте будут такие же правильно расставленные таблички в виде тегов, поисковым роботам не составит труда найти информацию, которую запросил пользователь, и вывести в результат именно ваш сайт.
Семантика HTML относится к синтаксису, который делает HTML более понятным за счет лучшего определения различных разделов и макета веб-страниц. Она делает веб-страницы более информативными, позволяя браузерам и поисковым системам лучше ориентироваться на сайте.
Список новых тегов в HTML5
Если вдруг вы еще не знакомы с новыми тегами HTML5, предлагаю быстренько пробежаться и познакомиться
- <main> – используется для определения основного контента страницы. Он дает понять поисковому боту, что здесь содержится главный контент.
- <header> – «шапка» страницы или раздела, в которой обычно располагается навигация по сайту. Но так же этот тег можно использовать в других секция сайта, определяя в нем заголовок этой самой секции.
- <nav> – задает навигацию по сайту.
- <section> – обычно применяется для группировки разделов. Например, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
- <article> – может быть пост на форуме, статья в журнале или газете, заметка в блоге, сообщение пользователя или другая независимая контент-единица.
- <aside> – определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.
- <audio> – добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.
- <video> – добавляет, воспроизводит и управляет настройками видеозаписи на веб-странице.
- <canvas> – создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
- <footer> – задает «подвал» сайта или раздела, в нем может располагаться имя автора, дата документа, контактная информация или дополнительная навигация по сайту.
- <command> – устанавливает команду, срабатывающую при активации элемента (нажатием или сочетанием клавиш). Элемент может иметь вид кнопки, переключателя или флажка и должен быть вложен в элемент <menu>, в противном случае он не будет показан.
- <datalist> – создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.
- <details> – используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.
- <embed> – используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
- <hgroup> – используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>.
- <keygen> – отвечает за генерацию пары ключей (открытый и закрытый), которые используются для шифрования и расшифровки данных форм, а также для создания и проверки цифровой подписи. Открытый ключ отправляется на сервер вместе с данными формы, а закрытый сохраняется на локальном устройстве пользователя.
- <mark> – помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.
- <meter> – используется для вывода значения в некотором известном диапазоне. Используется преимущественно для отображения числовых значений: например, количества результатов поиска, объема жидкости, давления и др.
- <output> – определяет область, в которую выводится информация, преимущественно с помощью скриптов.
- <progress> – используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.
- <ruby> – используется вместе с <rt> и <rp>. Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.
- <time> – помечает текст внутри тега <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time> либо задаваться через атрибут datetime.
- <wbr> — указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.
Как использовать семантические теги
На самом деле ничего сложного в использовании нет, главное – применять теги там, где они будут лучше всего отражать суть контента.
Например, <div> и <span> являются не семантическими элементами. Они ничего не говорят нам об их содержании. Но <form>, <table> и <article> – это семантические элементы: они четко определяют свое содержание.
Давайте разберем простой пример:
Если внимательнее изучить структуру, вроде как понятно, что <div> c id header – это шапка сайта, <div> c id footer – это подвал сайта и т.д. Но к сожалению, такая структура будет понятна только разработчику и бесполезна для поисковых ботов. Для них это всего лишь кусок текста, который не несет никакого смысла.
Чтобы исправить ситуацию, давайте сверстаем страницу, используя семантические теги.
Тут картина меняется сразу. Мы можем без труда и без каких-либо дополнительных атрибутов определить содержимое страницы. Теги <header>, <main> и <footer> четко разделили контент и не только повысили читаемость кода, но также расставили те самые “магазинные таблички”, которые будут направлять поисковых ботов по нужным разделам.
Ну или например блок статьи.
Тут даже без особых знаний верстки можно сразу определить, что это за блок и какая у него роль. И теперь вам не нужно добавлять атрибут id или class, чтобы хоть как-нибудь обозначить элемент на странице.
И напоследок давайте пройдемся по некоторым тегам, к которыми могут возникнуть вопросы.
Теги <article> и <section>
Возможно, у вас сразу возник вопрос: “В чем разница между этими тегами?”
<section> – смысловой или логический раздел документа;
<article> – самостоятельный и независимый раздел документа.
Оба служат для разделения контента путем группировки логически связанных элементов и могут использоваться как взаимозаменяемые. Вопрос только в том, в какой ситуации.
Если в пример взять статью, то обычно используют теги в таком порядке
То есть блок <article> будет независимым и может использоваться в любом месте, но секции в нём уже не получится отделить и переиспользовать в другой части сайта, так как они связаны логически. И если удалить первую часть, то очевидно, что мы потеряем суть статьи.
Думаю суть уловили.
И если попробуем поменять теги местами,
то блоки <article> можно будет отделять и использовать в других местах, так как они независимы и не связаны друг с другом. Контент внутри них не зависит от предыдущего блока, и если его удалить, то суть не поменяется.
Тег <footer>
Его можно не только использовать как подвал страницы, как может показаться на первый взгляд, но и добавить, например, в нижнюю часть статьи, где будет информация об авторе, дате публикации или какие-то ссылки.
Тег <header>
То же самое можно сказать и про этот тег. Его можно располагать в начале страницы, над основным контентом, или в секции – размещать в нем, например, заголовок или навигацию.
Тег <nav>
Используется для основной навигации, а не для всех групп ссылок. Например, меню в подвале сайта можно не оборачивать в <nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) – это не является основной навигацией.
Тег <aside>
Предназначен для контента, который не является частью основного потока на сайте, однако все равно имеет к нему какое-то отношение. Обычно выступает в качестве боковой панели к вашему основному содержимому.
Обычно располагается около тега <main>
Заключение
Я думаю, вы поняли, что использовать семантические теги не так уж и сложно. Главное – понять, где их применять и зачем 🙂
Если подвести итог, можно определить два основных плюса:
- Теги избавляют структуру от лишнего мусора в виде дополнительных атрибутов. Код становится проще и понятнее.
- Теги помогают быстрее обрабатывать код поисковым роботам, вследствие чего у вашего сайта больше шансов попасть на первые страницы Google, Yandex и т.д.
На этом всё. Надеюсь, у вас появилось представление о том, зачем нужны семантические теги и как их использовать.
Узнать больше о новых элементах HTML5 можно тут:
w3schools – предоставляет простое и ясное описание многих html-элементов и того, как/где их следует использовать.
MDN – также предоставляет отличное описание всех элементов HTML + углубляется в каждый из них.