Главная › Новости

Валидность HTML - проверка и исправление ошибок

Опубликовано: 23.08.2018

Помогите мне исправить ошибки!!!

Для начала немного теории. Валидность HTML – это соответствие кодов html и каскадных таблиц стилей CSS неким стандартам, которые задает нам Консорциум Всемирной Паутины ( W3C – World Wide Web Consortium ). На производстве – ГОСТ, в русском языке – грамматика, а в интернете – валидность. Страницы сайта, прошедшего проверку на соответствие стандартам W3C будут правильно отображаться в современных браузерах, вырастет скорость загрузки и как следствие - маленький плюсик при ранжировании в поисковой выдаче.

Проверить валидность HTML кода сайта можно официальным валидатором стандарта W3C .

Здесь мы видим три вкладки проверки:

Validate by URL – по URL адресу; Validate by File Upload – загруженного файла; Validate by Direct Input  - непосредственно HTML кода страницы сайта.

Начните проверку по URL с главной страницы своего сайта (блога), а затем проверьте отдельные страницы, на которых вставлены какие-либо скрипты или блоки (голосование, различные сервисы, фотогалереи и т. д.).

Видео урок 3.19 по html Ошибки

Перед проверкой нажмите на кнопку " More Options " и выберите параметры отображения ошибок.

Show Source – с выводом исходного (с ошибками) кода; Validate error pages – проверка страниц вывода ошибок (404 страница); Show Outline – вывод строки с ошибкой; Verbose Output - отображение заголовков, передаваемых сайтом браузеру: дата изменения документа, его размер и тип, параметры сервера; Clean up Markup with HTML Tidy – вывод правильного кода (по версии html Tidy), которым можно заменить неправильный. Полезная функция, должна здорово помочь при исправлении ошибок. По моим наблюдениям, работает только с мелкими ошибками – пропущена кавычка, не закрыт тег, и т. д. List messages Sequentially – вывод ошибок и предупреждений по порядку; Group Error Messages bu Type – вывод ошибок и предупреждений в группах по типу.

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

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

После проверки этой моей страницы валидатор выдал предупреждение на линии 252 и ошибку на линии 263.

После перевода этой абракадабры можно понять, что для устранения предупреждения на линии 252 рекомендуется заменить символ " < " (в куске кода выделен красным цветом) на амперсанд " &amp ;". Опустимся на линию 252 приведенного HTML кода нашей страницы ниже.

Сразу становится понятным то, что это код поиска вирусов онлайн от Dr.Web, включенный мной в пост в HTML редакторе.

1. Как и было рекомендовано символ " < " заменяем на амперсанд " &amp; ". 2. Проделываем аналогичную операцию с закрывающим символом " > " на линии 263. Проводим перепроверку страницы валидатором.

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

Довольно часто, почти всегда, ошибки кроются в плагинах. В этих случаях ошибку найти не так просто, и я рекомендую воспользоваться инструментом " поиск " файл менеджера Total Commander. Как использовать этот инструмент файл менеджера я уже писал в статье "Внешние ссылки" и повторяться здесь не буду.

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

Sorry! This document can not be checked.

Такой грозной надписью вас известит сервис, если он не сможет проверить сайт на валидность HTML сода. Причиной этому может быть конфликт плагинов. В моем случае помогло простое обновление WordPress. Можете использовать проверку валидности непосредственно HTML кода страницы блога на вкладке Validate by Direct Input .

В следующей статье " Валидность CSS " мы рассмотрим, как выполнить проверку и исправление ошибок CSS каскадных таблиц стилей. P.S. По многочисленным просьбам читателей публикую здесь валидный код блока кнопок поделиться в социальных сетях от Яндекса:

< script type = "text/javascript" src = "http://yandex.st/share/share.js" charset = "utf-8" > </script> < script type = "text/javascript" ><!-- document .write ( '</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug,gplus,blogger"></div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>' ) ; --> </script>

<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script> <script type="text/javascript"><!-- document.write('</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug,gplus,blogger"></div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p>'); --></script>

Именно этот блок вы видите в конце каждой моей статьи. Нажмите на кнопки, чтобы проверить, работают ли :-).