Как правильно “делать” семантику

Перевод «How to do semantics the right way» с сайта LogRocket

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

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

Хотите доказательств? Зайдите на сайт, над которым вы работаете, нажмите cmd+a или ctrl+a, чтобы скопировать «всё», и вставьте текст в любимый текстовый редактор. Добро пожаловать в мир без семантики.

К счастью, веб может передать гораздо большее значение, чем это. Эта статья покажет вам, почему семантика в интернете важна, какие семантические элементы встроены в HTML и как вы можете использовать их в своих приложениях для улучшения доступности, SEO и получения прибыли.

Что вообще означает семантика?

С лингвистической точки зрения, семантика означает «смысловое значение слов». В интернете семантика обычно относится к истинному значению элементов, на которое указывают HTML теги.

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

Почему вам должно быть не всё равно

Контент, структурированный таким образом (назовем его «семантически правильным»), легче использовать и обрабатывать всем, кто в этом заинтересован. Это приносит несколько больших преимуществ:

Улучшенная доступность

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

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

Увеличенная возможность индексации (SEO)

Сканерам поисковых систем гораздо легче правильно проиндексировать ваш контент с помощью семантической разметки. Используя правильные теги, вы предоставите ценные советы для базовых алгоритмов сортировки, которые решают, насколько легко будет найти ваш контент. А так как семантическая разметка улучшает доступность, вы также поднимитесь в рейтингах!

Проще разобрать

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

Ваш код легче прочитать

Читать исходный код, содержащий одни лишь <div /> теги не самый лучший опыт. К счастью для нас, HTML это намного большее, чем обычные <div /> и <span />! Вы можете разместить навигацию в теге<nav />, ваш основной контент — внутри тега <main />, и, внезапно, ваш код намного проще прочитать. Возможно, это не добавляет ценности для конечного пользователя, но счастливый разработчик — продуктивный разработчик, верно?

Что может предложить HTML?

Как я уже упоминал, HTML — это гораздо большее, чем <div /> и <span />. На самом деле, есть более 100 различных элементов! Вы можете просмотреть их все на сайте MDN, но на самом деле они могут быть сгруппированы в три группы — секционирование контента, семантика контента и функциональные элементы.

Секционирование контента

Веб-страница обычно содержит несколько разделов контента — верхний колонтитул (шапка/хедер), нижний колонтитул (подвал/футер), область основного контента и т.д. HTML предоставляет несколько элементов, которые позволят вам обозначить эти различные «ориентиры» страницы.

Вот некоторые из тех, которые вы должны помнить:

• <main /> включает в себя фактическое содержимое вашей страницы или основные функциональные возможности вашего приложения. Проще говоря, это ваш веб-сайт без хедера, футера и боковой панели
• <header /> по сути является обёрткой для основного заголовка вашей страницы или приложения, а также для «заголовков» любых других групп контента. Он может содержать заголовок и категорию содержимого в блоге, логотип вашего приложения и основную навигацию
• <section /> — это контейнер общего содержимого, который должен оборачивать раздел(секцию) на вашем сайте. В таких элементах обычно тоже выделяется заголовок. Практика показывает, что раздел логически появляется в структуре вашего сайта
• <article /> почти похож на <section />. Главное отличие в том, что вы должны использовать тег <article /> для такого контента, который можно использовать отдельно в другом контексте, а не для основного контента. Примерами могут быть резюме в блоге, комментарий или даже полный виджет
• <aside /> можно использовать двумя различными способами. Если вы используете его внутри тега <article/>, подразумевается, что он содержит контент, тесно связанный с этой статьей, например, глоссарий или пояснение. Если он объявлен за пределами <article/>, то он может быть использован для обёртывания частично связанного контента, например, в качестве боковой панели или списка связанных ссылок
• <footer /> обычно содержит информацию об авторских правах или об авторах статьи или самого веб-сайта
• <nav /> содержит основной раздел навигации по вашему сайту. Ваша основная навигация, нумерация страницы, и навигация на следующую/предыдущую статью должны быть завернуты в <nav />

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

Семантика контента

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

Таких тегов много, и если вы вообще использовали HTML, то, вероятно, знакомы с большинством из них. Вот некоторые, которые вы, возможно, не использовали, но о которых приятно знать!

• <blockquote /> оборачивает развёрнутую цитату и позволяет ссылаться на её источник. Если источником является веб-страница и вам нужно сослаться на её URL, то вы можете использовать атрибут cite, или же использовать тег <cite />, чтобы указать источник
• <figure /> нужен для оборачивания ваших картинок, иллюстраций и рисунков (например, графики, диаграммы, фрагменты кода). Также, используя <figcaption />, вы можете добавить заголовок, который семантически связан с изображением
• <dl /> расшифровывается как «список определений» и отлично подходит для случаев, когда вам нужно отобразить отношение ключ-значение. Данные о продукте и глоссарии являются отличными примерами

Рассмотренные выше теги предназначены для оборачивания всего контента. Тем не менее, вы можете (и должны!) получить ещё большую детализацию и предоставить дополнительное семантическое значение каждому из этих блоков.

• <time /> оборачивает информацию об определённом периоде или времени. Вы можете указать атрибут datetime, который принимает более подробную информацию
• <em /> создаёт акцент, который отлично подходит при использовании программ чтения с экрана или голосовых помощников для разбора текста. Вы даже можете вложить их, чтобы обеспечить больший акцент при необходимости
• <small /> оборачивает ваш «юридический текст» и уведомления об авторских правах
• <abbr /> используется для указания сокращений. Странно, что сам тег abbr является аббревиатурой от «abbreviation», но давайте оставим это. Вы можете объяснить сокращение атрибутом title.

Если интересно, есть ещё несколько вещей, на которые полезно будет взглянуть. Вы можете найти полный список здесь.

Заключение

Семантика в вебе— это гораздо больше, чем просто модное слово. Используя соответствующие теги HTML, вы можете предоставить структурные подсказки для программ чтения с экрана, поисковых роботов и всех пользователей.

Если вы не помните, что и когда использовать, подсмотрите несколько раз. Документация на сайте MDN невероятная, а в этой статье расписаны теги, которые вы будете использовать наиболее часто. Попробуйте узнать, как долго вы сможете выжить, не используя <div /> или <span /> на новой странице, которую будете разрабатывать!

Я надеюсь, что эта статья вдохновит вас на добавление смысла в структуру вашего документа и позволит вам погрузиться в этот замечательный язык, называемый HTML.