HTML-валидация

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

К основным проверкам валидатора относятся:

Проверка синтаксиса — валидатор проверяет наличие синтаксических ошибок;
Проверка тэгов — валидатор отлавливает ошибки с неправильно закрытыми тегами;
Валидация DTD — валидатор проверяет соответствия кода указанному Document Type Definition (Определение типов документа);
Проверка на наличие посторонних элементов —валидатор выявляет все элементы, отсутствующие в DTD. (Пользовательские тэги, атрибуты).

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

Перейдем к проверке своего HTML

Так как один из критериев к SEO - это валидная верстка, необходимо прогонять написанный код через ранее упомянутый валидатор.

В целом, работа сводится к тому, чтобы скопировать HTML код из браузера и вставить его в соответствующее текстовое поле валидатора. Можно копировать блоки кода сразу из вашего IDE, но это должен быть чистый HTML с готовыми данными. После прохождения проверки вы получите уведомления о разных ошибках в коде. Warning можно игнорировать. Но все Error необходимо будет исправить, чтобы верстка удовлетворяла принципам валидной HTML-страницы.

В процессе работы могут возникнуть нерешаемые проблемы. Валидаторы могут попросту не поспевать за всеми нововведениями. Такое стоит принимать во внимание, « гуглить» решение проблемы.

Рассмотрим несколько конкретных примеров (не)валидной верстки и их проверке.

Списки

К спискам относятся теги ul и ol (маркированные и нумерованные соответственно).
Выглядит это так:

Внутри открывающего и закрывающего тегов ul могут стоять только элементы li, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент. То есть, <ul><div></div></ul> является не валидной версией, и вы явно увидите это в ошибках.

Атрибуты

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

Таблицы

Часто приходится немного корректировать базовые стили таблицы. Раньше такое реализовывалось через соответствующие атрибуты.
На этот код мы получим сразу 4 ошибки об устаревших атрибутах.
Это легко исправить с использованием стилей и классов и получить примерно такой код;

Рассмотрим пример микроразметки

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

Перед тем, как мы продолжим, хотелось бы описать значение используемых атрибутов:

Itemscope - задает область действия словаря в структуре данных. Как правило, работает совместно с атрибутом itemtype и задаёт пределы, где itemtype будет активен. У этого атрибута нет значений.

Itemtype - указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных. Яндекс и Google поддерживают стандарт разметки Schema.org. Соответственно, в качестве значения itemtype указывается адрес словаря на этом сайте.

Itemprop - используется для добавления свойств словаря микроданных к элементу. Имя свойства определяется значением itemprop, а значение свойства определяется содержимым HTML-элемента, к примеру, текстом который располагается внутри элемента.

В этом примере представлена микроразметка статьи. Действие ограничено дивом с атрибутами itemscope, itemtype = Article. Внутри включает микроразметку автора статьи и дату публикации. А также краткое описание статьи и изображение. В данном примере при помощи бэкенда на этапе публикации парсится весь список изображений и выдается фронтенду при помощи метода getShemaOrgImageUrl().

И так, подводя итог, резюмируем

Валидацией сайта HTML называется проверка HTML-кода сайта на ошибки и его соответствие стандартам.. Многие веб-мастера недооценивают её важность и приступают к «чистке» кода только тогда, когда выполнены другие задачи по технической оптимизации ресурса.

Для SEO оптимизации HTML и продвижения сайта необходимо соблюдать:

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

Изучив правила валидного HTML кода и руководство для вебмастеров, вы значительно упростите работу бота с вашим сайтом!

Нет времени и желания для изучения правил? Вы можете заказать изготовление сайта у нас!