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

Как валидатор помогает избавиться от ошибок, которые мешают пользователям, браузерам и поисковикам.

Ошибки HTML-кода создают много проблем: поисковики отказываются продвигать сайт, а пользователи закрывают вкладку браузера, потому что страница не грузится.

Рассказываем, как самостоятельно проверить сайт и что с ним случится, если код невалидный.

Что такое HTML-валидация и зачем она нужна

Валидация — это проверка HTML-кода: соответствует ли он общепринятым правилам, нет ли в нём ошибок. Хороший код называют валидным. Он быстро загружается, а браузеры корректно обрабатывают его синтаксис.

Стандарты качества кода придумала и поддерживает W3C. Эта организация предлагает унифицировать сайты: сделать их быстрыми, одинаково удобными и доступными для всех.

Тим Бернерс-Ли — помимо прочего создатель HTML, Всемирной паутины и стандартов качества разметки

Чем опасны ошибки в разметке

Ошибки портят впечатление о сайте, мешают ему нормально работать и продвигаться в поисковых системах. Вот конкретные примеры:

• Страницы загружаются слишком медленно.
• Посетители видят только часть текстов и иллюстраций.
• Если поисковый робот найдет хотя бы об одну ошибку — битую ссылку, пропущенный знак в коде или неправильную верстку, он может не проиндексировать страницу.
• Сайт некорректно отображается на разных устройствах.
• На сайте много скрытой рекламы и вирусов, а разработчик или владелец сайта не знает об этом.

На курсе Skypro «Веб-разработчик» учат создавать красивые и функциональные сайты без ошибок. Преподаватели — опытные разработчики, которые дают необходимый минимум теории. Основные навыки студенты осваивают на практике. А наставники и кураторы мотивируют и поддерживают в течение всего времени учебы.

В валидном коде нет лишних скобок или знаков препинания, но достаточно сложно следить за валидностью кода самостоятельно. Поэтому придумали валидатор, который поможет найти все ошибки за несколько секунд.

Как пользоваться валидатором

Валидатор — это сервис проверки валидации HTML, который быстро находит ошибки в коде и помогает их исправить. Разработчики часто используют официальный валидатор W3C, в котором можно найти ошибки тремя способами: указать URL сайта, загрузить HTML-документ или HTML-код.

Validator.w3

Что проверяет валидатор

Сервис проверяет синтаксис кода, например: верно ли указан тип документа и кодировка, нет ли в коде пропущенных элементов. Еще происходит проверка на соответствие DTD (Document Type Definition) — валидатор смотрит, подходит ли код типу документа.

DTD — это инструкция для браузера, которая помогает ему правильно отображать HTML-документ.

Как интерпретировать результат

Валидатор делит проблемные части кода на предупреждения и ошибки. Для удобства они выделены разными цветами, чтобы сразу было понятно, каким проблемам стоит уделить особое внимание.

Пример результатов проверки, который наглядно показывает, что такое ошибка валидации. Предупреждения выделены желтым, ошибки — красным

Предупреждения

Делятся на два типа.

Незначительные проблемы. Сайт, скорее всего, будет работать, но всё равно не соответствует спецификациям W3C.

Серьезные проблемы. Есть риск, что сайт будет отображаться некорректно, часть контента окажется скрытой или пользователь вообще не сможет просматривать страницы.

Зеленая строка — то, что хочет увидеть разработчик, когда проверяет качество кода

Как еще можно проверить код

Хинтер — инструмент, который подсвечивает проблемный синтаксис прямо в редакторе кода.

Проверять верстку можно прямо во время разработки сайта. В этом поможет хинтер, который будет подчеркивать проблемные элементы, пока вы пишете код.

Обычно хинтер выглядит как плагин для текстового редактора. Это как проверка орфографии в Word, только для HTML и CSS.

Проблемный код подсвечивается красным в режиме онлайн. По желанию можно отключить автопроверку и запускать валидацию вручную

Чеклист проверки кода

• Код бывает валидным и невалидным. Нужен валидный.
• Добиться валидности бывает непросто даже опытному разработчику, потому что кода много. Профессионалы используют валидатор.
• В валидаторе можно проверить сайт, HTML-документ или кусок кода.
• В помощь валидатору можно установить хинтер — подсветку проблемного синтаксиса прямо в вашем текстовом редакторе.
• Сайт с хорошим кодом лучше продвигается в поисковиках и быстро работает, с какого устройства они бы ни заходили.