для обозначения навигации или других структурных элементов страницы. Поэтому прежде чем
Семантический HTML, также известный как семантическая разметка, подразумевает использование HTML-тегов, которые передают смысл собственного содержимого, например заголовков, навигации, разделов страницы, списков и абзацев. Для наглядности приведем сравнение сайта с семантической разметкой и без нее.
В целом этот тип разметки выполняет две основные функции:
Первая — упростить жизнь поисковым роботам.
Что это значит? Когда поисковый робот видит семантические HTML-теги, он безошибочно понимает, за что отвечает содержимое тега. Поэтому между двумя сайтами одной тематики предпочтение в результатах поиска будет отдано сайту с семантической разметкой (конечно, при условии, что остальные параметры находятся примерно на одном уровне).
Второе — это повышение доступности вашего сайта.
Если вы думаете, что люди с нарушениями зрения не пользуются интернетом, то вы ошибаетесь, просто они делают это по-другому. Они используют специальные программы, называемые скринридерами, которые «читают» и озвучивают содержимое страницы. Чем лучше сайт семантически размечен с точки зрения HTML, тем лучше (понятнее) он будет озвучен для пользователя.
Вот наглядное видео, демонстрирующее работу скринридера:
VIDEO
То же самое происходит с поисковыми роботами при индексации ваших страниц, если вы не используете необходимые HTML-теги. Вот еще один пример с сайта web.dev (сайт в помощь разработчикам от Google). Сначала посмотрите на этот кусок кода, в котором используются только<div> и <span> .
Теперь посмотрите на второй кусок кода, но на этот раз с семантическими тегами.
Естественно, во втором сценарии вы можете понять архитектуру сайта, даже если не знаете языка, на котором он написан. А вот еще более интересный пример. Браузеры и поисковые системы используют модели для «чтения» содержимого сайта. Основной контент — через DOM (Document Object Model), а таблицы стилей — через CSSOM (CSS Object Model).
А программы для обеспечения доступности, такие как программы для чтения с экрана, используют модель объектов доступности (Accessibility Object Model, AOM).
В первом случае без семантической разметки сайт выглядит просто как набор статичного текста. Более того, если сайт не позаботился о том, чтобы структурировать текст и сделать его читабельным для людей, то шансов у поисковой системы или программы чтения с экрана очень мало.
Семантический HTML имеет ряд преимуществ: ✅ Семантическая разметка облегчает создание адаптивного дизайна.
Семантические элементы HTML Давайте обсудим важные семантические теги, основные примеры их использования и распространенные ошибки. Их можно разделить на два типа:
● Первый — те, которые определяют структуру страницы. ● Во-вторых, те, которые определяют разметку текста на странице.
Сначала мы разделяем контент на логические блоки, а затем размечаем текст внутри этих блоков.
Структурные семантические HTML-теги ● <header> — определяет содержание, которое должно рассматриваться как вводная информация для страницы или раздела.<nav> — используется для навигационных ссылок. Он может быть размещен внутри тега <header>, но часто вторичные теги <nav> для навигации используются и в других частях страницы, например, в боковой панели. <main> — содержит основное содержание (также называемое телом) страницы. На странице должен быть только один тег <main>.<article> — независимая, самодостаточная единица контента, например, комментарий, твит, статья, пост и т. д.<section> — способ группировки тесно связанного контента на основе схожей темы.<aside> — определяет менее важный контент. Часто используется для боковых панелей.<footer> — используется в нижней части страницы. Обычно содержит контактную информацию, авторские права и некоторые элементы навигации по сайту.
Распространенные ошибки и рекомендации. Здесь мы закрепим материал по каждому тегу, отсутствие которого значительно упростит вам жизнь в будущем.
◼️ <header>.
◼️ <nav>
Интерлиньяж такого формата не считается основной навигацией. Для такой информации, с точки зрения семантики, предназначен тег <footer>.
Что касается распространенных ошибок, то многие ошибочно полагают, что внутри тега <nav> допускается только список навигационных ссылок, однако, согласно спецификации, он может содержать навигацию в любом виде.
◼️ <main>.
◼️ <article>.
◼️ <section>
◼️ <aside>.
◼️ <footer>.
Раз уж мы заговорили об ошибках, то вот сравнение структуры двух тегов <nav> и <body> на простых примерах с семантической разметкой и без нее.
При такой структуре кода он вполне чист и читабелен. Каждый пункт нашего списка содержит необходимые ключевые слова.
А теперь пример того, как не следует размечать навигацию на сайте:
Внутри списка в теге <nav> часто используются теги заголовков (h1, h2, h3 ) или <p > (абзац). Оба этих тега находятся внутри тега <body> и служат для разметки основного содержимого.
*Дополнительная информация:
Использование ключевых слов в названиях пунктов меню — очень хорошая SEO-практика, которой часто пренебрегают. По возможности используйте их только для самых важных ключевых слов.
«Тело» сайта
И снова чистый и читабельный код. Тег содержит контент с ключевыми словами. В идеале тег должен «инкапсулировать» все семантические элементы, связанные с контентом.
К сожалению, подобные проблемы встречаются чаще, чем вы можете себе представить. Старайтесь обращать внимание на такие ошибки, особенно когда содержимое страницы выходит за пределы тега </body> , особенно если вы работаете с конструкторами страниц вроде Elementor или Bakery.
Семантические HTML-теги для текста ● <h1> (заголовок)
● <h2> — <h6> (подзаголовки)
● <p> (абзац)
● <a> (якорь)
● <ol> (упорядоченный список)
● <ul> (неупорядоченный список)
● <q> (блочная цитата)
● <em> (подчеркивание)
● <strong > (сильное подчеркивание)
● <code>
Не используйте семантические HTML-теги для стилизации. Несмотря на то, что при использовании таких тегов стили автоматически применяются в браузере (например, текст внутри тега <a> обычно выделяется синим цветом и подчеркивается), это не означает, что семантические HTML-теги предназначены для форматирования текста.
Вот несколько типичных примеров неправильного использования семантических тегов:
1. Использование тегов <h1> — <h6> для текста, который не является заголовком, просто для изменения размера шрифта.
2. Использование более одного тега <h1> на странице. Правило простое: одна страница — один <h1>.
3. Использование <blockquote> только для выравнивания текста, который не является цитатой.
4. Использование <strong > или <em > только для добавления жирного или курсивного форматирования к тексту, который не нуждается в выделении.
Для стилизации всегда используйте таблицы стилей — CSS.
Кстати, лучше не использовать некоторые семантические элементы в <nav> и <footer> . Особенно это касается тегов заголовков, например, <h2> — это мощный HTML-элемент для SEO, и если он окажется в футере или навигации, то поисковая система запутается.
Давайте рассмотрим простой пример:
Он видит элемент <h1>, предполагая, что страница оптимизирована для поисковых систем, а затем видит серию тегов H3 в ссылках нижнего колонтитула. Если теги заголовков оказываются там, где они не имеют отношения к контенту, который вы пытаетесь продвигать с помощью SEO, значит, вы зря тратите ресурсы.
Конечная цель работы с семантической разметкой — принятие осмысленных решений, уменьшение путаницы и, как следствие, улучшение результатов поиска.
Как проверить семантические теги на странице
В статье мы рассмотрим три варианта по возрастанию сложности. Однако вариантов может быть гораздо больше, в зависимости от используемых вами инструментов.
Первый способ — просмотреть код страницы.
Это очень просто. Перейдите на нужную вам страницу, для примера возьмем Google.com.
А теперь подведем курсор к пустому месту без элементов и щелкнем правой кнопкой мыши, затем выберем «Просмотр источника страницы» или воспользуемся сочетанием клавиш Ctrl + U . И вуаля:
Перед вами весь HTML-код нужной вам страницы. Изучите его и проверьте правильность необходимых тегов. Проще всего найти их с помощью Ctrl + F (поиск по странице).
Второй способ — Chrome Dev Tool.
В целом он очень похож на первый, но есть и отличия. Для начала все то же самое. Перейдите на нужную страницу, подведите курсор к пустому месту без элементов, щелкните правой кнопкой мыши, но на этот раз выберите пункт «Инспектировать» или воспользуйтесь сочетанием клавиш F12.
Выберите «Элементы» в верхнем меню и нажмите Ctrl + Shift + C, чтобы перейти в режим курсора. Теперь наведите курсор на любой элемент на странице, и код будет автоматически выделен в правой части экрана.
Третий метод — анализ в Semrush
Это самый сложный метод. Если вы не занимаетесь SEO на постоянной основе, то вряд ли будете приобретать платную подписку. Тем не менее, в Semrush вы можете воспользоваться бесплатной пробной версией. Инструмент значительно упрощает поиск ошибок.
Нам нужен инструмент «Аудит сайта». Создайте проект и введите URL-адрес вашего сайта.
Теперь выберите количество страниц, которые сервис будет сканировать в рамках аудита.
После того как все страницы будут просканированы, перейдите в проект и выберите раздел «Проблемы».
Среди проблем вы можете увидеть следующую ошибку — «7 страниц не имеют заголовка h1».
Нажмите на «Почему и как это исправить» и следуйте рекомендациям. Это так просто и быстро.
Далее вы увидите страницы, на которых были выявлены эти ошибки.
Заключение Дорогие друзья, спасибо, что дочитали нашу статью до конца! Хочу сказать, что хотя семантическая разметка, возможно, и не является фактором ранжирования, она все же влияет на релевантность индексации ваших страниц и восприятие контента на них.
Тема довольно простая и не требует глубоких знаний программирования, достаточно базового понимания HTML, и, к счастью, в сети есть множество видео и бесплатных курсов по HTML5.
