Урок 48. Решения: Валидация HTML и CSS

Задание 1. Исправленный HTML

Что было не так: блочный <div> внутри <p> (неверная вложенность), один id="lead" на двух элементах (дубль), <img> без alt (нарушение валидности и доступности).

<section>
  <p>Наша команда</p>
  <div id="lead-name">Анна</div>
  <img src="anna.jpg" alt="Фото Анны">
  <p id="lead-contacts">Контакты</p>
</section>

Задание 2. Исправленный CSS

font-wieght → font-weight, colour → color. Оба неверных свойства браузер молча игнорировал, поэтому стиль не применялся.

.title {
  font-weight: 700;
  color: #2563eb;
}

Задание 3. Пример чеклиста

• Все теги закрыты, вложенность корректна (нет блочного в <p>).
• Каждый id уникален.
• У всех <img> есть осмысленный alt.
• Каждое поле формы связано с <label> через for/id.
• Интерактив — на семантических элементах (<button>, <a>), не на <div onclick>.
• Страница прошла W3C Markup Validator и CSS Validator без ошибок.
• Линтер (HTMLHint/Stylelint) в редакторе не подсвечивает проблем.

Задание 4. Итоговая валидная форма

Эталон доступной разметки с сопровождающим CSS:

<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>

.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);
}