Как проверить HTML на ошибки

Короткий ответ

Откройте валидатор W3C по адресу validator.w3.org, выберите вкладку с адресом страницы, загрузкой файла или вставкой кода и нажмите Check. Он покажет каждую ошибку с номером строки:

Error: End tag "p" implied, but there were open elements.
From line 12, column 1; to line 12, column 4

Для CSS есть отдельный валидатор: jigsaw.w3.org/css-validator.

Зачем, если страница выглядит нормально

Браузер не показывает ошибок в HTML — он молча достраивает разметку по своим правилам. Из-за этого ошибка проявляется в другом месте. Здесь забыт закрывающий </b>, и жирным стал весь текст ниже:

<p>Price: <b>$25</p>
<p>Free delivery</p>
<p>Returns within 30 days</p>

Разные браузеры и экранные дикторы могут «чинить» такую разметку по-разному, поэтому найти причину по внешнему виду трудно.

Как читать сообщения

• Error — нарушение стандарта: незакрытый тег, <div> внутри <span>, повтор id, <img> без alt.
• Warning — подсказка, а не ошибка: например, <section> без заголовка.

Исправляйте сверху вниз: одна незакрытая обёртка порождает десяток ошибок ниже, и после исправления первой они часто исчезают.

Проверка прямо в редакторе

Чтобы не загружать страницу каждый раз, поставьте в редактор расширение-линтер, например HTMLHint: оно подчёркивает ошибки сразу при наборе. В инструментах разработчика браузера (F12, вкладка Elements) видно, какое дерево браузер построил на самом деле.

Частая ошибка

Проверять только исходный файл, когда часть разметки добавляет JavaScript или шаблонизатор. Валидатор видит то, что ему дали. Проверяйте итоговую страницу: результат шаблонизатора виден в «Просмотре кода страницы», а разметку после JavaScript можно скопировать в инструментах разработчика (правый клик по <html> → Copy → Copy outerHTML) и вставить в валидатор.