Семантические HTML теги для структуризации кода страницы

Поговорим о семантических тегах, которые были введены в HTML5 для облегчения работы разным поисковым роботам и программам анализирующим страниц. Использовать или нет подобные вещи на своём сайте решать только вам, но вообще это считается хорошей практикой и следованием современным стандартам. Не исключено, что обработка контента страниц вашего сайта и общая индексация с этими тегами будет лучше.

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

Описание семантических тегов разметки HTML5

Параметр Описание
article Сама основная статья страницы. Раздел, содержащий независимый элемент содержимого (например, журнальную статью или сообщение на форуме).
aside Раздел, содержимое которого связано с содержимым основной страницы только поверхностно (например, цитаты, дополнительная информация к статье, словарь с терминами).
mark При помощи этого тега можно выделить главную часть в тексте, главные слова на которые надо обратить особое внимание. Что-то вроде bold.
details Раздел, содержащий дополнительные сведения, которые пользователь может просмотреть или скрыть с помощью интерактивного виджета. Данный раздел может также содержать заключительный раздел.
header Шапка сайта. Раздел, содержащий введение или группу элементов навигации.
footer Раздел содержит подвал сайта. Раздел нижнего колонтитула страницы (подвала сайта) или родительский раздел. Данный раздел обычно содержит сведения о родительском разделе и отображается внизу раздела.
nav Тег для навигации сайта. Раздел, содержащий для навигации.
section Для отельных смысловых абзацев текста статьи. Общий раздел страницы.
main Тег предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п. На странице данный тег можно использовать только 1 раз и он не может быть дочерним элементом таких второстепенных тегов как header, footer, nav, aside, article
figure Фигура, группировка. Тег для группировки элементов в один блок.
figcaption Подпись к группировкам сделанным при помощи тега figure.
menu Тег предназначен для отображения интерактивного списка пунктов меню. Нужен для создания toolbars различных интерактивных веб приложений, а не просто для навигации по сайту. Аналогично тегам ol и ul внутри контейнера menu список формируется с помощью тегов li. Так же он выступает контейнером для тега command.
summary Заключительный раздел для раздела сведений.

Вроде бы все семантические теги описаны. Благодарю за внимание.

Поделиться!
Tags: , ,

49.64MB | MySQL:51 | 0,331sec