Урок 48. Старый vs Новый: Валидация HTML и CSS

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя

⚡ Кратко

«Старое» здесь — это не устаревший API (у валидации его нет), а невалидный/недоступный код, который браузер терпит. «Новое» — валидный и доступный вариант: label связан с полем, есть name, кнопка — настоящий <button>, опечатка в CSS исправлена.

Проблемный вариант ❌

Что найдёт валидатор и линтер: label не связан с полем, у input нет name, кликабельный <div> недоступен с клавиатуры и без роли, у формы нет action/method.

📄 lesson-48/problem.html
<form>
  <label>Email</label>
  <input type="email">
  <div onclick="submit()">OK</div>
</form>

CSS-валидатор поймает опечатку в имени класса и в свойстве — браузер просто проигнорирует правило, и стиль не применится.

📄 lesson-48/problem.css
.singup { colr: red; }   /* опечатка в селекторе и в свойстве */

Исправленный вариант ✅

Валидно и доступно: for/id связывают подпись с полем, добавлен name, <div onclick> заменён на <button type="submit">, у формы есть action и method.

📄 lesson-48/fixed.html
<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Подписаться</button>
</form>
📄 lesson-48/fixed.css
.signup { color: red; }  /* исправлены селектор и свойство */

Навигация