Сегодня мы поговорим о семантике в HTML. В ранних версиях этого языка гипертекстовой разметки, не было такого разнообразия возможностей, для правильной разметки страницы и каждый разработчик делал это по своему усмотрению.
В большинстве случаев использовался <div> для разбивки страницы на отдельные блоки кода. С английского division, что означает делитель, также использовался элемент <span> внутри блоков, для выделения каких-нибудь фрагментов кода, <p> для разбивки на параграфы.
Для разбиения по секциям, дивам присваивались классы с названиями header, main, footer и так далее, таким образом разделяя страницу на смысловые отделы. Разработчики пользовались, этим способом псевдо разметки довольно долгое время, не будем себя обманывать, многие пользуются до сих пор, до выхода последней версии языка.
Версия HTML5 предоставила нам множество семантических тэгов, которые помогают поисковым системам и разработчикам, людям с нарушением слуха и зрения. Семантическая разметка страницы помогает браузерам не только отображать контент, но и понимать его. Поисковые системы быстрее находят нужную информацию на странице.
Рассмотрим некоторые из них. <header> определяет заглавие вашего документа и находится в верхней части страницы. <section> разделяет вашу страницу на отдельные секции со своим заголовком и контентом, а также группирует по смыслу и тематике. В тэге <article> вы может расположить статьи на вашем сайте, он независим и также может использоваться для вывода комментариев, новостей, может находится внутри <section>. <aside> может использоваться для отображения информации в отдельной от основного контента колонке, так называемый сайдбар или для чего-то менее важного или в <section> для отображения близкого по смыслу текста.
<main> содержит основную информацию вашего сайта и помогает скринридерам понять, что это основная часть вашего контента. <footer> располагается в нижней части страницы и как правило содержит адрес и копирайт.
Это лишь малая часть элементов, из предоставленных нам HTML5 для семантической разметки, с полным перечнем вы можете ознакомиться на странице спецификации, либо в справочнике.
Так для чего же действительно нам нужна семантика? Первая причина для написания семантической разметки, это СЕО. Один из наиболее важных аспектов СЕО, это ценность контента. Понимание и использование семантической разметки поможет донести смысл до посетителей вашего сайта. Поисковые системы оценивают важность ключевых слов по их иерархии в HTML. Например, слова заключенные в <H1> имеют гораздо большую важность, чем слова в <p>. При помощи семантики вы можете помочь поисковым системам отображать вашу страницу на более высоких позициях. Поместив ваши ключевые слова выше по иерархии, вы говорите поисковым системам о чем ваша страница и почему людям которые ищут информацию по этим словам будет интересно посмотреть именно вашу страницу.
С развитием веб дизайна сайты стали выглядеть богаче и креативнее, но в то же время стали менее доступными для многих людей с ограниченными возможностями по всему миру. Используя семантику вы облегчаете доступность для людей пользующихся скринридерами и другими ассистивными технологиями. Скринридеры пользуются разметкой HTML для быстрой навигации и понимания вэб документа, они игнорируют стили CSS. Помимо обеспечения структуры документа, семантический HTML вэб-браузеры применяют функции доступности для некоторых элементов взаимодействия на странице. Для примера у вас есть кнопка play ,которая проигрывает важное аудио по клику. Когда эта кнопка размечена семантически верно <button>Играть</button> она по умолчанию имеет некоторые функции доступности при отображении браузером. Кнопка выглядит кликабельной, при желании ее вид можно переопределить при помощи CSS, так же она получает доступ из клавиатуры, к ней можно перейти с помощью табуляции и активировать клавишей ввод. Когда пользователь, пользующийся скринридером или клавиатурой, попадает на эту страницу, он сможет перейти и взаимодействовать с этой кнопкой. Эту кнопку можно было сделать при помощи div, но в этом случае браузеры не назначают свойства по умолчанию, что затрудняет взаимодействие вспомогательных устройств ввода с ней. Итак, доступность, еще одна из причин использовать семантически верную разметку.
Подведем краткий итог написанного выше, правильность разметки страницы имеет довольно много плюсов и использование тэгов по своему назначению при написании кода, значительно облегчит понимание его разработчиком, который будет поддерживать его после вас, ведь не зря консорциум тратит ресурсы и время на разработку спецификаций, в конечном итоге все делается для облегчения труда разработчиков и для людей. Также вы сами, открывая страницу некоторое время спустя, сможете быстро понять, глядя на код, что вы имели в виду несколько месяцев назад, своего рода комментарии к коду. Поэтому, друзья, есть повод потратить несколько вечеров на изучение документации, в будущем это может облегчить ваш труд, сохранить время и поможет вам писать правильную и валидную разметку, соответствующую всем требованиям и правилам современного вэба.
Автор: Алексей Волков
