Браузер отобразит страницу, даже если в HTML есть ошибки - незакрытые теги, дублирующиеся id, забытые атрибуты. Он просто молча "чинит" код по стандартному алгоритму разбора HTML5. Но не все ошибки безопасны: некоторые ломают доступность и работу JavaScript, оставаясь незаметными на глаз. Валидатор W3C находит такие проблемы - хотя на позицию в поиске, по прямому подтверждению Google, они не влияют.
В этом уроке
Сверху - реальная сериализация того, что получилось в браузере (незакрытый <p> из кода слева окажется закрытым сам собой). Снизу - список проблем, которые браузер прощает, а валидатор - нет. Попробуй исправить второй id на другой и добавить alt картинке - список обновится.
Как браузер исправляет ошибки в HTML и почему страница всё равно отображается
У HTML, в отличие от JSON из прошлого урока, нет "падения с ошибкой". Браузеры обязаны следовать алгоритму разбора HTML5 - он точно описывает, что делать даже со сломанной разметкой: например, автоматически закрыть тег <p>, если следом идёт другой блочный элемент. До того как этот алгоритм закрепили в спецификации (HTML5 стала Рекомендацией W3C 28 октября 2014 года), у каждого браузера была своя, не всегда документированная логика "починки" - одна и та же кривая страница могла выглядеть по-разному в разных браузерах.
<p>Текст абзаца.</p> - тег закрыт явно, структура однозначна для любого браузера.
<p>Текст абзаца. (без закрывающего тега) - браузер поймёт, где заканчивается абзац, только когда встретит следующий блочный тег, и не всегда так, как задумал автор.
Валидатор HTML: как проверить код и найти типичные ошибки
Валидатор W3C (validator.w3.org) проверяет код по спецификации и построчно перечисляет всё, что ей не соответствует: дублирующиеся id, отсутствующие обязательные атрибуты, неправильную вложенность тегов. Дублирующийся id - не просто формальность: document.getElementById() и CSS-селекторы по id находят только ПЕРВЫЙ подходящий элемент, а второй становится недоступен и для скриптов, и для стилей, оставаясь при этом видимым на странице.
<img src="cover.jpg" alt="Обложка книги"> - валидатор не найдёт проблем, скринридер прочитает описание.
<div id="card">...</div> ... <div id="card">...</div> - валидатор укажет на повторяющийся id, а код, обращающийся к нему по имени, найдёт только первый из двух блоков.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Дублирующийся id у двух элементов | getElementById() и CSS-селекторы по id находят только первый элемент - второй становится недоступен из кода | Делать id уникальными в пределах всей страницы |
| Забытый alt у img | Картинка остаётся без текстового описания для скринридера, хотя визуально всё в порядке | Всегда указывать alt (для декоративных картинок - пустой alt="") |
| Незакрытый тег, "починенный" браузером по-своему | Итоговая структура страницы не всегда совпадает с тем, что задумал автор кода | Закрывать теги самому, не полагаться на автопочинку браузера |
| Считать, что валидный HTML напрямую поднимает позицию в поиске | Ожидание не подтверждается - это прямо опровергнуто представителем Google | Использовать валидатор ради доступности и предсказуемости кода, а не ради ранжирования |
Шпаргалка
| Термин | Что это |
|---|---|
| Валидатор W3C | validator.w3.org - проверяет код по спецификации, показывает построчные ошибки |
| Дублирующийся id | Нарушение спецификации - ломает getElementById() и CSS-выборку по id |
| alt у img | Обязателен для доступности, не влияет на отображение самой картинки |
| Автопочинка браузера | Алгоритм разбора HTML5 (спецификация W3C с 2014 года) точно определяет, как обрабатывать даже сломанный код |
| Влияние на SEO | Валидность НЕ является фактором ранжирования - подтверждено представителем Google |
Коротко: отвечаем на вопросы
Влияет ли валидность HTML на позицию сайта в поиске Google?
Нет. Представитель Google Джон Мюллер на вебмастер-хэнгауте 14 марта 2020 года прямо сказал: валидация W3C - это то, что Google не использует при поиске. Ошибки в HTML не влияют ни на скорость загрузки, ни на ранжирование страницы.
Почему страница нормально работает, даже если в коде есть ошибки?
Потому что браузеры обязаны следовать алгоритму разбора HTML5 - части спецификации, ставшей Рекомендацией W3C 28 октября 2014 года. Он точно описывает, как обрабатывать даже сильно сломанную разметку, включая автоматическое закрытие незакрытых тегов.
Чем отличается классический валидатор W3C от проверки HTML5?
Классический валидатор сверял код с DTD - формальным описанием типа документа. HTML5 отказалась от DTD в пользу живого стандарта, и в ноябре 2008 года W3C добавил в свой сервис отдельно разработанный движок Nu Html Checker Хенри Сивонена, который умеет проверять именно HTML5.
Может ли дублирующийся id реально что-то сломать, если страница выглядит нормально?
Да. document.getElementById() и CSS-селекторы по id находят только первый элемент с таким id - второй элемент с тем же значением остаётся видимым на странице, но недоступным для скриптов и стилей, которые к нему обращаются.
