Валидный код

Оригинальное название: valid

Коротко

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

Что такое «Валидный код»

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

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

Что обычно нарушают

  • Вложенность. Блочный элемент внутри абзаца или ссылка внутри ссылки — парсер перестроит дерево по-своему.
  • Повторяющиеся id. Метка поля, якорь и getElementById найдут только первый.
  • Обязательные атрибуты. Нет alt у картинки, нет type или name там, где они нужны для формы.
  • Устаревшие элементы. center, font, атрибуты оформления вроде bgcolor.

Пример: невалидная форма

<label for="phone">Телефон</label>
<input id="phone" name="phone">
...
<label for="phone">Телефон для доставки</label>
<input id="phone" name="phone2">

Два поля с одним id: щелчок по второй подписи переводит курсор в первое поле, а экранный диктор читает подпись не у того поля. Внешне всё выглядит нормально, поэтому без проверки такая ошибка может прожить годы.

Влияет ли на SEO

Поисковые системы не начисляют баллов за валидность, и исправление предупреждений само по себе позиций не поднимет. Но ошибки разметки бьют косвенно: сломанная вложенность может «съесть» заголовок, нарушить микроразметку или скрыть текст. Поэтому проверка HTML входит в технический аудит наравне со скоростью и индексацией — подробнее в статье о том, что такое техническое SEO. Проверяют разметку валидатором, а в больших проектах — автоматически при каждой сборке.

Обновлено:

Все термины раздела «Frontend»

Что будем искать? Например,Продвижение