Для начала немного теории. Валидность 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 с главной страницы своего сайта (блога), а затем проверьте отдельные страницы, на которых вставлены какие-либо скрипты или блоки (голосование, различные сервисы, фотогалереи и т. д.).
Перед проверкой нажмите на кнопку «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 – вывод ошибок и предупреждений в группах по типу.
Поиск и исправление ошибок и предупреждений валидности HTML
Рассмотрим на конкретном примере как найти на блоге и исправить найденные валидатором ошибки и предупреждения.
После проверки этой моей страницы валидатор выдал предупреждение на линии 252 и ошибку на линии 263.
После перевода этой абракадабры можно понять, что для устранения предупреждения на линии 252 рекомендуется заменить символ «<» (в куске кода выделен красным цветом) на амперсанд «&«. Опустимся на линию 252 приведенного HTML кода нашей страницы ниже.
Сразу становится понятным то, что это код поиска вирусов онлайн от Dr.Web, включенный мной в пост в HTML редакторе.
1. Как и было рекомендовано символ «<» заменяем на амперсанд «&«. 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> |
Именно этот блок вы видите в конце каждой моей статьи. Нажмите на кнопки, чтобы проверить, работают ли :-).
Вот и мне при проверке валидности HTML: было обнаружено 30 ошибок, на самом же деле их 31.
Здравствуйте,как исправить ошибки <footer id="colophon" class="site-footer" role="contentinfo"
<script type="text/javascript" defer src="http://sladkoyeshka.ru/wp-content/cache/autoptimize/js/autoptimize_e6352394cc14a17240c41da34f1a8509.js"
Здравствуйте!
В первом случае уберите из подвала шаблона атрибут role=»contentinfo». Совет-уберите заодно ссылку с подвала на сайт разработчика шаблона.
Во втором отключите функцию кэширования плагина autoptimize или удалите атрибут type=»text/javascript» из кода плагина.
А вообще, это не критичные ошибки, если лень исправлять :-), оставьте как есть.
Здравствуйте!
Проверила на валидаторе свой блог по Вашему посту, есть ошибки.
Подскажите пожалуйста, как исправить ошибки, не пойму где их найти? — перевела на переводчике —
Предупреждение: требуется атрибут aria, необходимый для элементов, для которых требуется атрибут.
Из строки 140, колонка 228; к строке 140, столбец 343
© </ text
Не знаю, что такое колонка и столбец, подскажите пожалуйста.
Спасибо.
Спасибо за информацию, сейчас попробую исправить свои ошибки. Только немного не разобралась, в какой папке или файле их искать и исправлять?
Добрый день! Подскажите, что значит ошибка The contentinfo role is unnecessary for element footer
здравствуйте. валидатор показывает ошибку: «The aria-describedby attribute must point to an element in the same document» в файле comment-template.php. и соответственно предлагает вариант её исправления. но при проверке самого файла вижу, что у меня всё прописано точно также, как в правильном варианте валидатора. не подскажете, в чём может быть дело? как устранить эту ошибку?
Error Line 75, Column 157: required attribute «alt» not specified
…s/HealthStyle/images/default-slides/1.jpg» />
Вот, например 5 ,аналогичных этой, ошибок в слайдере. Пишет, что пропущен атрибут «alt», но в каком файле эта линия 75, колонка 157 — никак не пойму.
Атрибут «alt» пропущен в html коде картинки. Этот атрибут описывает так называемое альтернативное содержание картинки. Даже если описание пропустить, атрибут должен присутствовать обязательно.
Прочтите мою статью про оптимизацию изображений — http://wordpress-book.ru/prodvizhenie/optimizaciya-izobrazheniya-neobxodimost-i-pravila-osushhestvleniya/
Рома, спасибо за отзыв!
Пробовал я найти эти файлы с помощью тотал. Не находит этих строк с ошибками. И ошибок немного, но не хочу их плодить…
Привет, Рома! Будем знакомы — я Саныч или Ship! Третий день 15-й раз читаю эту статью и никак не вкурю. Объясни убогому где найти эти строки и столбцы, в каком файле? С целью исправить ошибку.В браузере открываю код страницы — вижу ошибку. А где она в вордпрессе не знаю как найти эти файлы.
Привет, Саныч!
В статье есть такая фраза:
Попробуй Total Commander для поиска файла с ошибкой. Очень полезный инструмент, только им и пользуюсь.
Здравствуйте!
Не могу найти файлы с ошибками, ну соовсем не получается! CSS AMIRO
Прошу помощи!
Только что ответил на комментарий с подобным вопросом. Смотрите выше. Желаю удачи.
Спасибо Роман, что откликнулись. Проблема была в плагине, удалил его и все встало на свои места. Всего доброго.
Роман, добрый день. Может Вы знаете в каком файле в админке находятся строки 161 и 175 с этой страницы http://www.banner-web.ru/ ? Все ошибки исправил, осталось только эта. Никак не могу найти расположение этого кода. Буду очень благодарен! С уважением, Сергей.
Сервис выдал одно предупреждение, но не указал почему-то на эти строки.
Могу сказать одно — уберите все дивы (div) с текстовой части на главной странице (зачем они там?) и уберите выравнивание абзацев по левому краю (тоже незачем). Скорее всего где-то не закрыли один из дивов.
Роман, добрый день! Я тут застряла, пробовала убирать ошибки через FTP и там, где просмотр кода элемента. Вот, к примеру, убираю itemprop, сохраняю, обновляю страницу, а оно опять как было и все там же. Убрать второй поиск со страницы тоже не получилось. Такое ощущение, что вордпресс мне не доверяет. Подскажите, пожалуйста 🙂
Кэширование WordPress применяете? Если да, то очистите кэш и отключите (деактивируйте плагин) на время внесения изменений в файлы.
Здравствуйте, валидатор выдал предупреждение «Line 174, Column 52: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles»
Нашла в коде исходной страницы этот код, но он находится не на 174 строке, а на 190 и в шаблонах не могу найти эту строку, чтобы исправить. Что делать? Заранее спасибо))
Роман, здравствуйте! Учусь по Вашему учебнику:) Помогите, пожалуйста! Не качается шпаргалочка с ошибками, не могу понять, что за загадочный «Attribute itemprop not allowed on element meta at this point»
Здравствуйте, Екатерина!
Спасибо за регистрацию, повысил Ваш статус до «Участника».
Ссылку восстановил, качайте шпаргалку.
Что-то такое припоминаю. Валидатор считает, что атрибут itemprop не должен быть в этом месте. Я его просто удалил. На функциональности это никак не сказалось. Если мне не изменяет память, эта ошибка стала выскакивать в новых версиях WordPress.
Спасибо огромное, очень помогает! Буду штудировать.
Совет: большинство ошибок создают плагины. Заменяйте их валидными.
Удачи!
Добрый день…
Посмотрите на втором фото, открываю первый номер и фото номера внизу в верх не подымается и так на каждом номере, подскажите пожалуйста как сделать что бы фото было по середине?
В чем была причина и как сделать изображение фото как сейчас на сайте в исправном виде, мне сделали но я бы хотел сам узнать причину и как самому исправить…
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
Заранее буду очень благодарен…
С уважением,
Дмитрий
Подскажите плиз! Как исправить ошибки в плагине кнопок соц.сетей?
Здравствуйте Сергей!
Советую Вам не ставить кнопки в анонсах. Ставьте в конце статьи. Как показывает практика, люди не жмут на эти кнопки не ознакомившись с материалом полностью.
Поставьте блок кнопок соц. сетей Яндекса. Валидный код блока я опубликовал только что в конце статьи. Чем меньше плагинов будет на сайте, тем он будет быстрее.
Если все же хотите этот плагин оставить, сообщите, поковыряюсь в нем.
Спасибо! Учту!
Интересно, а где там проблема?
Линия 27, самая первая критическая ошибка. В плагине в конце ссылки на одноклассники прописано …rel=»stylesheet»>. Пропущен слэш «/». Правильно так — …rel=»stylesheet»/>.
Надо глянуть.
А насчет того, как перевести заглавия в h1, это я здесь спрашивала?
Вы спрашивали, только не помню на какой странице ). И я обещал помочь. Может на следующей неделе. После праздников все никак в рабочий режим не перейти :-).
Я считаю это очень важной проблемой. И очень хочу изменить все страницы на заголовок 1. Но Я боюсь, что не смогу сама найти все страницы, ведь мне неизвестно, что и где писал автор шаблона. Мне, честно говоря, непонятно, зачем автор писал шаблон именно так. Ведь это нерационально.
Все, я кажется все поняла. tynt-защита от копирования. pinit связана с ним. Только оно на картинках. Ладно, пусть будет. Плагин обратной связи не связан с этим. Я проверила.
Я вспомнил, у меня была эта фишка от того сервиса. Сервис хорош тем, что предоставляет полный отчет по скопированному материалу (текст, картинки, обратные ссылки в скопированном). А потом подумал, да нафиг мне нужна эта статистика, геморрой один и снес код. Заморочек много, а польза иллюзорна. Там на сервисе можно кстати отключить все лишнее, ссылки в картинках например.
В комментариях к статье «как защитить контент от воровства» я дал более легкий подобный скрипт. Функционал скрипта тот-же, правда без статистики и без кнопок поделиться, а сайт не грузит в отличие от первого.
Бывает, один начинает глючить, я ищу другой, заменяю. Но вместе с ним что-то странное приходит. Вот теперь какой-то целый класс левый нарисовался по поводу изображений и фона. Понятия не имею, откуда это взялось и нужно ли оно.
Но появилось вместе с плагином обратной связи. Какое-то слово нерусское теперь по углам картинок появляется при наведении.
А вы пробовали кликнуть по этому слову на картинке? Не пробуйте, я уже кликнул. Открывается новое окно с каким-то левым сайтом :-). А что за плагин обратной формы? Установите Contact Form 7.
У меня он раньше стоял, но потом перестал работать. не отправлялось.
Видела это слово еще у кого-то вчера.
мне не понятно, откуда оно взялось. а может, от такого плагина,который делает ссылки на источник. Я его тоже примерно в то время ставила.
это слово есть на всех картинках. И я видела сайт. Там в кодах целый класс написан. Я и подумала, что не сам же он написался. боюсь трогать.
Скорее всего это плагин обратной связи эти ссылки вставляет. Деактивируйте его, обновите кэш браузера и посмотрите на результат.
Contact Form 7 мог перестать работать из-за проникшего вируса на сайт. У меня такое было. Опытные фрилансеры помогли справиться.
Я бы на вашем месте не относился бы так беспечно к этой проблеме. Поисковики и за меньшие прегрешения в бан отправляют и не докажите им потом что не вы виноваты.
Да если б я знала, что должно быть. а что лишнее, я бы их нашла. Но я с ними лично не знакома. с этими вирусами, поэтому фиг знает, где что.
Пойду попробую убрать плагин.
Я как-то смотрела, но я там не все поняла, что они от меня хотят. Хотя бы часть исправить, где понятно.
Основная масса ошибок от плагинов. Сносите кривые и ставьте с валидным кодом.
Плагины меня достали со своими глюками. там их половина уже не хочет работать. Видимо, они не успевают за обновлениями. Меняю, так тоже не все работает и не везде. Смотря еще какой шаблон.
Оставляйте только самые необходимые плагины и только те, которые часто обновляются. Хотя часто бывает, что плагин, заброшенный своим автором, работает исправно. Но это думаю до поры до времени.
Здравствуйте,у меня ошибка с заголовком отображаемым в браузере. Почему то там отображается название сайта два раза, а потом название статьи, всё без пробела и два раза, не могу найти причину, может вы мне подскажите?
На главной то же самое название сайта и сразу без пробела описание.
Пожалуйста подскажите где нужно исправить такое недоразумение, а то у меня уже крыша едет и ничего не соображает.
Буду очень рада вашей подсказке
С уважением Татьяна
По всей видимости у вас какой-то SEO плагин глючит или конфликтуют эти однотипные плагины между собой.
По очереди отключайте плагины и смотрите на результат, не забывайте обновлять кэш браузера.
Советую поставить плагин All in One Seo Pack.
Если не справитесь, вышлите мне на почту пароль и логин блога, постараюсь помочь.
спасибо, это недоразумение поправила,убрала плагин по сео и всё нормализовалось, только теперь у меня стали не кликабельные статьи и все рубрики ведут на главную, не одно так другое 🙂
Проверьте почту. Туда ответил.
Знаю, что сайт нужно проверить на валидность, но так как в коде ничего не понимаю, боюсь лезть, Ваши статьи пока читаю, изучаю.
Всегда делайте резервную копию тех файлов, которые правите. И тогда будет не страшно.
Здравствуйте Роман! Я вот так и не могу понять, где искать эти линии с ошибками? В каком документе они прячутся? Какой файл надо открыть, чтобы их найти и исправить? У меня получается следующая ситуация: смотрю ошибки, смотрю код страницы в браузере, а вот где и как эту страницу найти в вордпрессе — не пойму, вобщем не знаю. Помогите пожалуйста разобраться мне в этом вопросе.
Вы наверное перед началом проверки не нажали на кнопку «More Options» и соответственно не выбрали параметры отображения ошибок. Ставьте там все галочки (второй скриншот сверху).
На 168 строке в валидаторе после анализа вашего блога (галочка Clean up Markup with HTML-Tidy) у вас стоит закрывающий . А открывающего
нет, я проверял. Это критическая ошибка,
надо удалить. Находится он в header.php так как под ним сразу ссылка на вашу картинку в шапке. В валидаторе это хорошо видно.
Роман,привет! Отличная статья.Понимаю, что это сложно,но делать надо.Ответь, пожалуйста,а плагины тоже надо проверять на валидность? Или только статьи?Поделилась.
Статья она и есть статья. Текст и ничего более, разве что картинку не правильно вставить. А большинство ошибок содержаться именно в плагинах.
Спасибо за статью. Только один вопрос, возможно я упустил что-то, но где можно исправить код в вордпресе? Только через фтп-менеджер?
Через фтп удобнее всего, насколько мне известно.