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

0
904

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

источник