Валидация исходного кода HTML, какие бывают распространенные ошибки верстки

31.07.18 ИТ / HTML 3353

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

Где можно пройти валидацию исходного кода страниц своего сайта? Сервисов проверки может быть множество, но лучше использовать официальный валидатор от консорциума всемирной паутины – «The W3C Markup Validation Service», обычно он доступен по адресу: validator.w3.org. Там можно пройти проверку кода по ссылке, загрузить исходный код вручную в виде файла или просто вставить его в текстовое поле. После выполнения проверки, валидатор покажет ошибки или предупреждения, если они есть. Приводится название ошибки, место, где она находится, ссылка на спецификацию или другой регламентирующий документ, а также рекомендации по устранению ошибки.

Можно подумать, зачем писать валидный код, ведь всё итак работает. Почему важно, чтобы код страницы был валиден? Есть много аргументов, например, такие:

• валидные страницы HTML быстрее загружаются, так как браузеру не приходится исправлять некорректные теги;
• на такой странице правильно работают все элементы, бывает из-за неправильной верстки элементы могут выглядеть нормально, но не функционировать;
• поисковые системы ценят правильно сверстанные страницы, для них это важно, так как они применяют множество алгоритмов, например, для извлечения семантического значения тегов;
• различные сервисы будут правильно обрабатывать Ваш сайт – парсеры, агрегаторы и прочее;
• некоторые пользователи могут проверить Ваш сайт в валидаторе и по этому судить, какой код Вы пишете. Особо актуально для сайтов, предлагающих услуги веб-разработки.

Какие ошибки и предупреждения верстки HTML распространены? Вот некоторые примеры:

• вложения блочных элементов в строчные, например, div в span;
• отсутствие атрибута alt у изображений, он важен, так как если вдруг картинка не отобразится – вместо нее будет показан текст-описание;
• вложение элементов в списки, сверстанные при помощи тега ul или ol;
• не добавлен атрибут lang у тега html;
• не указан доктайп в начале страницы;
• указание у изображений атрибута border для того, чтобы убрать рамку вокруг изображения – это следует делать при помощи CSS;
• указание атрибута width у различных элементов, для этого также есть CSS;
• использование старых тегов, например, font;
• незакрытые теги или наоборот, указан только закрывающий тег;
• указание ненужных и устаревших атрибутов у тега script, например, type и charset.

Были рассмотрены только некоторые ошибки и предупреждения, которые чаще всего могут быть найдены валидатором HTML. Конечно, не все разработчики обращают на это внимание и устраняют ошибки верстки сразу, но рекомендуется сделать это как можно скорее. Устранять ошибки верстки сложнее, потому что может прийтись переписывать много кода, поэтому лучше сразу писать валидный HTML код. Для этого сначала можно почитать различные руководства и статьи по этой тематике.