Структура HTML-документа

Если вы хотите создавать семантическую разметку, тогда вам необходимо правильно структурировать HTML-документы. Элементы html, head и body были частью спецификации HTML с середины 1990-х годов, и еще несколько лет назад они были основными элементами, используемыми для придания структуры HTML-документам. Однако за последние несколько лет ситуация кардинально изменилась, поскольку HTML5 добавил множество новых тегов, которые можно использовать для придания структуре HTML-документа богатого семантического смысла.

До появления HTML5 основной структуры HTML-документов в основном было достаточно. Весь наш код был помещен между тегами body и оформлен с помощью CSS. Однако теперь, когда HTML5 широко поддерживается современными браузерами, пришло время внедрить новые теги HTML5, которые придадут нашим HTML-документам гораздо более осмысленную структуру.

Мы можем начать с базовой структуры html-страницы с верхним, главным и нижним колонтитулами (header и footer). Позже мы сможем добавить другие семантические элементы ко всем этим элементам.

Элемент header используется для размещения содержимого, которое отображается вверху каждой страницы вашего веб-сайта. Элемент main используется между верхним и нижним колонтитулами (header и footer) для размещения основного содержимого вашей веб-страницы. Нижний колонтитул отображается в нижней части раздела документа. Как правило, нижний колонтитул является прямым потомком элемента body.

Заголовок может содержать: логотип, слоган, поисковую строку и, возможно, навигационное меню. В большинстве случаев элемент header лучше всего позиционировать как прямой потомок элемента body, но при желании его можно разместить и внутри элемента main.

Как правило, footer является прямым потомком элемента body, но его также можно использовать внутри элемента main, section или article. Наиболее распространенным использованием элемента footer является размещение его в нижней части HTML-документа для размещения таких элементов, как уведомление об авторских правах, ссылки на соответствующий контент и ссылки на административные элементы, такие как политика конфиденциальности и условия предоставления услуг веб-сайта.

Например, если для оформления сообщения на форуме использовались теги article, было бы уместно поместить информацию об авторских правах, а также дату и время создания сообщения в элемент footer и поместить его внизу статьи.

Элемент section используется для идентификации содержимого, которое является основным подразделом более крупного целого. Например, если вы опубликовали длинный документ в формате HTML, было бы разумно поместить каждую главу в элемент section. Может возникнуть некоторая путаница в использовании понятий section и div. Итак, чтобы прояснить это, вы должны помнить две вещи:

• Используйте div, когда вы оформляете какой-либо контент, исключительно для того, чтобы упростить его оформление.
• Используйте section, если вы хотите отобразить содержимое в виде отдельного элемента при составлении схемы документа.

Если ваша веб-страница содержит записи в блоге, статьи или любой другой контент, который с таким же успехом мог бы появиться на другом веб-сайте в качестве синдицированного контента, оформите этот контент в элемент article. Вы можете использовать элемент article практически в любом месте, кроме вложенного в элемент main, но в большинстве случаев элемент article будет прямым потомком элемента main или элемента section, который является прямым потомком элемента main.

Если ваш веб-сайт содержит информацию, которая напрямую не связана с основным содержимым страницы, было бы уместно поместить эту информацию в дополнительные теги. Например, если вы пишете пост, содержащий некоторые технические термины, и добавляете определения для этих терминов на боковой панели, было бы разумно поместить эти определения в теги aside.

Мы можем использовать несколько экземпляров любого нужного нам элемента, но обычно мы используем только один header и один footer, а остальные элементы зависят исключительно от требований.