Семантика в веб-разработке — это использование HTML-тегов в соответствии с их смысловым назначением, а не просто для стилизации. Она помогает описать структуру и смысл контента, делая веб-страницу более понятной для браузеров, поисковых систем, скрин-ридеров и других парсеров.
Основные преимущества семантической разметки:
Примеры семантических тегов в HTML5:
<header>: Представляет вступление или навигацию для всего документа или определенной секции.<nav>: Представляет группу ссылок для навигации.<main>: Представляет основное содержание документа.<article>: Представляет законченный, самодостаточный фрагмент контента, который может быть независимо распространен (например, запись в блоге, новость).<section>: Представляет самостоятельную секцию контента в документе.<aside>: Представляет контент, который косвенно связан с основным контентом страницы (например, боковая панель).<footer>: Представляет нижний колонтитул для всего документа или определенной секции.<figure> и <figcaption>: Представляют медиа-элемент (изображение, диаграмма и т.д.) и его описание.<time>: Представляет дату и время.Сравнение семантического и несемантического подхода:
| Несемантический подход | Семантический подход |
|---|---|
Использование <div> и <span> для всего | Использование специфичных тегов (<header>, <nav>, <article>) |
Описание структуры через классы (class="header") | Использование тегов, inherently описывающих структуру |
| Зависимость от CSS для понимания структуры | Структура понятна по HTML-коду |
Пример несемантической разметки:
htmlПример семантической разметки:
htmlСемантическая разметка не заменяет CSS для стилизации, но делает HTML-документ более информативным и полезным для различных потребителей контента.