Семантический HTML, также известный как семантическая разметка, относится к использованию тегов HTML, которые передают значение или семантику содержимого, содержащегося в них.
Добавляя семантические теги HTML на свои страницы, вы предоставляете дополнительную информацию, которая помогает определить роли и относительную важность различных частей вашей страницы.
(В отличие от несемантического HTML, в котором используются теги, не передающие напрямую смысл.)
Что такое семантические теги HTML?
Семантические HTML-теги — это теги, определяющие значение содержимого, которое они содержат.
Например, такие теги, как <header> , <article> и <footer> , являются семантическими тегами HTML. Они четко указывают на роль содержащегося в них контента.
С другой стороны, такие теги, как <div> и <span> , являются типичными примерами несемантических элементов HTML. Они служат только держателями контента, но не указывают, какой тип контента они содержат или какую роль этот контент играет на странице.
Зачем мне нужно использовать семантические теги HTML?
Помимо очевидной причины, по которой семантические теги HTML легче читать и понимать (например, веб-разработчикам, просматривающим код), есть еще две конкретные причины, по которым вам всегда следует использовать семантические теги.
Доступность
Для зрячих пользователей легко определить различные части веб-страницы. Заголовки, нижние колонтитулы и основной контент сразу видны визуально.
Однако это не так просто для слепых или слабовидящих пользователей, которые полагаются на программы чтения с экрана.
Правильное использование семантических тегов HTML позволит этим читателям лучше понять ваш контент, потому что их программы чтения с экрана будут более точно передавать ваш контент.
SEO
Семантические HTML-теги важны для SEO (поисковая оптимизация), поскольку они указывают на роль контента внутри тегов.
Эта информация позволяет роботам поисковых систем , таким как Googlebot, лучше понимать ваш контент. Это увеличивает шансы того, что ваш контент будет выбран в качестве кандидата на ранжирование на странице результатов поисковой системы (SERP) по релевантным ключевым словам.
Проще говоря, страницы с правильно реализованным семантическим HTML имеют преимущество в SEO перед теми, которые этого не делают.
Типы семантических тегов HTML
Семантические теги могут определять различные части веб-страницы.
Давайте рассмотрим наиболее распространенные семантические элементы HTML, разделенные на две категории в зависимости от их использования:
- Семантические теги HTML для структуры
- Семантические теги HTML для текста
Семантические теги HTML для структуры
Многие семантические теги HTML сообщают о макете страницы.
Эти «структурные» теги были введены, когда HTML4 был обновлен до HTML5. Вот почему они также широко известны как семантические теги HTML5 или семантические элементы HTML5.
Вот полный список:
- <header> : Тег заголовка определяет содержимое, которое следует рассматривать как вводную информацию о странице или разделе.
- <nav> : Тег навигации используется для навигационных ссылок. Он может быть вложен в тег <header>, но вторичные теги навигации <nav> также обычно используются в других местах страницы.
- <main> : этот тег содержит основное содержимое (также называемое телом) страницы. На странице должен быть только один тег.
- <article> : Тег статьи определяет контент, который может стоять независимо от страницы или сайта, на котором он находится. Это не обязательно означает «пост в блоге». Думайте об этом больше как о «предмете одежды» — автономном предмете, который можно использовать в различных контекстах.
- <section> : использование <section> — это способ группировки близлежащего контента схожей темы. Тег раздела отличается от тега статьи. Он не обязательно автономен, но является частью чего-то другого.
- <aside> : элемент aside определяет менее важный контент. Он часто используется для боковых панелей — областей, добавляющих дополнительную, но несущественную информацию.
- <footer> : вы используете <footer> внизу страницы. Обычно он включает контактную информацию, информацию об авторских правах и некоторую навигацию по сайту.
Семантические теги HTML для текста
Семантические теги HTML для текста — это теги HTML, которые — помимо форматирования — также передают семантическую функцию содержащегося в них текста.
Вот некоторые из наиболее распространенных примеров:
- <h1> (заголовок): Тег H1 обозначает заголовок верхнего уровня. Обычно на странице есть только один заголовок H1.
- От <h2> до <h6> (подзаголовки): Подзаголовки разного уровня важности. На одной странице может быть несколько заголовков одного уровня.
- <p> (абзац): отдельный абзац текста.
- <a> (якорь): используется для разметки гиперссылки с одной страницы на другую.
- <ol> (нумерованный список): список элементов, которые отображаются в определенном порядке, начиная с маркеров. Один тег <li> (элемент списка) содержит один элемент списка.
- <ul> (неупорядоченный список): список элементов, которые не нужно отображать в определенном порядке, начиная с порядковых номеров. Один тег <li> (элемент списка) содержит один элемент списка.
- <q> / <blockquote>: цитата из текста. Используйте <blockquote> для длинных многострочных цитат и <q> для более коротких встроенных цитат.
- <em> (выделение): используется для текста, который следует выделить.
- <strong> (сильное выделение): используется для текста, который должен быть сильно выделен.
- <code> : Блок компьютерного кода.
Примечание. Мы перечислили только некоторые из наиболее распространенных семантических тегов HTML. Вы можете использовать многие другие, такие как <резюме>, <время>, <адрес>, <видео> и т. д., – чтобы сделать содержание вашего веб-сайта более понятным. Чтобы узнать больше о семантических элементах HTML, ознакомьтесь со списком всех тегов HTML от W3Schools.
Советы и рекомендации по семантическому HTML
Наконец, давайте рассмотрим некоторые советы по внедрению HTML, основанные на распространенных ошибках, которые люди допускают при использовании семантических тегов HTML.
Не используйте семантические теги HTML для стилизации
Хотя веб-браузеры применяют стили ко многим семантическим тегам (например, текст внутри тега <a> обычно выделяется синим цветом и подчеркивается), это не означает, что HTML-теги должны использоваться для оформления текста.
Другими словами, точно так же, как вы не стали бы использовать тег <a> для «нессылочного» текста только для того, чтобы сделать его синим и подчеркнутым, вы не должны использовать другие семантические теги в чисто стилистических целях.
Вот несколько типичных примеров неправильного использования семантических тегов:
- Использование тега от <h1> до <h6> для текста, который не является заголовком, с целью изменения размера его шрифта
- Использование <blockquote> только для отступа текста, который не является цитатой
- Использование <strong> или <em> просто для выделения полужирным шрифтом или курсивом текста, который не нуждается в выделении.
В целях стилизации всегда используйте CSS.
Вложите теги заголовков с учетом семантики
Всегда упорядочивайте элементы заголовка по важности.
Например, все заголовки H3, которые следуют за определенным заголовком H2, должны быть подтемами этого H2.
Таким образом, структура заголовков создает логическую иерархию тем внутри вашего контента и помогает как читателям, так и поисковым системам лучше понимать текст и ориентироваться в нем.
Совет: используйте инструмент аудита сайта чтобы выявить проблемы с заголовками H1, другими HTML и SEO-ошибками на странице, от которых может страдать ваш сайт.
Тот же совет — вложение тегов по их значению — применим ко всем остальным семантическим тегам HTML.
Что подводит нас к следующему совету:
Не просто копируйте свой визуальный макет
Ваша реализация HTML не должна быть простой копией визуального макета. Вместо этого он должен следовать семантической структуре страницы.