Исправление html и css c помощью валидатора W3C. Проверка данных на валидность
Страницы всех сайтов в интернете оформляются специальным кодом, прописанным по стандартизированным правилам HTML.
Что такое валидность?Валидация - это проверка на соблюдение установленных норм, а в контексте, применяемом вебмастерами - корректности кода страниц: синтаксических ошибок, вложенности тэгов и т. п. Если все делать «правильно», код страницы не должен содержать неверные атрибуты, конструкции и ошибки. Валидация сайта позволяет выявить недостатки, которые следует исправить.
Валидность сайта - это соответствие кода существующим стандартам HTML.
Выяснить, есть ли замечания или ошибки в коде веб-страницы, можно как онлайн, так и не имея доступа к Сети и пользуясь оффлайн-программами.
Что такое валидаторы кодаВалидатор кода - это программа, используя которую можно проверить HTML-код страниц и CSS-код на соответствие современным нормам. Она находит и фиксирует некорректные элементы, указывая на их местонахождение и формулируя, что именно оформлено неверно.
Основные «приметы» валидной версткиВалидная вёрстка содержит код, полностью соответствующий требованиям W3C (World Wide Web Consortium), занимающейся разработкой технологических стандартов для всего Интернета.
Если код на страницах сайта верный, то во всех браузерах сайт отображается корректно (а не криво).
Отсутствуют подозрения о несправедливом «понижении» в выдаче и нет страниц, выкинутых из индекса.
Пример. Если, предположим, неправильно стоят теги .., (в частности, отсутствует закрывающий элемент), то поисковик не будет ничего исправлять - он будет интерпретировать так, как написано черным по белому в коде. В итоге могут возникнуть последствия, связанные уже с продвижением сайта.
Важна ли валидная верстка в продвижении сайтаВ теории да, но на практике оказывается, что в топе висит множество сайтов с ошибками валидации, да и сайты с ошибками двигаются в общем неплохо. Проблемы с продвижением могут быть только если ваш сайт некорректно отображается на каком-то типе устройств или в каком-то браузере. Если же он выглядит отлично, но ошибки в валидации есть — на продвижение это не окажет никакого влияния.
Некоторые вебмастера целенаправленно исследовали этот вопрос, пытаясь выяснить, зависят ли результаты ранжирования от результатов валидации. Вебмастер Марк Даост отметил, что валидность кода не принципиальна. А Шаун Андерсон, напротив, пришел к выводу, что валидность как бальзам на душу сайту в плане позиций выдачи.
Еще один специалист, Майк Дэвидсон, также провел подобный эксперимент и пришел к выводу, что Google классифицирует страницы по качеству их написания. Например, незакрытый тег может привести к восприятию части контента как значение этого тега.
Этот вебмастер сделал очень важный вывод:
Нельзя с точностью сказать, насколько сильно ранжирование зависит от валидности кода, но абсолютно точно то, что имеющиеся недочёты могут привести к вылету страниц или всего сайта из индекса поисковиков.
Зачем нужен валидный кодВалидный код позволяет правильно отображать страницы в браузерах (и стили для сайта CSS могут быть отображены неверно).
Причем вполне возможна ситуация, когда в одном браузере ваш сайт отображается так, как вы его настроили, а в другом - совершенно иначе. Изображение может быть перекошено, а контент может стать совершенно нечитабельным.
В итоге вы теряете трафик из этого браузера. К тому же, поведенческий фактор, являющийся одним из трёх самых важных факторов в SEO, значительно влияет на результаты выдачи.
Представьте, что на ваш сайт заходят посетители и тут же его закрывают из-за невозможности воспринять информацию - спасибо ошибкам в коде. Или они вообще возвращаются обратно в поисковик, потому что решение не найдено. Это всё сослужит плохую службу, ибо в итоге поведенческий фактор изменит позиции сайта в худшую сторону.
Как проверить сайт на валидностьДля проверки безукоризненности кода чаще всего используют очень полезный сайт валидатор «Markup Validation Service», расположенный по адресу: http://validator.w3.org , созданный компанией W3C.
Здесь перед Вами три варианта валидации:
- ввести URL-адрес страницы;
- загрузить файл с кодом со своего компьютера;
- вставить готовый код в форму.
Сервис указывает не только на ошибки html кода и их расположение, но и даёт советы по исправлению. Если код уже имеется в Сети, то можно произвести валидацию путём введения её URL-адреса в форму «Validate by URL» и нажатия кнопки Check. Валидатор HTML включит считывание кода и сообщит об итогах.
Необходимо вводить именно адрес проверяемой URL-страницы. Весь сайт проверяться не будет. Введёте адрес сайта - программой считается только его главная страница. В случае нахождения замечаний выходит уведомление о невалидности программного кода и далее указываются строки с допущенными погрешностями.
В этом видео наглядно объяснён процесс проверки с помощью валидатора:
По этому же адресу http://validator.w3.org можно проверить код, выбрав вкладку «Validate by File Upload» и загрузив документ с прописанным код.
Выбираем путь к необходимому файлу и жмём Check. Далее всё происходит аналогично.
Использование формы для ввода кодаИногда удобней вставить сразу код страницы и проверить его онлайн: выбираем вкладку «Validate by Direct Input» и отправляем весь код на сервер.
CSSПроверка валидности кода CSS может быть пройдена также онлайн валидатором: https://jigsaw.w3.org/css-validator/
Здесь все на русском языке, для многих это действительно приятный сюрприз.
Снова можно выбрать - указать URL, загрузить свой файл или вставить код.
Осуществляется проверка сайта на ошибки, как и в случае с HTML, и - получаем ответ от сервера. Настроек проверки не имеется, однако можно изучить предлагаемый сгенерированный валидный код, расположенный после списка недостатков кода.
Изучаем полученный код и приводим исходный к нужному виду.
Расширения для браузеровДля браузеров существуют всевозможные расширения для проверки валидации. Для Google Chrome есть проверяющий валидность кода плагин HTML Tidy Browser Extension, для Opera - расширение Validator, для Safari - Zappatic, для Firefor - HTML Validator.
Остановимся на последнем более детально. Он осуществляет ту же проверку, что и validator, только оффлайн. Взять его можно здесь http://users.skynet.be/mgueury/mozilla/
Устанавливаем расширение, перезагружаем браузер - и можно сразу работать. В случае возникновения заморочек с установкой, можно написать в саппорт Mozilla Firefox или полистать форум http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing
Подробное видео об установке HTML Validator и его использовании:
При загрузке любого URL расширение автоматически включается и считывает код. Результат виден в правом верхнем углу.
Выглядит результат как небольшая картинка с итогом валидации:
Щёлкнув по результату, можно открыть:
— исходный код;
— ошибки - в левом нижнем блоке (или сообщение о валидности);
— подсказки по исправлению ошибок - в правом нижнем.
Каким бы способом ни была проведена проверка кода, ошибки выходят списком. Также обязательно указана строка с недочётом.
Прежде чем править код, стоит на всякий случай сделать резервную копию шаблона сайта.
В расширении для Firefox при нажатии на название ошибки в открытом окошке расширения вас автоматически перебрасывает на строку с невалидным кодом.
К этим же ошибкам указаны подсказки по их исправлению.
Приведу пару примеров.
1. No space between attributes.
…rel=»shortcut icon» href=»http://arbero.ru/favicon.ico» type=»image/x-icon»
Здесь исправления убираем «точку с запятой».
2. End tag for element «div» which is not open
Закрывающий тег div лишний. Убираем его.
Плохо знаете английский язык (а всегда всё описано именно на нём)? Копируете код ошибки и вставляете его в поисковик. Аналогичную тему наверняка уже описывал какой-то вебмастер или верстальщик, следовательно, вы всегда найдете способ решения задачи на специализированных ресурсах.
Хотя, если честно, я бы не тратил много усилий на ошибки в коде. Лучше просто позаботьтесь о том, чтобы сайт корректно выглядел на всех устройствах и браузерах.
Производит несколько проверок Вашего кода. Основные из них:
Основным аргументом против валидации является то, что она слишком строгая и не соответствует тому, как на самом деле работают браузеры. Да, HTML может быть невалидным, но все браузеры могут обрабатывать некоторый невалидный код одинаково. Если я готов взять на себя ответственность за неправильный код, который я пишу, то я не должен беспокоиться о проверке. Единственное, о чем я должен заботиться - это чтобы оно работало.
Моя позиция Это один из немногих случаев, когда я публично говорю о своей позиции по отношению к чему-нибудь. Я всегда был среди противников валидации, основываясь на том, что валидатор слишком строг, чтобы быть практичным в реальных приложениях. Есть вещи, которые поддерживаются большинством браузеров ( в , после ), которые являются невалидными, но иногда очень необходимы для правильной работы.Вообще, моей наибольшей проблемой валидации является проверка #4 (на посторонние элементы). Я сторонник использования пользовательских атрибутов в HTML тэгах для хранения дополнительных мета-данных, относящихся к определенному элементу. В моем понимании, это, например, добавить атрибут foo, когда у меня есть данные (bar), которые мне надо ассоциировать с определенным элементом. Иногда люди перегружают существующие атрибуты для этих целей только для того, чтобы пройти валидацию, несмотря на то, что атрибут будет использовать не по назначению. Для меня это бессмысленно.
Секрет браузеров заключается в том, что они никогда не проверяют соответствие HTML-кода указанному DTD. Doctype, который Вы указали в документе, переключает парсер браузера в определенный режим, но это не приводит к загрузке doctype и проверке кода на соответствие ему. То есть, парсер браузеров обрабатывает HTML с некоторыми допущениями невалидности, вроде самозакрывающихся тэгов и блочных элементов внутри строковых (я уверен, что есть и другие).
В случае пользовательских атрибутов, все браузеры парсят и распознают синтаксически корректные атрибуты как допустимые. Это делает возможным получить доступ к таким атрибутам через DOM с помощью Javascript. Так почему я должен беспокоиться о валидности? Я буду продолжать использовать свои атрибуты и я очень рад, что HTML5 формализует их.
Лучший пример технологии, которая приводит к невалидному HTML, но имеет огромное значение, - это ARIA . ARIA работает с помощью добавления новых атрибутов в HTML 4. Эти атрибуты предоставляют дополнительное семантическое значение HTML-элементам и браузер способен передать эту семантику вспомогательным устройствам для помощи людям с ограниченными физическими возможностями. Все основные браузеры сейчас поддерживают разметку ARIA. Однако, если Вы будете использовать эти атрибуты, у Вас будет невалидный HTML.
Насчет пользовательских тэгов - я думаю, что в добавлении на страницу синтаксически корректных новых тэгов нет ничего плохого, но я не вижу особого практического смысла в этом.
Чтобы прояснить мою позицию: я считаю, что проверки #1 и #2 являются очень важными и должны проводиться всегда. Проверку #3 я тоже считаю важной, но не столь, как первые две. Проверка #4 очень сомнительна для меня, так как она задевает пользовательские атрибуты. Я считаю, что, как максимум, пользовательские атрибуты должны быть помечены как предупреждения (а не ошибки) в результатах проверки, чтобы была возможность проверить, не ошибся ли я при вводе названия атрибута. Отметка пользовательских тэгов как ошибок, возможно, хорошая идея, но тоже имеет некоторые проблемы, например, при встраивании содержимого в другой разметке - SVG или MathML.
Валидация ради валидации? Я считаю, что валидация ради валидации - это крайне глупо. Валидный HTML означает только лишь то, что все 4 проверки прошли без ошибок. Есть несколько важных вещей, которых не гарантирует валидный HTML:- валидный HTML не гарантирует accessibility;
- валидный HTML не гарантирует хороший UX (user experience);
- валидный HTML не гарантирует функционирующий сайт;
- валидный HTML не гарантирует корректное отображение сайта.
Я знаю, что для многих это спорная тема, поэтому, пожалуйста, воздержитесь от чисто эмоциональных высказываний в комментариях.
UPD: спасибо за карму, перенес в тематический. Повторю слова автора: я понимаю, это спорная тема, но пожалуйста, воздержитесь от чисто эмоциональных комментариев, приводите аргументы.
Давайте с самого начала, определимся, что же означает этот термин. Для чего нужна нам эта валидация и на что она влияет?
Валидность сайта- это соответствие HTML-кода определенным правилам и стандартам.
Еще - это проверка синтаксических ошибок и вложенности тэгов.
Существуют и другие критерии. Но в них пока вдаваться не будем, а разберем основные. Есть специальные сервисы валидаторы, которые проверяют сайты:
- на наличие ошибок в структуре документа
- проверяют HTML-код на соответствие стандарту, который у вас указан в самом начале любой HTML-страницы. То есть, та версия вашего html документа, которая установлена в вашем шаблоне. Обычно она идет первой строчкой.
Как узнать какую версию html вы используете?
Это очень просто. Для этого нужно набрать на главной странице вашего сайта комбинацию клавиш CTRL+U и для поиска CTRL+F .
Первая строка это и есть ваша версия. У меня на картинке она выделена красной рамкой для наглядности. Я использую шаблон версии HTML5- это самая новая и популярная версия, которая значительно облегчила жизнь всем вэбмастерам. У вас же может быть и другая, более поздняя. У них есть свои отличия. Про версии, теги я рекомендую вам сайт htmbook, кому интересно конечно.
На что влияет валидность сайта?
Правильная валидность сайта позволяет следить за корректным отображением сайта в разных браузерах. Проверить ваш шаблон можно бесплатно на онлайн сервисе для проверки адаптивности шаблона сайта. Перейдите по этой ссылке и вставьте ваш адрес сайта- http://quirktools.com/screenfly/(скопируйте ее и вставьте в адресную строку браузера).
Возьмем такой пример. Если вы не закроете тэг или сделаете опечатку в коде, в дальнейшем она может отображаться не так, как было задумано вебмастером. Также и со стилями (CSS) — они дадут разную картину.
Отдельно хочу обратить ваше внимание и особо отметить, что валидация прямым образом влияет на поисковые системы:
Поисковые системы отдают предпочтение сайтам с валидным HTML-кодом. Так давайте проверим наш шаблон на валидность.
Способы проверки валидности.
Прежде всего- это сервис validator.w3.org . Он проверит вам ваш сайт бесплатно. В своей статье написанной ранее я уже писала об этом. Поэтому ничего страшного не будет, если я повторюсь. Но в данной статье есть важные дополнения, поэтому советую прочитать и ту и эту статью до конца. Читаем предыдущую статью .
Переходим по адресу: validator.w3.org (скопируйте ссылку и вставьте в адресную строку браузера). Перед нами откроется страница, на которой есть 3 вкладки.
- На первой вкладке вы увидите надпись «Validate by URI»- это переводится, как «Здесь вы можете проверить валидность сайта размещенного в интернете».
- На второй «Validate by File Upload» - это означает, что вы можете загрузить файл с вашего компьютера.
- На третьей «Validate by Direct Input» - это означает, что вы можете вставить содержимое вашего файла непосредственно в форму для ввода.
Я покажу вам первый вариант.
И так, ваш сайт размещен в сети интернет. Выбираем — это «Validate by URI».
Переходим по клавише More options- то есть, это означает выбрать опции. Здесь выставляем следующие значения:
Первая идет кодировка.
Вам необходимо проверить свою на сайте. Это важно! Смотрите ее между тегами и набором клавиш CTRL+U, ищите в начале документа примерно такую строку:
— если нашли, то в данном пункте оставляем выбранным (detect automatically). Переводится, как определять автоматически.
Нашли , тогда и здесь оставляйте значение detect automatically- автоматически обнаруживать.
Внимание! Если проверили и все у вас это есть, в чикбоксах ничего не ставите! Оставляете все, как есть!
А если у вас что-то из того, что я написала выше, нет, тогда вам самостоятельно необходимо будет выставить эти значения. Я же в своем случае ничего не меняла и оставила все, как есть.
После чего нажимаем на кнопку Check, то есть проверить.
Далее идет проверка валидности вашего сайта и через время появится результат. Будет надпись с сообщением This document was successfully checked as HTML5. Это означает, что этот документ был успешно проверен в HTML5.
Установите переводчик от google в вашем браузере, и он будет предлагать вам перевод.
Если после проверки вы увидите надпись на красном фоне - это значит, что у Вас присутствуют ошибки в HTML-документе. Их необходимо исправить.
Я разберу свой скриншот с ошибками. Смотрим внимательно.
У меня ошибка 3 , 4 и 5…
Ошибка 4 и 5- лишние кавычки и нет атрибута. Я знаю, где у меня стоит этот код, поэтому зашла и отредактировала файл.
Вообще ошибки, на самом деле, простые. Советую, когда загружаете изображение, всегда прописывайте обязательно атрибут и ошибок будет в разы меньше.
Все ошибки нельзя полностью убрать, потому, что многие мастера на своих сайтах используют скрипты и баннеры. Вот они то как раз и выдают больше всего ошибок.
Мой совет- используйте только самые необходимые скрипты.
В интернете не существует сайтов с безупречным и чистым валидным кодом. Даже у знаменитых сайтов, таких, как яндекс и google тоже косяков предостаточно. Но это не означает вовсе, что исправлять ошибки не нужно.
Если вы проверили свой шаблон и не знаете, как исправить ту или иную ошибку, всегда можно найти выход из положения.
Для этого просто выделяете название ошибки и вставляете ее, в Google или Yandex.
Также у Вас есть другой выход — поручить это тягомотное дело знающему человеку, который разбирается в коде. В предыдущей статье я разбираю несколько таких ошибок. Но это мелочи. Вам самому, или с помощью кого- то нужно разобраться в своих ошибках. Поверьте мне, что только вам нужен ваш сайт. И это в ваших интересах.
Обязательно перейдите по ссылке (я дала ее выше) и посмотрите, как ваш сайт отображается в браузерах другим пользователям. Нужно выбирать такой шаблон, чтобы он был адаптивный и отображался на всех устройствах красиво. Ведь от этого зависит комфорт пребывания вашего посетителя на сайте.
На этом у меня все. В других своих публикациях я продолжу разбирать ошибки начинающих блоггеров.
Вы наверняка много раз слышали словосочетание «валидность кода»
. А знаете ли вы что это такое? Если да, тогда просмотрите эту статью по диагонали, может все таки что-то интересное найдете. А те кто не знает — читайте полностью. Я расскажу о том, как проверял валидность кода своего блога, как исправлял неправильные теги и многое другое.
Если у вас есть свой сайт или блог, то вы наверняка пишите на нем уникальные статьи, продвигаете его в поисковиках и т.д. Но задумывались ли вы о исходном коде своего сайта? Это так же очень важно, ведь поисковики видят именно исходный код страниц и извлекают из него тексты статей и другие элементы ресурса. Если исходный код будет неправильным и не будет соответствовать стандартам, то роботам будет трудно правильно оценить качество текста и, например, навигации по сайту.
Итак, валидность кода
— это соответствие исходного кода сайта нормам и правилам, описанным Консоциумом Всемирной Паутины или сокращенно W3C. Чтобы проверить свой блог на соответствие этим нормам нужно пройти по ссылке: validator.w3.org . Ввести нужный адрес и посмотреть результаты.
Я столкнулся с ошибками в верстке своей темы а так же с ошибками, которые совершил я сам при установке счетчика от liveinternet. На самом деле я знал о них уже давно, просто не придавал этому значения. И вот совсем недавно мне было нечем заняться и я таки решил добиться валидности кода моего блога. Думаю, это не повредит =)
Для начала скажу, что ошибок было 12 штук, но 10 из них относились к одному и тому же тегу, а именно к
Rel="category tag"
Набрав этот тег в гугле я понял, что на русскоязычные сайты надежды нет, ибо ни одного упоминания об этом теге в рунете нет. Ну что же, не проблема, будем искать на англоязычных, благо ничего сложного в этом нет. Итак, почитав темы на wordpress.org я понял, что не у меня одного страдает от этого тега. На одном из буржуйских сайтов нашел как пофиксить, если кому надо, то вот этот код вставляем в файл functions.php:
Add_filter("the_category", "add_nofollow_cat"); function add_nofollow_cat($text) { $text = str_replace("rel="category tag"", "", $text); return $text; }
После этого сразу 10 ошибок исчезло, но осталось еще две. Первую из них было так же легко исправить. Видите кнопки RSS подписки и Твиттера у меня в шапке блога? Они сделаны картинками, но параметр alt я задать забыл. Я писал о том как важен параметр alt у картинок в теме по внутренней оптимизации, а оказывается он вообще обязателен. Вот и его пофиксил. Осталась одна ошибка.
Когда я устанавливал счетчик на сайт, то поместил его в сайдбар (правая колонка с навигацией), так сказать на скорую руку. Предварительно я заключил его в тег center чтобы выровнять. Но, как оказалось, не по феншую это и валидатор ругался, мол убери этот тег и сделай все красиво — div’ами. ОК, дивами так дивами. Я давно хотел убрать счетчик в подвал для красоты, пусть там тусуется. А тут как раз и повод появился этим заняться. Убрал в футер и выровнял с помощью float: right по правому краю, мне даже самому понравилось, а это главное:)
Вот и все, теперь мой сайт полностью соответствует стандартам! Следующая цель — CSS, проверить ее можно все на том же сервисе, ссылку на который я давал в начале статьи.
Все представленные сервисы в этой крайне полезной подборке помогают веб-дизайнеру протестировать свой сайт на предмет соответствия стандартам и общепринятым нормам веб-разработчиков. В частности можно проверить правильность HTML кода страницы, CSS стилей, доступность сайта во всем мире, доступность для мобильных устройств, экстремальную нагрузку на сайт, скорость загрузки страниц, как выглядит сайт в различных браузерах и в частности в Internet Explorer.
1. Checklink
Проверяет сайт или страницу на предмет наличия битых ссылок
2. URL checker
Проверяет доступность сайта в разных точках земного шара.
3. Mobile checker
Проверяет насколько сайт доступен для мобильных устройств и выдает список ошибок и замечаний.
4. Unicorn
Несколько тестов для сайта, в частности HTML 1.0 и Feed валидация.
5. CSS validator
Проверка каскадных таблиц стилей (CSS) и документов (X)HTML.
6. RSS Feed Validator
Проверка синтаксиса RSS каналов.
7. Accessibility with style
Тестирует сайт на соответствие стандартам WCAG 1.0.
8. Color contrast
Проверяет цветовой контраст между передними и задними элементами сайта.
9. WDG HTML Validator
HTML валидатор веб-страницы.
10. Dr. Watson’s site validation check
Комплексная проверка сайта по нескольким направлениям: HTML, ссылки, ссылки картинок, скорость загрузки, СЕО.
11. Robots checker
Сервис для проверки файла robots.txt.
12. Firebug Firefox Extension
Расширение для Firefox с набором инструментов для тестирования.
13. Load Impact
Тестирование сайта в экстремальных условиях повышенной нагрузки на сайт.
14. Accessibility-Checker
Еще один сервис для тестирования сайта на соответствие стандартам.
15. Viewlike.us — сервис не работает
Показывает как выглядит сайт при разных разрешениях экрана.
