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

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

Онлайн сервис проверки валидности html кода страниц сайта Здесь мы видим три вкладки проверки:

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

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

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

Онлайн сервис проверки валидности html кода страниц сайта

  • 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.

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

Валидность кода Dr.Web-poisk

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

Validnostj-koda-Dr.Web-ispravlenie

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

Валидность HTMK

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

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

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

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

Sorry! This document can not be checked.

Валидность HTML

Такой грозной надписью вас известит сервис, если он не сможет проверить сайт на валидность 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('<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>');
--></script>

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

С уважением, Роман Ваховский.

Хороший человек всегда нажмет на кнопку!
Комментарий > Благодарность > Ссылка на секретную страницу блога

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

Страница 1 из 11
  • Борис говорит:

    Спасибо за статью. Только один вопрос, возможно я упустил что-то, но где можно исправить код в вордпресе? Только через фтп-менеджер?

  • Tatiana говорит:

    Роман,привет! Отличная статья.Понимаю, что это сложно,но делать надо.Ответь, пожалуйста,а плагины тоже надо проверять на валидность? Или только статьи?Поделилась.

    • Роман Ваховский говорит:

      Статья она и есть статья. Текст и ничего более, разве что картинку не правильно вставить. А большинство ошибок содержаться именно в плагинах.

  • Михаил говорит:

    Здравствуйте Роман! Я вот так и не могу понять, где искать эти линии с ошибками? В каком документе они прячутся? Какой файл надо открыть, чтобы их найти и исправить? У меня получается следующая ситуация: смотрю ошибки, смотрю код страницы в браузере, а вот где и как эту страницу найти в вордпрессе - не пойму, вобщем не знаю. Помогите пожалуйста разобраться мне в этом вопросе.

    • Роман Ваховский говорит:

      Вы наверное перед началом проверки не нажали на кнопку "More Options" и соответственно не выбрали параметры отображения ошибок. Ставьте там все галочки (второй скриншот сверху).
      На 168 строке в валидаторе после анализа вашего блога (галочка Clean up Markup with HTML-Tidy) у вас стоит закрывающий . А открывающего

      нет, я проверял. Это критическая ошибка,

      надо удалить. Находится он в header.php так как под ним сразу ссылка на вашу картинку в шапке. В валидаторе это хорошо видно.

  • Надежда говорит:

    Знаю, что сайт нужно проверить на валидность, но так как в коде ничего не понимаю, боюсь лезть, Ваши статьи пока читаю, изучаю.

    • Ваховский Роман говорит:

      Всегда делайте резервную копию тех файлов, которые правите. И тогда будет не страшно.

  • Татьяна говорит:

    Здравствуйте,у меня ошибка с заголовком отображаемым в браузере. Почему то там отображается название сайта два раза, а потом название статьи, всё без пробела и два раза, не могу найти причину, может вы мне подскажите?
    На главной то же самое название сайта и сразу без пробела описание.
    Пожалуйста подскажите где нужно исправить такое недоразумение, а то у меня уже крыша едет и ничего не соображает.
    Буду очень рада вашей подсказке
    С уважением Татьяна

    • Ваховский Роман говорит:

      По всей видимости у вас какой-то SEO плагин глючит или конфликтуют эти однотипные плагины между собой.
      По очереди отключайте плагины и смотрите на результат, не забывайте обновлять кэш браузера.
      Советую поставить плагин All in One Seo Pack.
      Если не справитесь, вышлите мне на почту пароль и логин блога, постараюсь помочь.

      • Татьяна говорит:

        спасибо, это недоразумение поправила,убрала плагин по сео и всё нормализовалось, только теперь у меня стали не кликабельные статьи и все рубрики ведут на главную, не одно так другое 🙂

  • Ольга Черныш говорит:

    Я как-то смотрела, но я там не все поняла, что они от меня хотят. Хотя бы часть исправить, где понятно.

    • Ваховский Роман говорит:

      Основная масса ошибок от плагинов. Сносите кривые и ставьте с валидным кодом.

      • Ольга Черныш говорит:

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

        • Роман Ваховский говорит:

          Оставляйте только самые необходимые плагины и только те, которые часто обновляются. Хотя часто бывает, что плагин, заброшенный своим автором, работает исправно. Но это думаю до поры до времени.

  • Ольга Черныш говорит:

    Бывает, один начинает глючить, я ищу другой, заменяю. Но вместе с ним что-то странное приходит. Вот теперь какой-то целый класс левый нарисовался по поводу изображений и фона. Понятия не имею, откуда это взялось и нужно ли оно.
    Но появилось вместе с плагином обратной связи. Какое-то слово нерусское теперь по углам картинок появляется при наведении.

    • Роман Ваховский говорит:

      А вы пробовали кликнуть по этому слову на картинке? Не пробуйте, я уже кликнул. Открывается новое окно с каким-то левым сайтом :-). А что за плагин обратной формы? Установите Contact Form 7.

      • Ольга Черныш говорит:

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

        • Роман Ваховский говорит:

          Скорее всего это плагин обратной связи эти ссылки вставляет. Деактивируйте его, обновите кэш браузера и посмотрите на результат.
          Contact Form 7 мог перестать работать из-за проникшего вируса на сайт. У меня такое было. Опытные фрилансеры помогли справиться.
          Я бы на вашем месте не относился бы так беспечно к этой проблеме. Поисковики и за меньшие прегрешения в бан отправляют и не докажите им потом что не вы виноваты.

          • Ольга Черныш говорит:

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

  • Ольга Черныш говорит:

    Все, я кажется все поняла. tynt-защита от копирования. pinit связана с ним. Только оно на картинках. Ладно, пусть будет. Плагин обратной связи не связан с этим. Я проверила.

    • Роман Ваховский говорит:

      Я вспомнил, у меня была эта фишка от того сервиса. Сервис хорош тем, что предоставляет полный отчет по скопированному материалу (текст, картинки, обратные ссылки в скопированном). А потом подумал, да нафиг мне нужна эта статистика, геморрой один и снес код. Заморочек много, а польза иллюзорна. Там на сервисе можно кстати отключить все лишнее, ссылки в картинках например.
      В комментариях к статье "как защитить контент от воровства" я дал более легкий подобный скрипт. Функционал скрипта тот-же, правда без статистики и без кнопок поделиться, а сайт не грузит в отличие от первого.

  • Ольга Черныш говорит:

    Надо глянуть.
    А насчет того, как перевести заглавия в h1, это я здесь спрашивала?

    • Роман Ваховский говорит:

      Вы спрашивали, только не помню на какой странице ). И я обещал помочь. Может на следующей неделе. После праздников все никак в рабочий режим не перейти :-).

      • Ольга Черныш говорит:

        Я считаю это очень важной проблемой. И очень хочу изменить все страницы на заголовок 1. Но Я боюсь, что не смогу сама найти все страницы, ведь мне неизвестно, что и где писал автор шаблона. Мне, честно говоря, непонятно, зачем автор писал шаблон именно так. Ведь это нерационально.

  • Сергей говорит:

    Подскажите плиз! Как исправить ошибки в плагине кнопок соц.сетей?

    • Роман Ваховский говорит:

      Здравствуйте Сергей!
      Советую Вам не ставить кнопки в анонсах. Ставьте в конце статьи. Как показывает практика, люди не жмут на эти кнопки не ознакомившись с материалом полностью.
      Поставьте блок кнопок соц. сетей Яндекса. Валидный код блока я опубликовал только что в конце статьи. Чем меньше плагинов будет на сайте, тем он будет быстрее.
      Если все же хотите этот плагин оставить, сообщите, поковыряюсь в нем.

          • Роман Ваховский говорит:

            Линия 27, самая первая критическая ошибка. В плагине в конце ссылки на одноклассники прописано ...rel="stylesheet">. Пропущен слэш "/". Правильно так - ...rel="stylesheet"/>.

  • Дмитрий говорит:

    Добрый день…

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

    В чем была причина и как сделать изображение фото как сейчас на сайте в исправном виде, мне сделали но я бы хотел сам узнать причину и как самому исправить…

    shot.qip.ru/00rd8v-618ZobUMX7

    shot.qip.ru/00rd8v-618ZobUMX8

    Заранее буду очень благодарен…

    С уважением,
    Дмитрий

    • Роман Ваховский говорит:

      А те ребята, что исправили глюк, не сознаются?
      К сожалению, вот так с ходу невозможно ответить на Ваш вопрос. Неизвестен плагин, открывающий картинки. И тут скорее всего понадобиться доступ в панель администратора сайта.

    • Роман Ваховский говорит:

      А те ребята, которые исправили глюк, не сознаются?
      К сожалению, вот так с ходу невозможно ответить на Ваш вопрос. Неизвестен плагин, открывающий картинки. И тут скорее всего понадобиться доступ в панель администратора сайта.

      • Дмитрий говорит:

        Доброй день...
        На всех номерах в сайте: ( http://atrium-hotel.com.ua/цены/1-полулюкс-улучшенный-400грн ) фото номеров спускается в низ, подскажите пожалуйста, как можно исправить, плагины с админ панели в скринах ниже в ссылках))

        http://shot.qip.ru/00tsOZ-6UvvpmdMG
        http://shot.qip.ru/00tsOX-5QODkh2KO
        http://shot.qip.ru/00tsOY-6Kzjld5X5

        Заранее буду очень благодарен...

        С уважением,
        Дмитрий

  • Екатерина говорит:

    Роман, здравствуйте! Учусь по Вашему учебнику:) Помогите, пожалуйста! Не качается шпаргалочка с ошибками, не могу понять, что за загадочный "Attribute itemprop not allowed on element meta at this point"

    • Роман Ваховский говорит:

      Здравствуйте, Екатерина!
      Спасибо за регистрацию, повысил Ваш статус до "Участника".
      Ссылку восстановил, качайте шпаргалку.
      Что-то такое припоминаю. Валидатор считает, что атрибут itemprop не должен быть в этом месте. Я его просто удалил. На функциональности это никак не сказалось. Если мне не изменяет память, эта ошибка стала выскакивать в новых версиях WordPress.

        • Роман Ваховский говорит:

          Совет: большинство ошибок создают плагины. Заменяйте их валидными.
          Удачи!

  • Ольга говорит:

    Здравствуйте, валидатор выдал предупреждение "Line 174, Column 52: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles"

    Нашла в коде исходной страницы этот код, но он находится не на 174 строке, а на 190 и в шаблонах не могу найти эту строку, чтобы исправить. Что делать? Заранее спасибо))

  • Екатерина говорит:

    Роман, добрый день! Я тут застряла, пробовала убирать ошибки через FTP и там, где просмотр кода элемента. Вот, к примеру, убираю itemprop, сохраняю, обновляю страницу, а оно опять как было и все там же. Убрать второй поиск со страницы тоже не получилось. Такое ощущение, что вордпресс мне не доверяет. Подскажите, пожалуйста 🙂

    • Роман Ваховский говорит:

      Кэширование WordPress применяете? Если да, то очистите кэш и отключите (деактивируйте плагин) на время внесения изменений в файлы.

  • Сергей говорит:

    Роман, добрый день. Может Вы знаете в каком файле в админке находятся строки 161 и 175 с этой страницы http://www.banner-web.ru/ ? Все ошибки исправил, осталось только эта. Никак не могу найти расположение этого кода. Буду очень благодарен! С уважением, Сергей.

    • Роман Ваховский говорит:

      Сервис выдал одно предупреждение, но не указал почему-то на эти строки.
      Могу сказать одно - уберите все дивы (div) с текстовой части на главной странице (зачем они там?) и уберите выравнивание абзацев по левому краю (тоже незачем). Скорее всего где-то не закрыли один из дивов.

  • Сергей говорит:

    Спасибо Роман, что откликнулись. Проблема была в плагине, удалил его и все встало на свои места. Всего доброго.

  • Игорь говорит:

    Здравствуйте!
    Не могу найти файлы с ошибками, ну соовсем не получается! CSS AMIRO
    Прошу помощи!

    • Роман Ваховский говорит:

      Только что ответил на комментарий с подобным вопросом. Смотрите выше. Желаю удачи.

  • ship_2014@mail.ua говорит:

    Привет, Рома! Будем знакомы - я Саныч или Ship! Третий день 15-й раз читаю эту статью и никак не вкурю. Объясни убогому где найти эти строки и столбцы, в каком файле? С целью исправить ошибку.В браузере открываю код страницы - вижу ошибку. А где она в вордпрессе не знаю как найти эти файлы.

    • Роман Ваховский говорит:

      Привет, Саныч!
      В статье есть такая фраза:

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

      Попробуй Total Commander для поиска файла с ошибкой. Очень полезный инструмент, только им и пользуюсь.

  • ship_2014@mail.ua говорит:

    Рома, спасибо за отзыв!
    Пробовал я найти эти файлы с помощью тотал. Не находит этих строк с ошибками. И ошибок немного, но не хочу их плодить...

  • ship_2014@mail.ua говорит:

    Error Line 75, Column 157: required attribute "alt" not specified

    …s/HealthStyle/images/default-slides/1.jpg" />

    Вот, например 5 ,аналогичных этой, ошибок в слайдере. Пишет, что пропущен атрибут "alt", но в каком файле эта линия 75, колонка 157 - никак не пойму.

    • Роман Ваховский говорит:

      Атрибут "alt" пропущен в html коде картинки. Этот атрибут описывает так называемое альтернативное содержание картинки. Даже если описание пропустить, атрибут должен присутствовать обязательно.
      Прочтите мою статью про оптимизацию изображений - https://wordpress-book.ru/prodvizhenie/optimizaciya-izobrazheniya-neobxodimost-i-pravila-osushhestvleniya/

  • артем говорит:

    здравствуйте. валидатор показывает ошибку: "The aria-describedby attribute must point to an element in the same document" в файле comment-template.php. и соответственно предлагает вариант её исправления. но при проверке самого файла вижу, что у меня всё прописано точно также, как в правильном варианте валидатора. не подскажете, в чём может быть дело? как устранить эту ошибку?

  • кристи говорит:

    Добрый день! Подскажите, что значит ошибка The contentinfo role is unnecessary for element footer

Страница 1 из 11

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

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

Поиск по блогу

Все права защищены © 2011-2016. WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.