Валидатор как работает. Валидатор - что это такое? Зачем нужен валидатор микроразметки? Какая разметка считается правильной
Валидатором называют устройство, осуществляющее проверку проездных и иных документов, подтверждающих право доступа. Валидаторы широко используют в метро, автобусах и т. д.
Валидатор в понимании создателей сайтов — это компьютерная программа, проверяющая соответствие HTML-кода страниц сайта и CSS-кода на соответствие современным стандартам.
Нашёл онлайновый Валидатор на сайте http://validator.w3.org , запустил его, получил сообщение о 54-х ошибках HTML-кода и о 17-ти предупреждениях уже на главной странице этого сайта! Отмечу, что этот Валидатор является весьма быстрым и удобным, первое время использовал только его, ибо он признан лучшим для проверки HTML-кода.
Чтобы получать максимум информации от Валидатора, в его опциях отмечаю все, кроме крайней правой опции.
Заодно проверил и главную страницу Яндекса : 192-ве ошибки и 10-ть предупреждений. Рассмотрение кода главной страницы Яндекса в тот день показало, что код содержал лишь три длиннющие строки, то есть ими применено уплотнение кода. Причём многие ошибки можно трактовать, как преднамеренное нарушение стандартов: браузеры, мол, вполне разберутся.
Например, Валидатор возмущается отсутствием пробела между тэгами, а Яндекс предпочитает сокращать длину кода.
Надо будет со временем взять на вооружение этот способ ускорения загрузки путём уплотнения кода! Но безошибочный, то есть не приводящий к недовольству валидатора. Сейчас ещё слишком рано, да и разбираться с этим некогда. Мне пока что ясно лишь, что уплотнение придётся проводить сначала вручную, а потом поискать средства автоматического уплотнения кода перед публикацией, но не перед кешированием.
Вывод первоначально сделал такой: Яндекс чихает на валидность HTML -кода, буду чихать на него тоже.
Гораздо важнее, чтобы страницы сайта нормально отображались во всех браузерах (я проверял отображение весьма многих страниц сайта в 11-ти браузерах) и достаточно быстро загружались.
И всё-таки Валидатор весьма полезен: он указал мне ошибки кода, дал советы по исправлению ошибок и показал места ошибок, чем облегчил процесс избавления от ошибок. Валидатор помог мне избавиться от сотен ошибок, чтобы они не мозолили мне глаза, не заставляли браузеры напрягаться и не замедляли обработку страниц.
Исправил почти все найденные ошибки: на главной странице моего сайта валидатор находил лишь три ошибки — все они содержались в чужом коде: одна в коде, отвечающем за Комментарии, а две в скриптах FeedBurner’а. Избавился и от них!
На большинстве страниц сайта Валидатор находил эти же три ошибки, других ошибок обычно не бывало.
Отмечу, что валидатор особенно не любит таблицы, вставленные CMS WordPress на страницы сайта после копирования таблицы из Excel . Изрядно повозившись, разобрался с правкой кода сохраняемых таблиц и c переделкой файла стилей styles.css
Чёткий десятишаговый полуавтоматизированный алгоритм правки кода таблиц описал на странице .
Замечу, что даже страница , содержавшая много таблиц и сотни ошибок, имела хорошие показатели загрузки, но окончательная обработка кода явно задерживалась. Исправил все таблицы и на этой странице.
Дополняя и совершенствуя страницы, обязательно правлю таблицы, а Валидатор использую лишь для подсчёта числа ошибок: в его советы уже не заглядываю.
20.03.14 впервые получил от валидатора «зелёную метку»: его фавикон позеленел, а на странице появилась строка с сообщением «This document was successfully checked as HTML5!», имеющая зелёный фон. Такой метки раньше не видел ни у одной страницы ни этого, ни других сайтов!
Теперь я могу утверждать, что главная страница моего сайта лучше, чем главная страница Яндекса!
Для проверки валидности CSS-кода использовал частично русифицированный онлайновый сервис http://jigsaw.w3.org/css-validator/validator.html.ru Он выдал 283-ри предупреждения — попробую внести изменения в файлы стилей, чтобы постепенно избавиться от этих предупреждений. Давно подозревал, что используемого шаблона недостаточно хороши, а теперь убедился в этом. Подробности опубликую на странице, доступной по ссылке.
Приглашаю всех высказываться в
В данном случае речь пойдет не об устройствах контроля, а средствах проверки кода. Точнее инструмент называется «валидатор формата», в большинстве случаев называют просто валидатором. По контексту Вы должны понимать, что в данном случае разговор идет о проверке именно HTML кода, а не подлинности купюр и не о транспорте.
Слово английского происхождения, как и многое в среде компьютеров, и служит производным от valid – годный, действительный, правомерный.
Не смотря на то, что все, кажется, выполнено правильно и отражается на экране вашего компьютера именно так, как вам хочется, поверить свое творение никогда не помешает. Речь не идет о том, насколько красиво будет отражаться созданная Вами страница, а лишь о том, насколько грамотно она сделана с точки зрения стандартов.
Строгость отношения к странице и используемый стандарт прописывается в первой строке страницы в теге . Если не указано другое или же этот элемент отсутствует, то проверка кода будет проводиться по всей строгости правил последней признанной версии, коей на сегодняшний день является HTML5 . В этом теге можно немного смягчить условия проверки или указать другую версию языка, которая будет применена для просмотра страницы. Таким образом, тег указывает браузеру, какой стандарт применять для чтения и отображения страницы.
Существуют следующие стандарты DOCTYPE:
- HTML> - соответствует последнему принятому стандарту – HTML5 .
- - DOCTYPE для стандарта HTML 4.01 Strict (строгий );
- - DOCTYPE для стандарта HTML 4.01 Transitional (переходный );
- DOCTYPE HTML PUBLIC “-// W3 C// DTD HTML 4.01 Frameset// EN” http:// www. w3. org/ TR/ html4/ frameset. dtd> - DOCTYPE для стандарта HTML 4.01 Frameset (с фреймами);
- DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> - DOCTYPE для стандарта XHTML 1.0 Strict (строгий );
- - DOCTYPE для стандарта XHTML 1.0 Transitional (переходный );
- - DOCTYPE для стандарта XHTML 1.0 Frameset (с фреймами );
- - DOCTYPE для стандарта XHTML 1.1.
Примечание: Как Вы уже заметили, первый в списке DOCTYPE для стандарта HTML5 имеет самую простую запись. Каждый HTML-документ должен начинаться с указания DOCTYPE. Если этого не сделать, то различные браузеры будут отображать страницу по-разному. Впринципе, на работоспособность это не повлияет, но вот визуальная составляющая может пострадать.
Ошибки в коде могут не влиять на отображение страниц. Например, проверки известного бесплатного хостинга Ucoz практически всегда выявляют ошибки. Это не мешает правильно отображать элементы, и часто появляется при компилировании страниц средствами PHP интерпретатора. Большинство технических ошибок в таком случае не критичны, и могут только незначительно замедлить работу сайта.
Основным «подконтрольным» элементом служат именно HTML страницы, хотя валидность каскадных таблиц CSS и RSS-лент также может проверяться. Но не стоит забывать, что валидность – это только соответствие требованиям стандарта. Если сравнивать с реальной жизнью, то валидатор проверит, является ли созданный Вами продукт транспортным средством. А будет это велосипед с реактивным ускорителем или асфальтоукладочный каток с педальным приводом – ему все равно. Поэтому валидность кода еще не означает «правильность» создания страницы или элемента, вернее – не значит, что Вы увидите именно то, что хотели.
Проверка может проводиться различными средствами, но все они ссылаются на сайты стандартизаторов, т.е W3C сервисов. Контроль проводится по трем основным форматам (HTML, CSS, RSS), но в любом случае сначала необходимо проверить корректность HTML. Проверке подлежит, прежде всего, синтаксис документа с точки зрения технических параметров.
Сегодня большая часть сервисов предлагает проверку валидности кода онлайн, при этом не обязательно вносить код на страницу проверки, а достаточно указать лишь адрес проверяемого сайта. Предлагаемые «загружаемые» сервисы в любом случае ссылаются на сервисы W3C, проверяя введенный код на корректность и соответствие правилам. Одним из таких сайтов является http://validator.w3.org . Он позволяет проверить корректность сайта в Интернете, HTML-файла, либо самого HTML-кода. Существуют приложения к браузерам, позволяющие проверять код «на лету», в частности такое дополнение(Web Developer ) разработано для Mozilla Firefox в качестве встроенного инструмента для проверки корректности написанного кода. Вы устанавливаете дополнение, после чего появляется дополнительная панель в окне браузера. Открываете сайт или страничку и жмете на панели Tools- Validate HTML (CSS и др.) После Вас перекинет на вышеуказанную страничку, но с заполненными полями.
Давайте поговорим о средствах проверки кода. Специальный инструмент, который создаётся для этой цели, называется валидатором формата. В качестве примера будет использован HTML. Валидатор для этого языка разметки вполне подойдет для того, чтобы объяснить принцип и привести пример.
Зачем он нужен?
Бывает, что напишешь программный код, вроде всё и правильно работает, но проверить не помешает. Так, допустим, мы создали HTML-страницу. Когда мы вспоминаем про валидатор, это значит, что нас интересует, насколько грамотно она сделана с точки зрения принятого стандарта (чем лучше, тем более корректно и на большем количестве компьютеров она будет работать).
Настраиваем условия
Строгость, с которой будет осуществляться проверка страницы, прописывается в теге . Если её не указать, то она будет исследована самым тщательным образом, и в отчёте валидатор укажет все ошибки и отходы от стандартов. Также учитывайте, что проверка будет проводиться по правилам HTML5. Чтобы указать другую версию или смягчить поиск отклонений, используют данный тег. Кстати, кроме версии для HTML, существует ещё и валидатор CSS. Он позволит вам проверить построение каскадной таблицы стилей и её соответствие последнему стандарту. Этим шансом, если вы уж интересуетесь этой темой, лучше не пренебрегать.
Направления проверки тега DOCTYPE
На данный момент существуют такие типы проверки:
- Строгая в соответствии с последним стандартом.
- Переходная.
- Строгая.
- С фреймами.
Кстати, DOCTYPE желательно указываться всегда. Ведь если этого не сделать, разные браузеры, у которых различные установки, будут показывать сверстанную страницу по-разному. И нужный файл будет очень некрасиво отображаться. Следует отметить, что это влияет исключительно на визуальную составляющую, тогда как работоспособность не затронута.
Об ошибках замолвим слово
Даже при проверке небольшого документа валидатор кода может найти много промахов программиста. Обязательно ли их всех устранять? Нет. Большинство технических ошибок не являются критическими, максимум, что они могут сделать - это немного замедлить работу сайта. Хотя, если этот параметр является для вас ценным, игнорировать их не получится. Также следует отметить, что некоторые ошибки могут проявляться уже в момент компилирования РНР-интерпретатором.
Другие элементы
То, что HTML-валидатор проверяет код - это, безусловно, хорошо. А есть ли особенности относительно RSS-лент и каскадных таблиц CSS? Да, существуют валидаторы и для них. Помните: они проверяют только соответствие кода стандартам. А уж что там написано - их не волнует. Поэтому, если вас интересует в первую очередь качество страницы и сайта, необходимо проверить и их.
Онлайн-проверка
Чтобы не распылять свои усилия на различные программы, многие разработчики выбрали интернет-валидатор. Что это такое и как он помогает? Такие сервисы обычно уже настроены на проверку всех троих составляющих (RSS-лент, CSS и HTML). Их многофункциональность достойна похвал. Но корректность составления HTML лучше проверить отдельно ещё раз. Если говорить про преимущества онлайн-сервисов, то следует отметить, что нет необходимости копировать весь код. Достаточно ввести адрес сайта, и уже через мгновение будут отображены ошибки. Существуют также расширения для браузеров, которые тоже могут частично или полностью проверять, соответствует ли открытая страница принятым стандартам.
Что входит в валидацию?
Этот процесс делится на несколько частей:
- Проводится поиск
- Проверяется вложенность тэгов. Они всегда закрываются в обратном порядке относительно того, как отрывались. И если что-то не так - вы будете уведомлены.
- Проверка на соответствие указанному Document Type Definition. Автоматика сканирует и определяет, всё ли правильно (тэги, атрибуты) написано, относительно той версии языка разметки, которая заявлена.
- Проверка на наличие посторонних элементов. Проводится поиск того, что есть по факту в коде, но отсутствует в Document Type Definition.
Необходимо понимать, что это всё - логические проверки. В данном случае не является важным то, как реализован валидатор. Что это значит на практике? Если хотя бы одна проверка не пройдёт успешно, то код не будет считаться годным. В конце каждая серьезная программа выведет рекомендации по тому, что необходимо исправить (и может даже подскажет, как это сделать).
Аргументы для проведения
Главная причина, почему необходим валидатор микроразметки - это обеспечение кроссбраузерности для сайта или его отдельной страницы. Дело в том, что каждая программа, которая помогает просматривать интернет-страницы, обладает своим парсером. Поэтому единый способ быть уверенным, что код будет функционировать правильно во всех браузерах - прогнать его через валидатор. Что это ещё даёт?
Дело в том, что каждый браузер обладает своим механизмом корреляции ошибок в программном коде. Поэтому, возможно, он и сможет исправить ситуацию с невалидной программой, а может всё усугубить. Это были аргументы за, но есть и против.
Так, стоит отметить, что валидатор микроразметки является очень строгим. А браузеры умеют исправлять некоторые ошибки самостоятельно. Поэтому, если в первую очередь стоит задача правильной работы, внешний вид частично можно проигнорировать.
Отзывы, использующих валидатор
Что это даёт на практике? По сравнению с тем, что используется в реальных приложениях, валидатор проявляет чрезвычайные требования. Конечно, он может показать некоторые ошибки, которые мешают нормальной работе, но стараться угодить ему полностью - всё же не следует. Также часто указывают на то, что не всегда беспроблемно проходит проверка на посторонние элементы. А ведь к ним относятся и пользовательские атрибуты, которые не признаны стандартами, но используются разработчиками для облегчения производственных процессов.
Если у вас есть сомнения относительно эстетичности внешнего вида страницы, то они здесь напрасны. Так, если указать Doctype, будет переключен парсер браузера на определённый режим. Вот только это не приведёт к тому, что он будет загружен, и код будет проверяться на соответствие ему. Поэтому парсеры браузеров уже заранее настроены на то, что будет определённое отсутствие валидности кода. Так и с пользовательскими атрибутами: они успешно распознаются и обрабатываются. В качестве примера можно привести технологию ARIA. Она работает с атрибутами, которые дополняют семантическое значение кода, благодаря чему ругается валидатор. Что это: хорошо или плохо? С одной стороны, код работает и предоставляет специальные возможности. А с другой - отклонение от стандартов. Но в случае с ARIA это является вполне оправданным.
Заключение
Под конец хочется сказать, что каждый самостоятельно выбирает, использовать ему валидатор или нет. В рамках статьи были описаны особенности и нюансы данного шага, а решение остается за читателем.
Сегодняшнюю статью я хочу посвятить валидации сайта (то есть HTML). Сперва определим что означает этот термин! Валидация сайта — это проверка синтаксических ошибок, проверка вложенности тэгов и другие критерии. Как правило, валидаторы (сервисы для проверки сайтов на наличие ошибок в структуре документа) проверяют HTML-код на соответствие определенному стандарту, который указан в самом начале любой HTML-страницы первой строчкой. Если вы не знали для чего она, теперь будете знать! 🙂 Но для чего, собственно, нужна эта самая валидация и на что она влияет?
«Что такое валидация сайта?»
Как я уже говорил выше, валидация — это соответствие HTML-кода определенным правилам и стандартам. На смену XHTML пришла , которая значительно облегчила жизнь разработчикам. Дело в том, что в версии XHTML синтаксис был очень строгим. Если в HTML5 вы можете писать тэг переноса
как без наклонной черты, так в таком виде
, то в XHTML будет верным только последний вариант. HTML5 не так строг, да и к тому же появилось множество полезных тегов, но не об этом сейчас 🙂 .
«На что влияет валидация сайта?»
А сейчас ответим на второй вопрос.
Валидация сайта позволяет следить за правильным отображением сайта в разных браузерах. Например, если не закрыть тэг или где-то сделать опечатку в коде, в дальнейшем одна и та же страница может отображаться в разных браузерах по-разному. Также (CSS) могут отображаться не так как вы этого ожидали. Поэтому необходимо внимательно следить за этим.
Также я не мог не сказать что валидация влияет на поисковые системы: поисковые системы отдают предпочтение сайтам с валидным HTML-кодом . Имейте это в виду!
Ну что, я вас убедил в том, что валидация сайта действительно необходима? Тогда с теорией закончили и переходим к практике!
Способы проверки валидации
О каждом из способов я написал подробные инструкции в виде текста, а также, если кому-то лень читать и вникать, снял видео 😉 .
1 способ. Сервис validator.w3.org
Суть первого способа состоит в использовании сервиса для проверки валидности сайта. Как проверить валидность сайта с помощью сервиса validator.w3.org :
Переходите по ссылке выше, выбираете версию браузера Firefox и нажимаете на кнопку «Download». Затем выбираете необходимую операционную систему и устанавливаете как обычное дополнение. (те, кто не понял, смотрите видео 🙂)
2. Плагин для браузера Google Chrome —
Здесь вам необходимо нажать на кнопку «Бесплатно» и затем во всплывающем окошке нажать «Добавить».
Здесь также происходит обычная установка дополнения.
4. Плагин для браузера Safari —
Установка:
- Распакуйте архив с плагином.
- Скопируйте файл «Safari Validator.webplugin» в папку, где установлен браузер, затем /Library/Internet Plug-Ins (создайте папку, если она отсутствует)
- Сделайте двойной клик на файле Safari Validator.safariextz.
- Перезапустить браузер Safari.
Как установить плагин в Firefox и как пользоваться им я рассказываю во втором видео:
Вывод
Вот и вся статья. Надеюсь видеоматериалы, а также текстовая информация, которую я здесь представил поможет вам улучшить ваш сайт и сделать его еще более «привлекательным» для поисковых систем 🙂 , ведь мы все так к этому стремимся. Если возникают вопросы и сложности на каком-либо этапе — пишите в комментариях, будем вместе разбираться! Тот, кто дочитал до конца статью и проделал всё, о чем я писал — уже улучшил свой сайт и результат не заставит себя ждать. 🙂