Прежде чем переходить к CSS, стоит убедиться, что базовые вещи в HTML уже "в мышечной памяти": один h1 на странице и заголовки по порядку, семантические теги вместо div-супа, alt у каждой картинки, label у каждого поля формы. CSS оформляет то, что уже осмысленно размечено - он не чинит структуру и не добавляет доступность сам по себе.
В этом уроке
Это не новый приём, а маленькая страница, в которой одновременно соблюдены основные правила курса. Три строчки внизу - не украшение, а настоящая проверка: попробуй убрать alt у картинки или сломать связку for/id - соответствующая строчка сразу же покажет ✘.
Структура и текст в HTML: что нужно помнить перед CSS
Один h1 на странице - главный заголовок, а не средство сделать текст покрупнее. Заголовки идут по порядку, без пропуска уровня: после h1 - h2, после h2 - h3, а не сразу h1 и h3. Абзацы - через p, а не через двойной br. Списки - через ul/ol с li внутри. Ссылка должна вести на реальный адрес и иметь осмысленный текст - не "нажми здесь".
<h1>Заголовок</h1><h2>Подзаголовок</h2> - заголовки по порядку, без пропуска уровня.
<h1>Заголовок</h1><h3>Подзаголовок</h3> - пропущен h2, структура страницы становится нелогичной для скринридеров и поисковиков.
Медиа и формы в HTML: контрольный список перед CSS
У каждой содержательной картинки должен быть alt - без него описание для скринридера просто отсутствует. Таблица - только для настоящих табличных данных, с th и scope для заголовков. У каждого поля формы - настоящий label, связанный через for/id или обёртку: placeholder исчезает при вводе и не заменяет подпись. Кнопка отправки - либо button без явного type (по умолчанию submit), либо input type="submit".
<label for="email">Email</label><input id="email"> - подпись связана с полем программно.
<input placeholder="Email"> без label - подсказка исчезает при вводе текста и не связана с полем ни для скринридера, ни для клика по подписи.
Семантика и доступность в HTML: последняя проверка перед CSS
Вместо "div-супа" - смысловые теги: header, main, footer, nav, article, section, aside. ARIA-атрибуты нужны только тогда, когда у нужного поведения нет родного HTML-эквивалента - первое правило ARIA: если есть подходящий тег, используй его, а не role на div. Каждый id на странице должен быть уникальным - иначе getElementById() и CSS-выборка найдут только первый элемент. И ещё раз главное из последних трёх уроков: валидность HTML, микроразметка Schema.org и мета-теги не поднимают позицию в поиске сами по себе - об этом прямо говорит Google, - но напрямую влияют на доступность, rich-результаты и то, как ссылка выглядит при шеринге.
<header>...</header><main>...</main><footer>...</footer> - структура страницы понятна и человеку, и машине без единого класса.
<div class="header">...</div><div class="main">...</div> - визуально может выглядеть так же, но у div нет собственной семантики - это просто безликий контейнер.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Несколько h1 на странице или пропуск уровня заголовков | Структура страницы становится нелогичной для скринридеров и поисковиков | Один h1, дальше заголовки по порядку без пропусков |
| Div вместо header/main/nav/article/footer | Страница выглядит так же, но теряет встроенную семантику и ARIA-роли лендмарков | Использовать смысловые теги там, где они реально подходят по смыслу |
| Placeholder вместо label, забытый alt, дублирующийся id | Каждая из этих мелочей по отдельности ломает доступность или работу кода, оставаясь незаметной на глаз | Проверять чек-лист (или валидатор) перед публикацией, а не полагаться на то, что "и так работает" |
Шпаргалка: итоговый чек-лист перед CSS
| Проверить | Правило |
|---|---|
| Заголовки | Один h1, дальше по порядку без пропуска уровня |
| Абзацы и списки | p для текста, ul/ol+li для списков - не br и не голый текст |
| Картинки | alt обязателен у каждой содержательной картинки |
| Формы | У каждого поля - настоящий label, связанный через for/id |
| Структура | header/main/footer/nav/article/section/aside вместо div-супа |
| ARIA | Только когда нет подходящего нативного тега |
| id | Уникален в пределах всей страницы |
| SEO-теги, валидность, Schema.org | Не поднимают позицию в поиске напрямую, но важны для доступности и rich-результатов |
Коротко: отвечаем на вопросы
Почему спецификацию до сих пор часто называют HTML5, если версий больше нет?
По привычке и из маркетинга. WHATWG официально отказалась от номера версии ещё 19 января 2011 года, а соглашение с W3C от 28 мая 2019 года закрепило единый живой стандарт без отдельных пронумерованных версий - но название HTML5 уже стало общеупотребимым синонимом современного HTML и осталось в обиходе.
Что обязательно должно быть готово перед тем, как переходить к CSS?
Осмысленная структура: один h1, заголовки по порядку, семантические теги вместо div-супа, alt у картинок, label у полей формы. CSS оформляет то, что уже размечено с пользой, а не исправляет структуру и не добавляет доступность сам по себе.
Влияют ли валидность HTML, микроразметка Schema.org и мета-теги на позицию в поиске?
Нет, ни один из них не поднимает позицию напрямую - это прямо подтверждено представителями Google в разное время. Но все три влияют на другие важные вещи: доступность, право на rich-результаты в выдаче и то, как ссылка выглядит при шеринге в соцсетях.
Зачем вообще нужна семантическая вёрстка, если div тоже прекрасно работает визуально?
Div визуально работает, но не несёт собственного смысла - скринридер не может сказать пользователю это шапка сайта или это отдельная статья. Семантические теги дают эту информацию бесплатно, без единого класса или ARIA-атрибута.
