Проверка сайта на валидность, исправляем ошибки

18.05.2013   HTML для чайников, Онлайн сервисы, Оптимизация WordPress   0 Комментариев

Валидность сайтаЗдравствуйте, дорогие читатели. Сожалею, что так долго не писал, решил немного заняться новым проектом и на 2 месяца забросил этот сайт :-( . Исправляюсь, по вашим многочисленным просьбам пишу статью про валидность сайта валидность HTML кода и как проверить сайт на валидность и исправить ошибки.

Проверить сайт на валидность важно по нескольким причинам:

  • выявить ошибки и устранить их
  • для каждого пользователя ( зависит от его браузера и версии ) страница может отображаться по-разному. Браузеры смогут отобразить страницу с небольшими огрехами, но каждый отобразит по-своему.
  • если браузеры могут автоматически исправить маленькие недочеты, то поисковые системы замечают любую погрешность. К примеру на западе поисковики серьезно относятся к валидности сайтов, у нас уже тоже не исключение.

Всему этому необходимо следовать. А задает эти нормы W3C Консорциум Всемирной паутины ( World Wide Web Consortium ).

Проверка HTML кода на валидность

W3C предоставляет для всех вебмастеров валидатор html кода, чтобы проверить валидность сайта.

 Валидность сайта

 Validate by URI — проверка по URL
Validate by File Upload — проверить загружаемый файл
Validate by Direct Input — вставка и проверка участка кода

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

Валидность HTML кода

Подмечу, что часто достаточно исправить 1 или пару ошибок, чтобы сайт полностью соответствовал правилам. ( Например, в этом случае достаточно было сделать 1 исправление в 1 файле, чтобы пропало 5 ошибок ).

Далее будет выведен список ошибок и их решение.

Ошибки валидности сайта

Все на английском, правда в валидаторе есть полезная опция «Clean up Markup with HTML-Tidy», ниже расскажу о ней.

Также  можно будет выбрать дополнительные опции при проверке на валидность:

    • Show Source – отобразить исходный код вашей страницы
    • Show Outline – показать строку, где есть ошибки
    • Validate error pages – проверить страницы ошибок, например 404 — страницы не существует
    • List Messages Sequentially – показать ошибки и предупреждения списком, последовательно
    • Group Error Messages by Type – группировать ошибки с общими признаками
    • Clean up Markup with HTML Tidy — программа HTML Tidy выводит исправленный код, не входит в состав W3C validator, поэтому не гарантируется полная корректность

Исправление ошибок валидности

Теперь попытаемся разобраться как исправлять ошибки.

1. Копируем строчку с ошибкой ( … не копируем, это продолжение кода )

2. Определяем в каком файле она находится. Открываем сайт, CTRL + U просматриваем исходный код страницы и ищем ошибку CTRL + F. Часто ошибка не связана с файлами шаблона, она может находиться в файлах плагинов, либо в подпапках вашего шаблона, поэтому нужны некоторые знания

3. Далее открываем файл и при помощи записи под ошибкой, либо при помощи программы HTML Tidy ( включаем опцию вверху страницы валидатора), в таком случае ищем уже исправленный код ( просто копируйте код на 2-3 символа до красного выделения ). И исправляем.

Часто встречаемые ошибки валидации

Тег noindex

Пример:
<noindex> <a rel=»nofollow» href=»…» >…</a></noindex>

Ошибка валидатора: You have used the element named above in your document, but the document type you are using does not define an element of that name

Пояснение: noindex — не входит официальную спецификацию тега языка гипертекстовой разметки веб-страниц HTML. Также полезно знать, что ЯНДЕКС учитывает, как и Google, Yahoo и Bing, rel=»nofollow»

Правильно:
<a rel=»nofollow» href=»…» >…</a>

Пример:
<a href="index.php?pid=1&id=2">...</a>

Ошибка валидатора: Unknown entity…

Пояснение:  использовать &amp; вместо &

Правильно:
<a href="index.php?pid=1&amp;id=2">...</a>

Неверная вложенность

Пример:
<strong><li>...</strong></li>

Ошибка валидатора: Missing </li> tag

Пояснение: элементы должны быть закрыты в обратном порядке их открытию

Правильно:
<strong><li>...</li></strong>

Чувствительность DOCTYPE к регистру

Пример:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

Ошибка валидатора: Missing DOCTYPE

Пояснение: DOCTYPE зависим к регистру

Правильно:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="<a>http://www.w3.org/1999/xhtml</a>" >

Не прописан закрывающий «/»

Пример:
…style.css" type="text/css" media="screen">

Пояснение:  «пустые элементы», как img или br, должны заканчиваться»/» c пробелом перед этим

Правильно:
…style.css» type=»text/css» media=»screen» />

Тэги прописаны в верхнем регистре

Пример:
<STRONG><LI>...</LI></STRONG>

Ошибка валидатора: There is no such element…

Пояснение: в XHTML документах все элементы и атрибуты должны быть в нижнем регистре, т.к. этот язык регистрозависим и для него <li> и <LI> разные тэги

Правильно:
<strong><li>...</li></strong>

Значения атрибутов прописаны без кавычек

Пример:
<style type=text/css>...</style>

Ошибка валидатора: Missing » »

Пояснение: значения атрибутов пишутся вместе с кавычками

Правильно:
<style type="text/css">...</style>

У img отсутствует атрибут alt

Пример:

<img src="/image/1.png" height="10" width="10" alt="" title="">

Ошибка валидатора: required attribute «alt» not specified

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

Правильно:

<img src="/image/1.png" height="10" width="10" alt="" title="">

В итоге вы сможете исправить ошибки сайта и сделать сайт валидным.


Похожие записи:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Похожие записи: