Как правильно “делать” семантику
На любом веб-сайте много скрытого смысла, который легко интерпретировать лишь некоторым пользователям. Там полно визуальной информации и подсказок. Текст, который больше стандартного, обычно является заголовком, меню навигации выглядит определенным образом, а иконка лупы, как правило, обозначает поиск.
Без таких визуальных подсказок большинство неявных связей исчезают. Мы можем попросить кого-то (или что-то) прочитать контент, но все те маленькие визуальные подсказки, которые помогали понять акценты, абзацы и общую структуру контента, будут потеряны.
Хотите доказательств? Зайдите на сайт, над которым вы работаете, нажмите 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.