Если вы хотите написать семантическую разметку — и поверьте нам, вы действительно хотите написать семантическую разметку — тогда вам нужно правильно структурировать HTML-документы. html, head, а также bodyЭлементы были частью спецификации HTML с середины 1990-х годов, и еще несколько лет назад они были основными элементами, используемыми для придания структуры HTML-документам. Однако за последние несколько лет ситуация резко изменилась, поскольку в HTML5 было добавлено множество новых тегов, которые можно использовать для добавления богатого семантического значения в структуру HTML-документа.
Структура HTML-документа до HTML5
Если вы когда-либо использовали HTML, вы знаете, что каждый бит HTML должен быть заключен в html теги. Открытие <html>тег должен стоять первым, а закрывающий </html>Тег должен появиться внизу документа. Между этими двумя тегами должен появиться любой другой бит HTML.
The head element - это первый элемент, который появляется после открытия html ярлык. В документе headмы размещаем такие вещи, как страница title а также metaданные, мы добавляем JavaScript на нашу страницу с script тег, и мы [ link] к внешним таблицам стилей и другим ресурсам.
На большинстве веб-страниц headэлемент очень занятое место. По этой причине мы создали учебник , в котором объясняются теги, которые обычно появляются в headэлемент и для чего используются эти теги.
Весь контент, видимый на веб-странице, вложен между открытием и закрытием. bodyтеги. Тело — это основной контейнер содержимого, из которого состоит веб-страница.
Вплоть до HTML5 это было почти все для базовой структуры HTML-документа. Весь наш код был вставлен между bodyтеги и стиль с помощью CSS . Однако теперь, когда HTML5 имеет широкую поддержку среди современных браузеров, пришло время реализовать новые теги HTML5, которые придадут нашим HTML-документам гораздо более осмысленную структуру.
Новые семантические теги, добавленные HTML5
В этом кратком руководстве мы коснемся всех новых тегов, добавленных как часть HTML5 для определения структуры и содержимого веб-страницы. Элементы, которые мы рассмотрим в этом руководстве, включают:
Использование этих элементов не так сложно, как может показаться на первый взгляд, и большинство из них говорят сами за себя. Мы быстро пройдемся по каждому новому элементу, а затем создадим HTML-шаблон, в котором вы сможете использовать эти новые теги, чтобы добавить богатое семантическое значение в вашу разметку.
<header>
The headerЭлемент используется для содержания контента, который появляется в верхней части каждой страницы вашего веб-сайта: логотипа, слогана, подсказки для поиска и, возможно, навигационного меню. В большинстве случаев headerэлемент лучше всего позиционировать как прямой потомок bodyэлемент, но также можно разместить его внутри mainэлемент, если хотите.
<main>
Использовать mainэлемент между headerа также footerэлементы, содержащие основной контент вашей веб-страницы. main элемент потомком не может быть article, aside, header, footer, или nav элемент. Вместо этого он должен быть прямым потомком bodyэлемент. Думайте об этом как о прямой замене div id="main"вы использовали в прошлом, чтобы обернуть все содержимое вашей страницы.
Также можно использовать более одного mainэлемент на веб-странице. Например, если на главной странице вашего блога есть пять последних сообщений, было бы уместно поместить каждое сообщение в отдельный mainэлемент - или вы можете обернуть каждый в articleтеги.
<nav>
Навигационные меню обычно размещаются в верхней части веб-страницы, на боковой панели или в нижнем колонтитуле страницы. Где бы вы ни разместили навигационное меню, оберните его navтеги. Обратите внимание, что вам не нужно использовать navтеги для каждой ссылки, только для блоков ссылок, которые обеспечивают либо навигацию по всему сайту, либо навигацию по определенной части веб-сайта.
<article>
Если на вашем веб-сайте есть сообщения в блогах, статьи или любой другой контент, который с тем же успехом мог бы появиться на другом веб-сайте в качестве синдицированного контента, оберните этот контент в articleпочта. Вы можете использовать articleэлемент практически в любом месте, кроме вложенного в addressэлемент, но в большинстве случаев articleэлемент будет прямым потомком mainэлемент или sectionэлемент, являющийся прямым потомком mainэлемент.
<section>
The sectionЭлемент используется для идентификации содержимого, которое является основным подразделом большего целого. Например, если вы разместили полную электронную книгу в формате HTML, было бы разумно обернуть каждую главу в sectionэлемент. Аналогично, если у вас есть боковая панель (семантически обернутая в asideтеги), который содержит четыре раздела — рекламу, подсказку для поиска, похожие сообщения и форму подписки на новостную рассылку — было бы нормально обернуть каждый из этих четырех разделов в sectionтеги, поскольку письменный план содержимого боковой панели будет включать строку для каждого из четырех разделов.
Существует некоторая путаница в отношении того, когда использовать sectionи когда использовать div. Вот хорошее эмпирическое правило, которое поможет вам узнать, когда использовать каждый из них:
- Использовать divесли вы оборачиваете какой-то контент исключительно для того, чтобы упростить его стилизацию или чтобы некоторым JavaScript было проще его освоить.
- Использовать sectionесли бы вы перечислили содержимое как элемент при написании плана документа.
<aside>
Если на вашем веб-сайте содержится информация, не имеющая прямого отношения к основному содержанию страницы, было бы уместно поместить эту информацию в asideтеги. Например, если вы пишете сообщение, содержащее некоторые технические термины, и добавляете определения этих терминов на боковой панели, имеет смысл обернуть эти определения в asideтеги. Также часто бывает, что вся боковая панель веб-сайта типа блога обернута в asideтеги, чтобы было ясно, что боковая панель не является частью основного содержимого страницы.
<address>
The addressэлемент предоставляет контактную информацию для ближайшего родителя articleили же bodyэлемент, содержащий его. Использовать addressэлемент внутри articleпредоставить контактную информацию автора статьи. Используйте его вне articleв mainили же footerэлементы, или как прямой потомок bodyэлемент, чтобы предоставить контактную информацию для владельца веб-сайта.
<footer>
The footerпоявляется в нижней части раздела документа. Как правило, footerявляется прямым потомком bodyэлемент, но его также можно использовать внутри mainэлемент, а sectionили article. Наиболее распространенное использование footerэлемент заключается в том, чтобы поместить его в конец HTML-документа, чтобы содержать такие вещи, как уведомление об авторских правах, ссылки на связанный контент, addressинформация о владельце веб-сайта и ссылки на административные элементы, такие как политика конфиденциальности и условия обслуживания веб-сайта.
Вы также можете использовать footerэлемент внутри articleпредоставить метаданные об этой конкретной статье. Например, если articleтеги использовались для переноса сообщения на форуме, было бы уместно обернуть информацию об авторских правах, а также дату и время публикации сообщения в footerэлемент и поместите его внизу article.