Нужна ли HTML-валидация?! Проверка данных на валидность Проверка страницы на валидность
Существует такое понятие, как валидация или валидность кода. Валидация - это процесс тестирования кода на отсутствие ошибок. Код, который не содержит ошибок, называется валидным . Даже неправильно говорить "не имеет ошибок", скорее верно будет сказать "код, который не противоречит текущим стандартам W3C". Проверить HTML на ошибки можно с помощью сервиса:
Проверить CSS на ошибки можно при помощи сервиса:
При осуществлении вёрстки каждому вебмастеру приходит в голову проверить свой сайт на правильность кода, валидность. Но большинство сайтов (даже самых популярных), если проверить их код на валидность, содержат ошибки. Давайте разберемся, с чем это связано.
Очень часто понятия "валидный сайт" и "правильный сайт" различны. В большинстве случаев можно использовать код, который будет способствовать правильному отображению сайта во всех браузерах, но тем не менее, он не будет валидным.
Валидность и SEOБольшое влияние на поисковое продвижение сайта оказывает валидность кода. Существует информация, что поисковые системы ранжируют невалидные сайты ниже, чем абсолютно валидные. Кроме того, невалидность подразумевает неправильное отображение сайта в различных браузерах, что будет отпугивать посетителей, а значит скажется на показателе отказов и поведенческих факторах и, как следствие, может привести к потере позиций сайта в поиске. Валидность сайта - один из показателей его качества.
Правильно-невалидный кодНо, как уже отмечалось выше, бывает правильный невалидный код. Ярким примером этого являются CSS-хаки (т.е. такие свойства, которые меняют отображение нужного элемента в различных браузерах). Они очень часто являются невалидными. Конечно, можно отказаться от использования таких хаков, но, как правило, валидный код будет значительно длиннее и сложнее, поэтому в таких случаях оптимальнее выбрать использование хаков, вместо погони за валидностью. Как правило, такой код не приносит вреда и обнаруживается только при проверке с помощью валидатора.
Производит несколько проверок Вашего кода. Основные из них:
Основным аргументом против валидации является то, что она слишком строгая и не соответствует тому, как на самом деле работают браузеры. Да, 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-код страниц и 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 лишний. Убираем его.
Плохо знаете английский язык (а всегда всё описано именно на нём)? Копируете код ошибки и вставляете его в поисковик. Аналогичную тему наверняка уже описывал какой-то вебмастер или верстальщик, следовательно, вы всегда найдете способ решения задачи на специализированных ресурсах.
Хотя, если честно, я бы не тратил много усилий на ошибки в коде. Лучше просто позаботьтесь о том, чтобы сайт корректно выглядел на всех устройствах и браузерах.
Здравствуйте, дорогие читатели. Сожалею, что так долго не писал, решил немного заняться новым проектом и на 2 месяца забросил этот сайт . Исправляюсь, по вашим многочисленным просьбам пишу статью про валидность сайта валидность HTML кода и как проверить сайт на валидность и исправить ошибки.
Проверить сайт на валидность важно по нескольким причинам:
- выявить ошибки и устранить их
- для каждого пользователя (зависит от его браузера и версии) страница может отображаться по-разному. Браузеры смогут отобразить страницу с небольшими огрехами, но каждый отобразит по-своему.
- если браузеры могут автоматически исправить маленькие недочеты, то поисковые системы замечают любую погрешность. К примеру на западе поисковики серьезно относятся к валидности сайтов, у нас уже тоже не исключение.
Всему этому необходимо следовать. А задает эти нормы W3C Консорциум Всемирной паутины (World Wide Web Consortium).
Проверка HTML кода на валидностьW3C предоставляет для всех вебмастеров валидатор html кода, чтобы проверить валидность сайта .
Validate by URI — проверка по URL
Validate by File Upload — проверить загружаемый файл
Validate by Direct Input — вставка и проверка участка кода
Нажимаем кнопку Check и появятся результаты. По умолчанию настройки определяются автоматически, но если вы подгоняете под другой тип, то используйте свои.
Подмечу, что часто достаточно исправить 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 символа до красного выделения). И исправляем.
Часто встречаемые ошибки валидацииПример:
…
Ошибка валидатора : 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 »
Правильно:
…
Пример:
...
Ошибка валидатора : Unknown entity…
Пояснение : использовать & вместо &
Правильно:
...
Неверная вложенность
Пример:
Ошибка валидатора : Missing tag
Пояснение : элементы должны быть закрыты в обратном порядке их открытию
Правильно:
< li >...
Чувствительность DOCTYPE к регистру
Пример:
Ошибка валидатора: Missing DOCTYPE
Пояснение : DOCTYPE зависим к регистру
Правильно
:
Не прописан закрывающий «/»
Пример:
… style.css" type="text/css" media="screen">
Пояснение : «пустые элементы», как img или br , должны заканчиваться»/» c пробелом перед этим
Правильно
:
…style.css» type=»text/css» media=»screen» />
Тэги прописаны в верхнем регистре
Пример:
Ошибка валидатора: There is no such element…
Пояснение : в XHTML документах все элементы и атрибуты должны быть в нижнем регистре, т.к. этот язык регистрозависим и для него
Правильно
:
Значения атрибутов прописаны без кавычек
Пример:
...
Ошибка валидатора: Missing » »
Пояснение : значения атрибутов пишутся вместе с кавычками
Правильно
:
...
У img отсутствует атрибут alt
Пример:
Ошибка валидатора: required attribute «alt» not specified
Пояснение : у тега img атрибут alt должен быть всегда, значение можно оставить пустым, если картинка используется для оформления
Правильно :
В итоге вы сможете исправить ошибки сайта и сделать сайт валидным.
Проверка веб-кода на валидность - это проверка его на соответствие стандартам и сертификатам W3C.
W3C (Консорциум Всемирной паутины) - это технические законодатели Сети, которые разрабатывают стандарты и правила для написания кода. Сертификаты и стандарты W3C обязательны к исполнению для всех, кто работает в Сети. Единые стандарты в правописании кода нужны для того, чтобы все Сетевые приложения общались в едином языковом пространстве, на стандартных языках, и понимали друг друга во время работы с веб-документами.
W3C не только создает Сетевые стандарты, но и активно способствует в их соблюдении.
W3C имеет онлайн-сервисы для проверки кода HTML/XHTML и CSS на валидность.
Проверить код на соответствие стандартам W3C при помощи валидаторов W3C - лучший выход.
Бесплатные онлайн-сервисы от W3C для проверки кода на валидность.
Валидаторы от W3C имеют интуитивно понятный интерфейс. Работать с ними легко и просто.
Сервисы дают возможность проводить проверку в трех режимах и имеют, соответственно, всего три кнопки:
Проверить URL
(для проверки нужно указать адрес любой страницы сайта, доступного в Сети)
Проверить загруженный файл
(для проверки нужно указать путь к проверяемому файлу)
Проверить набранный текст
(для проверки нужно скопировать и вставить в окно валидатора проверяемый код)
Последние два способа особенно полезны при проверке веб-документов или текстов, находящихся на локальных компьютерах. Это могут быть веб-страницы, либо уже скачанные из Сети на локальный компьютер, либо генерируемые движками, расположенными на локальных серверах, типа «Денвер». В случае с Денвером - нужно сохранять страницу через браузер в виде файла с расширением.html и проверять затем, как отдельный файл, либо копировать исходный код веб-страницы прямо из браузера и проверять, как набранный текст.
Как пользоваться онлайн-валидаторами от W3C .
обращаемся к валидатору, по адресу:
(http://validator.w3.org/ - для проверки HTML или XHTML
http://jigsaw.w3.org/css-validator/ - для проверки CSS)
в открывшемся окне валидатора выбираем один из трех способов проверки
(url-адрес страницы сайта, локальный файл или набранный текст)
переходим на соответствующую вкладку
указываем объект проверки
(вводим url-адрес проверяемой веб-страницы,
либо путь к файлу на локальном компьютере,
либо вставляем проверяемый код, соответственно)
жмем кнопку «Проверить» и смотрим на результат проверки
Сервисы от W3C проверяют код на валидность и сразу указывают на ошибки, буде таковы имеются. Каждая ошибка будет прокомментирована. Комментарии, к сожалению, на инглиш. Так что, Google-переводчик - в помощь.Остается только, при необходимости, исправить код и снова проверить его на соответствие.
Валидаторы от W3C полностью бесплатны и автоматизированы. Поэтому, долбить их своей работой над ошибками можно долго и безнаказанно. Для этого, эти сервисы и созданы.
Нормальная альтернатива валидаторам W3C.
Кроме онлайновых серваков W3C по проверке веб-кода, очень хороший результат дает расширение HTML Validator для браузера Mozilla Firefox. Наличие такого дополнения в браузере облегчает работу веб-мастера и лишний раз доказывает, что Mozilla Firefox - «рульный» браузер.
Скачать расширение для мазилки можно здесь: http://users.skynet.be/mgueury/mozilla/
Установить расширение можно так:
- Запускаем Firefox.
Дальше: Меню - Инструменты - Дополнения - Расширения.
И, просто перетаскиваем мышью загруженный файл (расширение xpi) в открывшееся окно.
После этого, расширение установится автоматически.
или (второй способ):
- Запускаем Firefox.
Дальше: Меню - Файл - Открыть файл - указать путь к скачанному файлу.
После этого, расширение, опять-таки, установится автоматически.
После завершения установки - нужно будет перезапустить браузер.
При перезапуске - появится окно с выбором способа проверки веб-страниц:
"HTML Tidy", или "SGML Parser", или "Serial"
Выбираем способ "SGML Parser", как наиболее удобный и приемлемый вариант. Жмем соответствующую кнопочку.Теперь, в окне браузера, будет отображаться ярлык-значок дополнения, а рядом с ним - кнопка меню настройки дополнения.
У меня - вверху и справа:
HTML Validator для браузера Mozilla Firefox работает полностью в автоматическом режиме. Ему не нужно показывать, что проверять. Он проверяет все документы, которые будут открыты в Mozilla Firefox. Это очень удобно. Достаточно взглянуть на цвет ярлычка программы, чтобы понять, есть или нет проблемы в открытом документе.
В зависимости от результатов проверки, цвет значка может быть зеленый, желтый или красный, что обозначает следующее:
зеленый - «нет ошибок», все «ОК»
желтый - «нет ошибок, но есть предупреждения»
красный - «есть ошибки»
При клике по ярлычку будет открываться окно, содержащее исходный код просматриваемой страницы с пояснения и комментариями к ошибкам и предупреждениям, если таковы будут иметь место.
Примерно, такое.
