Семантическая вёрстка

Определение: Семантическая вёрстка — это подход к HTML, когда элементы выбирают по смыслу, а не “как получится”: заголовки делают заголовками, навигацию — навигацией, список — списком. Такая разметка помогает браузеру, поисковикам и вспомогательным технологиям правильно понимать структуру страницы.

Зачем это нужно

• Улучшать SEO: поисковикам проще выделять важные части страницы и понимать контент.
• Повышать доступность: скринридеры лучше ориентируются по заголовкам, спискам и правильным элементам.
• Делать код понятнее: разработчику легче читать разметку и поддерживать проект.
• Снижать количество “костылей” в CSS/JS: логичная структура проще стилизуется и оживляется.
• Ускорять совместную работу: дизайнер, верстальщик и SEO-специалист говорят на одном языке.
• Поддерживать масштабирование: новые блоки добавляются без хаоса и дублирования.

Пример

Пример кода:

<h1>Доставка</h1><p>Условия доставки по городу и регионам.</p><ul><li>Курьер</li><li>Самовывоз</li></ul>

Скриншот

Подпись к скриншоту: вкладка DevTools “Accessibility”: как браузер видит структуру (например, заголовки и роли элементов)

Частые ошибки

• Делать “заголовки” обычными <div> и имитировать вид стилями вместо <h1>...<h6>.
• Нарушать иерархию заголовков (например, перескакивать с H1 сразу на H4).
• Использовать списки как сетку для верстки, а не как список по смыслу (и наоборот).
• Злоупотреблять обёртками без необходимости, из-за чего разметка становится “шумной”.
• Думать, что семантика — это только про SEO, игнорируя доступность и поддержку.

Связанные термины

• HTML
• Доступность
• ARIA
• H1
• DOM
• SEO
• Вёрстка

Наши услуги

• Создание корпоративных сайтов — делаем разметку с правильной структурой, чтобы сайт было удобно развивать.
• SEO-продвижение сайтов — улучшаем смысловую структуру страниц и контента для поисковых систем.
• Доработка сайтов — исправим “дивную” разметку, заголовки и списки без полного переделывания сайта.