1. Валидация
В коде важна каждая запятая, кавычка и скобка, имя атрибута и тега, открывающий и закрывающий тег. Глазами, особенно новичкам, за всем этим не уследить, поэтому придумали валидатор.
Валидация нужна для выявления ошибок в синтаксисе разметки HTML-документа и
расхождений с HTML-спецификацией указанной в <!DOCTYPE >. Программа для такой
проверки называется валидатором. В результате валидации документ либо проходит
валидацию, либо получает список рекомендованных исправлений.
Валидаторы проверяют только HTML-синтаксис и соотвествие спецификации, не семантику.
Есть специальный онлайн сервис (валидатор) который проверяет код HTML-документа на соответствие стандарту. Для проверки необходимо всего два шага, первый - передать валидатору исходный код, второй - нажать на кнопку проверки. Передать код для валидации можно загрузив HTML-файл, передать ссылку на живую веб-страницу, либо скопировать и вставить код целиком.
Если передать валидатору просто отдельные HTML-теги, то он выдаст ошибку, потому что у каждой страницы должен быть базовый скелет документа.
Валидатор проверяет следующие пункты.
- Правильное написание тегов.
- Актуальность тегов и возможность их применения в данной версии HTML.
- Правильность закрытия и вложенности тегов.
- Правильность использования атрибутов.
<section>
<!-- Не соблюдается порядок закрытия тегов. -->
<p><a href="squoosh.app">Squoosh - сервис <em></a>оптимизации</p> изображений.</em>
<!-- Не соблюдаются специфические правила вложения тегов. -->
<ul>
<p>Преимущества</p>
<li>Работает в браузере</li>
<li>Не грузит систему</li>
<li>Удобный интерфейс</li>
</ul>
</section>
Если проверить этот код в валидаторе (не забыв добавить скелет документа), получим отчёт - список ошибок и предупреждений. В каждом элементе списка указано значение, атрибут и элемент, которые не прошли валидацию, описание проблемы, а также приведена цитата кода с ошибкой и номер строки.
Ошибки помечаются как Error и их нужно обязательно исправлять в том
порядке, в котором они указаны. Предупреждения помечаются как Warning,
исправлять их не обязательно, но это повод задуматься и пересмотреть качество
разметки.
Исправим все ошибки валидации в примере.
<section>
<p>
<a href="squoosh.app">Squoosh</a> - сервис <em>оптимизации</em> изображений.
</p>
<p>Преимущества</p>
<ul>
<li>Работает в браузере</li>
<li>Не грузит систему</li>
<li>Удобный интерфейс</li>
</ul>
</section>