Nibras Code
ПриложенияQR-генераторПомниКонтактГлавная

Программирование

Отладка HTML

Валидатор, незакрытые теги и неверная вложенность.

Все уроки · Уроки HTML: учимся с нуля

Как искать ошибки

HTML не останавливается из-за ошибки: браузер пытается «починить» плохой код, и результат отличается от ожидаемого. Поэтому нужны инструменты, чтобы увидеть проблему. Лучший помощник — панель «Проверить» (F12): она показывает реальное дерево, которое построил браузер.

  1. Щёлкните элемент правой кнопкой и выберите Inspect.
  2. Сравните реальное дерево с ожидаемой структурой.
  3. Сначала исправьте самую верхнюю ошибку: последующие могут быть её следствием.

Самые частые ошибки

  • Незакрытый тег: весь последующий контент отображается неверно.
  • Неверная вложенность: <b><i>…</b></i>.
  • Забытая кавычка: <a href="page.html>.
  • Регистр имени файла: Photo.JPG ≠ photo.jpg.
  • Без указания кодировки буквы «ломаются».
  • Один и тот же id использован дважды.
<!-- wrong -->
<p>Hello <b>world</p></b>
<img src="Photo.JPG" alt="">

<!-- right -->
<p>Hello <b>world</b></p>
<img src="photo.jpg" alt="A tidy desk">

Валидатор и чек-лист

W3C Markup Validator позволяет вставить код на проверку и показывает каждую ошибку с номером строки. Перед публикацией страницы пройдитесь по короткому списку: есть ли doctype? указан ли lang? уникален ли title? у всех ли картинок есть alt? последовательны ли уровни заголовков?

Автор: Nibras Code