Урок 48. Примеры: Валидация HTML и CSS

В каждой паре сначала идёт код, который валидатор пометит ошибкой, затем исправленный вариант с реальным результатом. Невалидную разметку мы намеренно не рендерим — браузер достроил бы её по-своему.

1. Незакрытый тег

Пропущенный </p>: браузер «угадает» границу абзаца, но валидатор сообщит об ошибке вложенности.

<p>Первый абзац
<p>Второй абзац</p>

<p>Первый абзац</p>
<p>Второй абзац</p>

2. Неверная вложенность: <div> внутри <p>

Блочный элемент нельзя класть внутрь <p> — абзац автоматически закроется раньше, чем вы ожидаете.

<p>Текст и блок:
  <div>Я блочный</div>
</p>

<p>Текст и блок:</p>
<div>Я блочный</div>

3. Дублирующийся id

Один id должен быть уникален на странице. Два одинаковых ломают якоря, document.getElementById и доступность.

<input id="email">
<input id="email">

<input id="email">
<input id="email-confirm">

4. Изображение без alt

Атрибут alt обязателен: без него валидатор выдаст ошибку, а скринридер не сможет описать картинку.

<img src="logo.png">

<img src="logo.png" alt="Логотип компании">

5. Опечатка в CSS-свойстве

CSS Validator поймает colr вместо color. Браузер просто проигнорирует неизвестное свойство — текст останется чёрным.

.note { colr: #dc2626; }

.note { color: #dc2626; }

6. Валидная и доступная форма целиком

Корректная разметка формы: label связан с полем через for/id, есть name, кнопка — настоящий <button>.

<form class="signup" action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Подписаться</button>
</form>

7. Сопровождающий CSS

Чистый валидный CSS для той же формы: понятные свойства, состояния :invalid и :focus-visible для доступности.

.signup {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 28rem);
}

.signup input:invalid {
  border-color: var(--color-danger, #dc2626);
}

.signup button:focus-visible {
  outline: 3px solid var(--color-accent, #2563eb);
}