Зачем нужна семантика

Вёрстка на одних div работает визуально, но ничего не говорит ни поисковику, ни скринридеру. Семантические теги — header, nav, main, article, footer — описывают роль блока. Поисковик точнее понимает структуру, а браузер сам применяет нужные стили по умолчанию.

Скелет документа

Минимум, который должен быть на каждой странице: DOCTYPE, атрибут lang, кодировка, viewport для мобильных, заголовок и описание. Без lang="ru" поисковик получает неверный языковой сигнал, а скринридер читает русский текст с английской фонетикой.

<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Заголовок</title>
</head>

Один заголовок первого уровня

Правило простое: один h1 на страницу, дальше h2 и h3 без пропусков уровней. Два h1 — частая ошибка, когда в логотип заворачивают заголовок, а потом добавляют ещё один в герой-блок.

Ошибки, из-за которых вёрстка едет

• Незакрытый div: браузер достраивает дерево сам, и следующий блок оказывается внутри предыдущего.
• li вне ul или вложенный li после закрытия ul — меню разваливается.
• Незакрытые элементы SVG: волны и иконки смещаются.
• Пустой href в ссылке: клик перезагружает страницу.

Доступность и SEO

У каждой картинки должен быть alt: информативной — описание, декоративной — пустая строка. У форм — label или aria-label. У телефона и почты — tel: и mailto:, чтобы с мобильного можно было позвонить в одно касание.

Микроразметка JSON-LD даёт поисковику готовые факты: организацию, вопросы и ответы, хлебные крошки. Это не «магия», а обычный блок script type="application/ld+json" в голове страницы.

Как проверить

Валидатор W3C покажет синтаксические ошибки, PageSpeed — проблемы разметки, влияющие на отрисовку. Достаточно прогнать страницу перед публикацией: большинство ошибок обнаруживается за минуту.

Нужен сайт, а не только статья?

Сделаю сайт под ключ: семантичная разметка, адаптив, скорость, микроразметка и подключение мессенджеров. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: виджет WhatsApp на сайте, примеры CSS, про Django.