Время прочтения: 4 мин.

Есть подход минимализма, когда принцип «довольствуйся самым необходимым» или принцип бритвы Оккама «не умножай сущности сверх необходимого» возводится в абсолют. Но есть противоборствующая сила, которая позволяет очертить приемлемые рамки «необходимого» и которую Альберт Эйнштейн ёмко выразил во фразе «Всё следует упрощать до тех пор, пока это возможно, но не более того».

В сфере веб-разработки подход минимализма мог бы заключаться в построении основного содержания html страницы с помощью тегов div и span. Затронем уже времена блочной вёрстки, когда идея разделения ответственности имела воплощение в разделении содержания и оформления. Строго говоря, ещё раньше верстали таблицами. Но с некоторого времени выделили и отдельную от содержания составляющую – значение.

Дополнение реальности случилось с появлением HTML5. Стандарт добавил новые элементы для уточнения смыслового значения содержимого, структурирования. И с тех пор нет возможности выйти за рамки этой «дополненной» реальности. Так что устраивайтесь поудобнее и добро пожаловать в мир семантической вёрстки, которая позволит создавать сайты, разметка которых опирается на смысловое предназначение каждой составляющей и логическую структуру документа.

Если совсем коротко, то семантическая вёрстка отвечает на вопрос «Что?«: что именно находится на странице?

Да, но зачем?

Есть много разнообразных моментов, в которых семантическая вёрстка может сослужить верную службу.

Во-первых, структурирование контента сайта. Любая порция информации, представленная на сайте, имеет определённое значение и каким-то образом соотносится с другими порциями информации. Возьмём, к примеру, заголовок (семейство тегов h1-h6), каждый конкретный тег на странице имеет свой определённый ранг и название заголовка отражает суть раздела, к которому относится. Структурирование содержимого важно, как само по себе (информация упорядочена по определённым правилам, что облегчает понимание сторонним наблюдателем структуры страницы и назначение определённых её частей), так и является основой для приведённых ниже более комплексных подходов использования.

Во-вторых, прозрачность для поисковых роботов. Семантическая вёрстка позволяет определить структуру, важность и роль контента страницы и отношение частей друг относительно друга. Понимание поисковым ботом информации, представленной на сайте, помогает ранжировать сайты в поисковой выдаче, в результате чем лучше поисковая система понимает содержимое сайтов, тем более релевантные ответы возвращает в поисковой выдаче на запросы пользователей.

В-третьих, адаптация для различных устройств. Люди с ограниченными возможностями, например, слабовидящие или незрячие, способны усваивать информацию по каналам, отличным от общепринятых. Так, основным инструментом для работы с сайтом для них будет скринридер, который содержимое сайта зачитывает вслух. Семантическая структура сайта в данном случае позволит вспомогательным (ассистивным) технологиям ориентироваться в структуре и значении содержимого, а пользователь будет лучше понимать, о чём идёт речь. Таким образом, большее количество пользователей сможет взаимодействовать с сайтом. В некоторых случаях в ассистивные технологии встроены модули распознавания речи, которые поддерживают функцию навигации по сайту, ускоряющей перемещение по разделам.

Семантика структуры

Семантические теги существовали и до разработки пятой версии стандарта HTML (например, тег <p>, означающий параграф), но именно с его приходом можно говорить о внедрении широко используемого в области разработки принципа разделения ответственности, а именно отделение содержания от представления – в рамках философии дизайна различие семантического содержания и эстетического представления. Значительным изменениям подверглось понимание структуры документа.

Актуальная версия HTML Living Standard для определения структуры контента предлагает использовать следующие теги:

<header> — вводная часть смыслового раздела или сайта в целом, обычно включает в себя навигацию.

<nav> — навигационный раздел, содержащий ссылки на другие страницы или части внутри страницы. Даёт возможность поисковым системам разобраться в архитектуре вашего сайта, а асситивным технологиям позволяет перемещаться по структуре контента.

<main> — контейнер для основного уникального содержимого документа, главного контента, по которому поисковый робот будет определять релевантность страницы. В документе тег должен быть в единственном экземпляре!

<article> — независимая контентная единица. Один из важнейших элементов HTML, позволяющий повлиять на продвижение сайта, так как поисковые боты будут индексировать всё содержимое тега article, придавая веса содержимому.

<section> — смысловой раздел документа, зависимый в отличие от article.

<aside> — побочный контент, косвенно связанный с родительским секционным элементом.

<footer> заключительная часть смыслового раздела или сайта в целом. Может содержать имена авторов, контакты, список ссылок на социальные сети, данные о конфиденциальности.

Далее предлагается вариант того, «как?» семантические теги могут применяться (ссылка на GitHub с HTML кодом).

Это было небольшое введение в мир семантической вёрстки веб-страниц, придание значения тому, какую роль выполняет на странице логическое структурирование содержания сайта. А что до призыва – давайте добавлять больше смысла!