Валидация сайта и ее влияние на работоспособность ресурса


Оглавление (нажмите, чтобы открыть):

Насколько важна валидность HTML и CSS

Добро пожаловать! Вот и подошли к концу новогодние каникулы. Впереди целый год плодотворной работы, намечено много интересных идей и теперь дело остается за малым — воплотить их в жизнь �� Вы можете следить за ходом событий и видеть как свобода мысли выражается в действии — достаточно подписаться на блог, уверяю Вас — это не займет много времени.

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

В прошлом году я уделил в своих публикациях достаточно много внимания такому термину как валидность, пришло время разобраться какие есть преимущества у валидного HTML. Ранее вместе с Вами мы разобрали как проверить на валидность HTML, CSS, а также RSS каналы и еще несколько интересных моментов.

Четыре основных фактора в пользу валидного сайта

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

Во-вторых, даже если подумать логически, убирая лишние теги и прочий «мусор», мы сокращаем вес страницы и тем самым уменьшаем время загрузки страницы, а браузеры тратят меньше времени на обработку таких страниц. Знаете, есть такая поговорка: «Меньше слов, больше дела», если ее перефразировать и применить к сайтостроению, то получится наподобие «Меньше тегов — больше слов».

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

Если внимательно изучить данный документ, то в пункте 3 «Верстка» изложено следующее:

В-третьих, если Вы занимаетесь созданием сайтов на заказ или продвигаете их, то наверняка должны знать языки HTML и CSS, а если так, то зачем намеренно создавать ошибки? К тому же, заказчики порой ставят перед исполнителем задачу: использовать валидный код, соответственно и расценки будут намного выше на выполняемую работу.

И, наконец, в-четвертых, не самую последнюю роль играет психологический фактор. Приятно осознавать, что проделанная работа соответствует определенные критериям и стандартам, в нашем случае стандартам Консорциума Всемирной паутины. А как известно, психология — великая вещь! Так что не стоит ее игнорировать.

Эх, так приятно видеть такую надпись ��

Вот такие доводы у меня получились в пользу валидации. А Вы считаете это необходимостью или вовсе не принимаете во внимание? Может у Вас есть другие доводы, которыми хотите поделиться?

Почему валидный код важен для сайта | W3C Val >

    Admin17 марта 2020

Что такое валидация HTML?

Валидация HTML является одним из основных факторов, влияющих на качество веб-дизайна.

Консорциум Всемирной паутины (W3C) — это международное сообщество, которое де-факто определило стандарты написания HTML кода на вашем веб-сайте. Эти правила были созданы для того, чтобы браузеры могли корректно обрабатывать код и правильно отображать веб-страницы. Было много версий стандартов HTML, последней версией является HTML5. Она добавила интересные функции, такие как хранение данных локально в браузерах пользователей, встроенная поддержка аудио и видео, поддержка векторной графики и прочее.

В Интернете доступно множество инструментов, которые специально созданы для проверки кода в соответствии со стандартами W3C. Для HTML5 самым популярным является Nu HTML Checker, а для вашего удобства вы можете им воспользоваться на нашем сайте.

На что влияет валидность кода

    Поддержка кроссбраузерности.
  • Если ваш HTML-код валиден, он будет корректно отображаться во всех основных веб-браузерах (Chrome, Safari, Firefox, Opera, Edge/Explorer), а также будет выглядеть одинаково или почти одинаково в каждом из них. Оптимизация в поисковых системах.
  • Это повысит вероятность правильной индексации содержимого вашей страницы поисковыми системами. Ваш контент должен соответствовать семантической верстке, и один из способов обеспечить это является проверка кода. Валидатор поможет убедиться, что все HTML-теги закрыты и вы их правильно используете, а так же покажет другие важные и распространенные проблемы, которые могут помешать нормальной индексации поисковыми роботами. По утверждению Google, правильность кода не влияет на позиции в поисковиках. Но при этом наличие ошибок в коде способно негативно повлиять на сканирование микроразметки и адаптивность под мобильные устройства. Возникновение ошибок в браузере.
  • Бывают ситуации, когда владелец сайта недоумевает, почему один блок «съехал». Или почему в одном браузере все в порядке, а в другом верстка плывет. И пытается решить это при помощи CSS. Вместо этого в первую очередь следует проверить код на ошибки – высока вероятность того, что проблема кроется именно в этом. Чистый HTML-код.
  • Если ваш код проверен и написан правильно, он сделает задачу по его обновлению и внесению изменений намного проще. Это значительно снизит шансы, что редактирование CSS или добавление фрагмента кода HTML приведет к нарушению вашей веб-страницы. Поддержка новейших версий веб-браузера.
  • Браузеры часто обновляются и, как правило, стараются поддерживать и соблюдать стандарты HTML W3C. Если ваш код соответствует требованиям W3C, он должен снизить шансы на появление «сломанной» страницы в будущих версиях.

Частые вопросы

    Валидатор показывает ошибки на моем сайте, но он отображается нормально.
  • Условно ошибки можно разделить на две категории: критические и не критические. И, несмотря на то, что современные браузеры стараются понимать такой код – это не дает гарантии корректного отображения во всех браузерах и устройствах. Помимо этого, некоторые из ваших материалов могут не индексироваться должным образом поисковыми системами. Валидатор ругается на нестандартные атрибуты.
  • Атрибуты, которые не задокументированы W3C считаются ошибочными. Однако, в некоторых случаях их удаление может привести к потере функционала. Например, атрибуты flag и price служат для связки целей. Я бы не стал считать это ошибкой, которая может навредить сайту и удалять их не нужно. На моем сайте тысячи страниц с ошибками.
  • Большинство сайтов и интернет-магазинов работают на различных CMS (система управления сайтом). Это означает, что страницы выводятся с помощью шаблона. Как правило, для того чтобы избавиться от ошибок на типовых страницах – достаточно исправить их в шаблоне. Но иногда код находится в базе данных – в этом случае нужно работать индивидуально над каждой страницей. Такой же вариант работы, если у вас сайт на чистом html.

Как исправить ошибки кода

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

Владельцам сайтов, не обладающим такими навыками без посторонней помощи не обойтись. На нашем сайте вы можете заполнить заявку на бесплатный анализ и оценку стоимости работ. А при одновременном заказе исправления ошибок кода и ускорения сайта вы получите 10% скидку.

Если вы не знаете, как исправить ту или иную ошибку – спрашивайте в комментариях, постараюсь помочь.

Валидация контента сайта по W3C

Что такое валидация html кода?

Html, как известно, язык разметки, который является основой для подавляющего большинства страниц в интернете. Как у любого другого языка, у html есть правила написания — синтаксис. Валидный html-код это код, который соответствует всем рекомендациям написания кода — спецификации.

Спецификации. Что это?

Как у любого другого языка, у HTML существуют свои правила написания — синтаксис. Эти правила пишет команда профессионалов, заинтересованных в развитии html и занимающихся разработкой новых элементов, отвечающих параметрам современных устройств, актуальных современным технологиям и, самое главное, отвечающих современным требованиям безопасности. Именно правила написания элементов html, установленные разработчиками языка, называются спецификацией.

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

Каждый документ, использующий html код, должен следовать правилам языка. Последняя опубликованная версия HTML — пятая и стала относительно сложная, так что вебмастера, не прочитавшие последнюю версию спецификации, легко могут сделать ошибки в коде.

Cколько спецификаций существует.

Начиная с HTML5, разработчики и производители браузеров могут выбирать между двумя разновидностями одного и того же языка разметки: спецификациями, разработанными консорциумом W3C, и тех, что разработаны WHATWG.

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

Однако при использовании в своих проектах только что появившихся нововведениях в одной из спецификаций, у вебмастеров могут возникнуть проблемы. Например Дэвид Бэрон из Mozilla заявил:

Если HTML-спецификации W3C и WHATWG различаются, то мы стараемся следовать спецификации WHATWG.

Зачем нужна валидация?

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

Разбор ошибок на примере главной страницы сайта Клондайка.

В данной части статьи разберем валидацию html5 по спецификации W3C на примере главной страницы сайта студии Клондайк.

Как проверить HTML код на валидность? Для проверки валидации нашего HTML5 кода используем известный HTML Validator для проверки соответствия кода w3c стандартам. Не смотря на то, что не все HTML ошибки приведут к проблемам поискового ранжирования, некоторые из них могут затруднить поисковым системам успешно индексировать страницы и могут испортить все ваши SEO усилия.

Переходим на сайт валидатора от W3C , выбираем вкладку «Validate by URL», в поле «Address» вставляем адрес проверяемого сайта и жмем кнопку «Check».


Через пару секунд получаем результат проверки.

В нашем случае было обнаружено 36 ошибок.

Рассмотрим каждую ошибку по отдельности.

Как мы сразу видим, валидатор показывает что на нашей главной странице присутствует сразу 24 однотипных ошибки — у нас не проставлен атрибут alt у картинок.

Смотрим исходный код сайта:

Действительно, у картинок не прописан атрибут alt .

Зачем нужен этот атрибут? Когда загружается страница, вначале загружается текст из атрибута alt , а уже после идёт смена текста на изображение. Если в браузере отключена загрузка изображений, то на месте изображения будет альтернативный текст (из атрибута alt ).

Что ж, приступим к исправлению. Для каждой картинки мы пропишем соответствующий ей атрибут alt .

Далее убираем лишний закрывающий тег

Валидатор показывает нам, что на проверяемой странице сразу в 4 местах использован устаревший тег nobr .

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

Мастер Йода рекомендует:  TOП-50 Python-проектов в 2020 самые востребованные инструменты

Переходим к следующей ошибке

Смотрим исходный код и находим искомое место:

Идем в шаблон компонента, находим:

Удаляем лишнее value=» » и у нас остается:

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

Однако это не является ошибкой, поэтому не будем трогать.

Отсутствие заголовка внутри тега тоже не является ошибкой, поэтому дабы не сломать шаблон, не станем лезть в него и править то, что валидатор W3C HTML5 не указал как Error.

В данном случае валидатору не понравился значок & и предлагает нам заменить его на & . Однако, если мы глянем исходный код:

то увидим что делать нам этого никак нельзя. Поэтому просто игнорим это и идем дальше.

В этому случае валидатор ругается на атрибуты width и height для тега .

Смотрим исходный код:

и понимаем что это API Твиттра и ничего мы с ним поделать не можем. Так что пропускаем.

У нас остался один не исправленный, или хотя бы не разобранный пункт — не прописан alt у очередной картинки.

Лезем в исходный код и видим что это код Яндекс.Метрики.

Ок. Сюда нам тоже лезть не с руки, ибо такой код генерирует сам Яндекс.

Вот мы и прошлись по всем ошибкам которые нам показал валидатор W3C HTML5. Что мной было уяснено в ходе написания этой статьи:

  • Верстка должна быть валидной уже на этапе написания шаблона сайта, ибо исправлять верстку в дальнейшем — выйдет себе дороже.
  • Иногда не получится выкрутиться и написать полностью валидный шаблон сайта. Некоторые теги устарели для спецификации, однако они выполняют очень важную роль для отображения элемента или контента. Или вставляя на сайт виджеты со сторонних ресурсов мы рискуем вставить код на который будет ругаться валидатор, т.к. внешний ресурс, в силу различный обстоятельств, не позаботился о том чтобы код виджета был валидным.
  • Для того чтобы код сайта был 100% валиден HTML5 по W3C разработчику сайта придется потратить в несколько раз больше времени, в то время как клиент не всегда готов оплачивать время затраченное на вылизывание шаблона.

Ну и на последок проверим на соответствие рекомендациям спецификации HTML5 по W3C несколько популярных сайтов:

Влияет ли валидность кода на SEO?

Валидность или невалидность тегов по стандарту w3.org не имеет к SEO оптимизации никакого отношения. Намедни, мне с жаром доказывали эту точку зрения.

Аргументы ЗА:

  • Любые поисковики точно также съедают ссылки с target=_blank
  • Все браузеры отлично понимают теги br, pre и другие, «не одобренные» в текущем стандарте.

Следовательно, оформление страниц на сайте никак с оптимизацией сайта не связано. А советы некоторых SEO-гуру блюсти стандарт какой-то определенной организации – это или непонимание принципов SEO (что относится к оптимизации, а что нет), или сознательный ввод в заблуждение клиента. Благо, этот вопрос позволяет имитировать бурную деятельность «работы над сайтом», легко жонглировать заумными терминами. И вообще WC3 валидация крайне слабый показатель качества сайта.

Больше того, в умелых руках тот же target=_blank полезен для СЕО. Клиент искусственно чуть дольше задержится на сайте, хотя бы на время закрывания старых вкладок – круто же!

До недавнего времени сам так думал и инструмент Validator вообще игнорировал. А идею «Давайте все открывать в новом окне!» прочел в одном сеошном блоге. Не буду ссылку давать, плохая это мысль, в корне плохая!

Главный аргумент ПРОТИВ:

Робот перед индексацией автоматически делает запрос на W3C для проверки на валидность. Наверное, зачем-то им эта информация при оценке страниц нужна?

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

Однако, грубые ошибки (неправильно закрытые теги, значения атрибутов тегов без кавычек) повышают риск ошибки роботом распознавания контента на странице. В силу консервативности (сомнительно = плохо), страница наверняка будет исключена из рейтинга.

Плюс, очень грязный код может привести к долгой обработке браузером страницы. А время загрузки сайта – очень даже важный SEO фактор!

Аттрибут target=_blank

Да, роботом атрибут target=_blank просто игнорируется. В некоторых случаях использование атрибута оправдано, например, для открытия в новом окне небольшого размера окон с help или формой обратной связи. Тем не менее, при массовом использовании, нарушается корректность статистики (Analytics и Метрики). Однако, сейчас принято, что ссылка открывается в новом закладке только по действия пользования, а не по умолчанию, поэтому массовое использование атрибута клиентов может только взбесить. Также нарушается корректность статистики (Analytics и Метрики), т.е. даже если сейчас этот фактор не учитывается (возможно), то в будущем Google такое пофиксит в два счета и будет прав. Естественный выбор пользователя важнее искусственной накрутки.

Тег

Поисковые системы тщательно анализируют контент. На зря всем копирайтерам советуют дробить текст н небольшие абзацы. Корректная разбивка на абзацы текста ОЧЕНЬ важна, поэтому тег
неприемлем, необходимо использовать только тег

Тег
допустим, например, при цитировании. Хотя и тут аккуратнее описать правила цитирования с помощью blockquote и стилей в CSS файлах.

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

О валидации сайтов

В представленной вашему вниманию статье мы расскажем о валидации сайта, проще говоря, об основах HTML. Для начала необходимо разобраться, что представляет собой данный термин – валидация. Валидация подразумевает проверку вложенных тэгов сайта, его синтаксические ошибки и другие параметры. Проверку кода HTML выполняют специальные сервисы, которые также называются валидаторы. Стандарты указываются в первой строке каждой страницы с кодом HTML. Если ранее вы не догадывались, для чего необходима данная строка, теперь знаете! Однако так ли необходима эта самая проверка? На что конкретно она может влиять?

«Что представляет собой валидация?»

Мы уже упоминали о том, что данный термин используется для обозначения специальной проверки кодов HTML соответственно стандартам и правилам. На сегодняшний день задача разработчиков несколько упростилась, поскольку XHNML была заменена новой технологией HTML5. Если вы – разработчик, наверняка помните, какого строгого синтаксиса приходилось придерживаться в версии XHTML. Так, например, тэг переноса можно было писать лишь в таком виде: br /> . А в более усовершенствованной версии можно писать просто: br > . Помимо этого было разработано много других полезных тэгов, однако речь сейчас не о них.

«На что может влиять валидация?»

Этот вопрос настолько популярен, что не ответить на него просто нельзя.

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


Важно также принимать во внимание и тот факт, что поисковики более предпочтительно показывают сайты с валидным кодом! Учитывайте это!

Надеемся, что мы смогли вас переубедить в необходимости валидации. Поэтому смело можем переходить к практике!

Как проверять валидацию

Валидация на сайте validator.w3.org:

1. Для начала необходимо перейти по ссылке: validator.w3.org. Вы сразу же увидите страницу с тремя вкладками. Мы будем с вами работать лишь по вкладке «Validate by URI», то есть проверять сайт, который вы разместили в Интернете. Однако если вы захотите воспользоваться другими вкладками, у вас не должно возникнуть каких-либо трудностей.

2. Теперь необходимо нажать «More options», а затем выставить следующие значения:

Character Encoding — обозначает кодировку. НО! В том случае, если она уже размещена между тегами head > (откройте свой сайт в любом браузере и нажмите горячие клавиши CTRL+U, после чего должна появиться строка с такими надписями:
), затем отмечаем (detect automatically).

Document Type — тип того документа, с которым идет работа. Размещен в первой строчке HTML (снова используем горячие клавиши CTRL+U, когда открыли сайт в веб-браузере, и находим первую строку

). Если она выглядит примерно так, в этом случае также нужно оставить значение (detect automatically).

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

3. Теперь необходимо заполнить поле «Address» адресом вашего сайта (пример показан на изображении):

Находим кнопку «Check» и нажимаем на нее

4. С этого момента начинается валидация сайта, а через небольшой промежуток времени вы сможете увидеть ее результаты. Должна появиться страница со следующей надписью: «This document was successfully checked as HTML5!». Она говорит, что валидация прошла успешно в соответствии с определенным типом документа, например HTML5.

О присутствии ошибок в коде HTML вас оповестит красная надпись. Ошибки необходимо устранить. Делается это очень легко. Для этого нужно скопировать название ошибки и вбить его в любой поисковик, например Гугл. Он выдаст вам множество результатов того, как с подобной проблемой боролись другие. Если желания заниматься этим нет – поручите это задание специалисту, который разбирается в коде.

Вывод

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

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

Проверка валидности сайта

Валидацией называется проверка HTML-кода сайта на ошибки и его соответствие стандартам, которые определены Консорциумом Всемирной паутины. Многие оптимизаторы и веб-мастера недооценивают её важность и приступают к «чистке» кода только когда выполнены другие задачи по технической оптимизации онлайн-ресурса. Например, после того, как корректно составлена карта сайта. Этим они замедляют движение блога или интернет-магазина к первым позициям выдачи поисковиков.

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

    • «Поломка» HTML часто является причиной неправильного отображения сайта в разных браузерах и на разных устройствах. В результате пользоваться онлайн-ресурсом могут, например, только те, кто зашел на него через Гугл Хром. В то же время, посетители, использующие Сафари, будут постоянно сталкиваться с ошибками на таком сайте или вообще не смогут просмотреть его содержимое.
  • Некоторые недобросовестные разработчики бесплатных шаблонов и тем помещают в HTML ссылки, рекламу или даже вредоносный код. После проверки на валидность эти проблемы легко обнаружить.
  • После удаления лишней информации с кода размер веб-страницы становится меньше и она начинает загружаться быстрее.
  • Веб-пауки замечают некачественный HTML-код и сокращают частоту посещения онлайн-ресурса.

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

Из чего состоит проверка валидности сайта

Проверка валидации состоит из трех этапов:

  • Поиск ошибок в синтаксисе. Например,

В этом коде закрывающий тег начинается не с . Из-за этого текст, который идет за >/h3 >, будет отображаться как заголовок третьего уровня.

  • Проверка правильности вложенности тегов. Например:

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

  • Проверка на соответствие правилам DTD (Document Type Definition). Например, повторяющийся атрибут id.

Как проверить валидацию сайта

Несмотря на то, что изложенная информация может показаться сложной и непонятной, валидация сайта проверяется за 5 секунд. Рекомендуем использовать для этих целей официальный валидатор Консорциума Всемирной паутины validator.w3.org.

Он предлагает три варианта проверки:

  • Validate by URI – укажите URL страницы и инструмент проверит её код.

Обратите внимание! При выборе этого варианта проверяется только веб-страница по указанной ссылке. Если уже есть корректно составленная структура сайта и нужно проверить все веб-страницы, вводите адрес каждой из них.

  • Validate by File Upload – если нужно проверить на валидность HTML-файл, который хранится на компьютере, этот вариант для вас.
  • Validate by Direct Input – этот вариант подходит тем, кто не хочет допустить ошибки, когда пишет код – валидация проверяется после вставки фрагмента HTML.

Выберите один из способов, выполните необходимое действие (вставка URL, загрузка HTML-файла или вставка фрагмента кода) и нажмите кнопку Check. Через 3–5 секунд на странице появится информация о найденных ошибках и предупреждениях с указанием строчек кода, в которых обнаружены проблемы, и их кратким описанием.

Мастер Йода рекомендует:  Как победить на хакатоне — 10 полезных советов

Далее дело остается за малым – исправить найденные ошибки. Для этого передайте результат проверки программисту или верстальщику вашей компании или, если знаете HTML, исправьте их самостоятельно.

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

Понравилась статья? Расскажите о ней друзьям:

Что такое валидность и валидация и зачем они нужны?

В последнее время я получила несколько вопросов от пользователей, касающихся валидности моих тем и валидации вообще. В этом посте хочу ответить на них.

Что такое валидность?

Считается, что валидность кода — это единая, универсальная характеристика любого кода.
На самом деле, валидность это соответствие html кода документа определенному своду правил, указанному в доктайпе или подразумеваемому в HTML5.
То есть, валидность — понятие относительное, поскольку правила бывают разные, и требования у них тоже.
Чтобы было понятнее, приведу пример, который я нашла на сайте css-live.ru :

К строительству жилых домов и атомных электростанций применяются разные СНиПы (строительные нормы и правила), поэтому документ, валидный по одному своду правил, может быть не валидным по другому (хороша была бы АЭС, построенная по нормативам жилого дома!).

Доктайп обычно указывает на документ, по которому планируется валидация html, но может быть выбран из прагматических соображений для выбора оптимального режима браузеров.
XHTML5 может вообще не иметь доктайпа, но быть валидным.


Валидация — что это?

Простыми словами, валидация — это процесс проверки кода и приведения его в соответствие с выбранным доктайпом (DTD).

Как проверяется валидность?

Валидность HTML кода проверяется инструментом, который называется валидатором.
Самый известный валидатор w3c — https://www.w3.org .
Валидатор w3c производит несколько проверок кода.
Главные из них:

  1. Проверка на наличие синтаксических ошибок:
    Пример c habrahabr.ru/post/101985 :
    является корректным синтаксисом, несмотря на то, что является недопустимым HTML-тэгом
    Так что проверка синтаксиса является минимально полезной для написания хорошего HTML-кода.
  2. Проверка вложенности тэгов:
    В HTML документе тэги должны быть закрыты в обратном порядке относительно их открытия. Эта проверка выявляет незакрытые или неправильно закрытые теги.
  3. Валидация html согласно DTD:
    Проверка того, насколько код соответствует указанному DTD — Document Type Definition (доктайпу). Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа).
  4. Проверка на наличие посторонних элементов:
    Она обнаружит все, что есть в коде, но отсутствует в доктайпе.
    Например, пользовательские тэги и атрибуты.

Для проверки валидности CSS кода существует валидатор css — https://jigsaw.w3.org/css-validator .
Валидность кода — это результат механической проверки на отсутствие формальных ОВ, согласно указанного свода правил.
Нужно понимать, что валидация — инструмент, а не самоценность.
Верстальщики с опытом обычно знают, где можно нарушить правила валидации HTML или CSS, а где нет, и чем грозит (или не грозит) та или иная ошибка валидации.
Примеры того, когда не валидный код делает сайт:

  • более удобным и быстрым — пользовательские атрибуты для Javascrip/AJAX или
  • SЕО оптимизированным — разметка ARIA.

Понятно, что в валидности ради валидности нет никакого смысла.
Как правило, опытные верстальщики придерживаются следующих правил:
— В коде не должно быть грубых ошибок.
— Незначительные можно допустить, но только по обоснованным причинам.
В отношении допустимости ошибок валидации html/CSS:

Ошибки валидации (ОВ) можно разделить на группы:

  • ОВ в файлах шаблона:
    Их не сложно найти и исправить.
    Если, какие то из мелких ошибок помогают сделать сайт более функциональным или быстрым, их можно оставить.
  • ОВ в сторонних скриптах, подключенных на сайте:
    Например, виджет Вконтакте, скрипт Твиттера или видео-файлы с ютуб.
    Исправить их никак не удастся, поскольку эти файлы и скрипты находятся на других сайтах и у нас нет к ним доступа.
  • CSS-правила, которые валидатор не понимает:
    Валидатор проверяет соответствие кода сайта определенной версии HTML или CSS.
    Если вы использовали в шаблоне правила CSS версии 3, а валидатор проверяет на соответствие версии 2.1, то все правила CSS3 он будет считать ошибками, хотя они таковыми не являются.
  • ОВ, которые поневоле приходится оставлять на сайте, чтобы получить нужный результат. Например:
    • теги noindex. Они не валидны, но очень нужны и с этим приходится мириться.
    • хаки. Чтобы получить корректное отображение сайта в некоторых браузерах, иногда, приходится использовать хаки — код, который понимает только определенный браузер.
  • Ошибки самого валидатора.
    Часто он не видит каких то тегов (например, закрывающих) и сообщает об ОВ там, где ее нет.

Получается, что на работающем сайте практически всегда будут какие-то ОВ.
Причем, их может быть очень много.
Например, главные страницы Google , Яндекса и mail.ru содержат по несколько десятков ошибок.
Но, они не ломают отображение сайтов в браузерах и не мешают им работать.
Все написанное выше относится и к моим темам.

В сложных темах есть:

  • WordPress функции (например the_category()), которые дают невалидный код.
  • Вывод видео с видеохостингов, например, с YouTube, а в коде YouTube очень много ОВ, на которые ни вы, ни я не можем влиять.
  • Кнопки социальных сетей, которые подключаются при помощи скриптов этих сетей и содержат ОВ.
  • Правила CSS3 и HTML5, которые валидаторы старых версий считают ошибками.
    В то же время, валидаторы версий CSS3 и HTML5 считают ошибками старые правила :).
  • Иногда, чтобы добиться корректного отображения в браузере Internet Explorer или старых версиях других браузеров приходится использовать, так называемые хаки — код, который понимает только определенный браузер, чтобы написать правила отображения сайта именно для этого браузера.

В итоге получить полностью валидный код можно только при верстке очень простых тем, т.е. тем, которые содержат минимальное количество функционала.
После окончания верстки любой своей темы я всегда проверяю ее валидатором и исправляю все ОВ, которые можно исправить без потери работоспособности темы.
Т.е., если стоит выбор между работающим функционалом и валидностью — я выбираю функционал.
Если вы верстаете свои темы, советую поступать так же.
С моей точки зрения (а также, точки зрения большинства верстальщиков) отношение к валидации html/CSS, как к истине в последней инстанции ошибочно. В обязательном порядке нужно исправлять только те ОВ, которые:
— мешают браузеру корректно отобразить страницу (незакрытые и неправильно вложенные теги).
— замедляют загрузку страницы (неправильно подключенные скрипты).
— можно исправить, не нарушая работоспособность темы.
Надеюсь, я ответила на все вопросы о валидации.

Влияние качества HTML страниц на их ранжирование

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

Что такое валидный HTML код?

Почему корректный HTML является важным фактором для SEO ?

Поисковые системы должны спарсить (разобрать) HTML код на ваших страницах чтобы найти релевантный контент. Если ваш HTML код содержит ошибки, поисковые роботы могут не найти контента. Программы поисковых систем подчиняются стандартам HTML . Пропущенный закрытый тег и сломанная верстка может иметь большое значение для ботов. Общаясь на общем языке с поисковыми роботами, вы должны четко объяснить, как что должно выглядеть и какой элемент чем является.

Битые ссылки на странице сильно замедлят индексацию вашего сайта, особенно при большом количестве страниц. Валидный HTML позволит роботам легко индексировать сайт и быстро добавлять его в свой индекс.

В руководстве для веб-мастеров Google советуют некоторые правила оформления для упрощения работы бота со страницами вашего сайта, которые являются правилами валидного HTML :

  • Создайте сайт с четкой иерархией и текстовыми ссылками.
  • Убедитесь, что все ссылки работают. Проверьте правильность кода HTML .
  • Используйте для проверки сайта текстовый браузер, например Lynx, поскольку большинство сканеров поисковых систем видят сайт точно так же, как Lynx. Если из-за таких элементов, как JavaScript, файлы cookie, идентификаторы сеансов, фреймы, DHTML или Flash, просмотреть весь сайт с помощью текстового браузера не удается, то и сканерам поисковых систем, скорее всего, тоже будет трудно его обработать.

Проведение экспериментов о проверке влияния валидности HTML на позиции в серпе

Ряд веб-мастеров придерживаются мнения о том, что качество верстки или валидность HTML страниц никоим образом не влияет на ранжирование сайта в результатах поиска. При этом они ссылаются на тот факт, что по большинству ключевых запросов в серпе (поисковых результатах) на первых местах содержатся далеко не те сайты, которые соответствуют w3c стандартам. Однако, не стоит забывать, что на ранжирование в поисковых системах влияет множество факторов, работающих в совокупности. Некоторые из вебмастеров решились провести эксперименты для решения этого вопроса.

Результаты одного из таких экспериментов приведены в статье Марка Даоста [Заботится ли Google о валидности HTML ]. Вкратце, автор делает два сайта, один из которых содержит ошибки в коде, а второй является валидным. Оба оптимизированы под два ключевых слова. После индексации и проверки позиций он меняет код в сайтах, исправляя в первом ошибки и добавляя их во второй. Вывод эксперимента Марка в том, что Google меняет позиции сайтов в независимости от корректности HTML кода. В двух случаях не удалось подтвердить или опровергнуть гипотезу о положительном влиянии корректного кода на позиции в выдаче.

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

12 мая 2007 г. Шаун Андерсон опубликовал статью о тестировании Google на предпочтение валидного HTML и получил положительный результат, причем автор приводит примеры и доказательства чистоты эксперимента. Помимо влияния корректного HTML автро также исследует влияние валидного CSS . Выводы автора в том, что валидные HTML и CSS положительно влияют на позиции страницы в поисковых результатах. На его же сайте можно почитать комментарии других пользователей к посту.

Другой эксперимент проводился раннее. 30 января 2006 г. Майк Девидсон опубликовал уроки из хитрого сео-теста. В указанной статье приведен подробный отчет об эксперименте, в том числе учитывающий и валидность HTML кода. Майк отвечает на вопрос: можно ли получить пенальти за использование невалидного HTML кода? Ответ – да. По его словам, Google каким-то образом классифицирует страницы, основываясь на том, как хорошо они отдаются и как написаны. Незакрытый атрибут может привести к тому, что часть контента может быть воспринята как значение атрибута. И в выводе автор заключает: не совсем понятно, влияет ли валидный код на поизиции в поиске, однако совершенно понятно, что некоторые ошибки в коде могут привести к вылету страницы или сайта в целом из индекса.

Как проверить HTML код на валидность?

Для проверки валидации вашего HTML кода существует множество бесплатных сервисов. Многие профессионалы используют известный HTML Validator для проверки соответствия кода w3c стандартам.

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

Валидаторы W3C : как правильно проверить сайт на ошибки CSS И HTML

HTML – это единый язык разметки, применяемый практически ко всем веб-страницам.

Как и в любом языке, у гипертекста есть свои правила, синтаксис.

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

История HTML началась в 1991 году и развивается до сих пор.

При проверке релевантности контента поисковые боты большое внимание уделяют вопросу соответствия стандартам html.

Даже одного пропущенного знака, битой ссылки или неправильной верстки достаточно, чтобы алгоритм не пропустил такой контент и не проиндексировал веб-страницу.

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

Безусловно, все это негативно скажется на позициях сайта.

Поэтому чтобы ресурс успешно прошел индексацию, необходимо провести валидацию.

Это процесс проверки на соблюдение установленных норм, корректности проставления кода страницы.


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

Проверка W3C html – это анализ кода веб-сайтов для определения соответствия стандартам форматирования.

В этой статье мы подробно остановимся на стандартах W3С, преимуществах их использования и расскажем про наиболее эффективные и удобные сервисы проверки.

Что означает W3C?

Аббревиатура W3C (World Wide Web) обозначает сообщество единых стандартов.

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

Мастер Йода рекомендует:  MIT представил новую супербыструю технологию 3D-печати

С развитием Сети между создателями различных браузеров постоянно ведется ожесточенная борьба за первенство.

И были времена, когда разработчики даже пытались внедрить свои собственные стандарты.

Однако первоисточнику удалось сохранить стандарты таких веб-страниц, какими мы видим их сейчас.

И сегодня веб-мастерам остается лишь придерживаться этих правил при создании ресурсов.

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

В этой статье мы будем много говорить о стандартах HTML, и в связи с этим возникает резонный вопрос: а для чего вообще они были введены?

Первоочередной задачей таких стандартов является обеспечение совместимости.

До их введения разработчики особо не заботились о том, как сайты будут отображаться на других устройствах.

Как правило, веб-ресурс создавался под конкретный браузер, устройство.

Но с развитием технологий пришло понимание необходимости создать единый стандарт языка разметки веб-страниц.

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

Итак, целью утверждения стандартов html является:

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

Преимущества валидатора W3C

W3C-валидатор призван проверить, насколько сайт соответствует единым стандартам и, при обнаружении неточностей, указывает на них.

Если игнорировать данный анализ, то может оказаться, что плохой трафик, проблемы с продвижением возникают из-за банальных неточностей кода.

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

А, как известно, проблемы с загрузкой сайта или неправильным его отображением приводят к тому, что пользователи быстро покидают эту веб-страницу.

Поэтому использование сервисов проверки дает массу преимуществ:

1. Поднятие рейтинга в поисковых системах

Проверка html-кода поможет избежать неточностей или ошибок в коде, облегчая работу СЕО сайта.

Алгоритмы поисковиков настроены таким образом, что при индексации боты проверяют код гипертекста на предмет его соответствия единым стандартам.

При обнаружении ошибок они попросту игнорируют страницу (или ее часть), оставляя ее непроиндексированной.

Вообще вокруг темы взаимосвязи валидации сайта и его дальнейшего продвижения существует множество мифов, и мнения экспертов на этот счет разнятся.

Идеально прописанный код страницы еще не является гарантом ее дальнейшего высокого рейтинга.

Об этом свидетельствует тот факт, что, например, у Google в ходе проверки было обнаружено около 30 ошибок в коде, а у Яндекса – целых 75 неточностей.

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

2. Улучшение эффективности сайта

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

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

Безусловно, все эти нюансы положительно отражаются на дальнейшем СЕО сайта.

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

3. Универсальность для любого браузера

Одной из главных причин создания стандартов W3C стало правильное отображение веб-страниц на любом браузере.

Без подобных правил сложно представить, насколько была бы усложнена работа в интернете.

Сайты, не прошедшие валидацию, могут хорошо отображаться в каком-то одном браузере, но при этом выдавать ошибки в другом.

Проверка кода позволяет следить за правильностью отображения сайта в разных программах.

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

4. Адаптивность для разных видов устройств

Статистика показывает, что все большее количество юзеров предпочитают просматривать сайты со своих смартфонов.

А значит, адаптация ресурса под все виды электронных гаджетов – это обязательный этап работы над сайтом.

И без использования W3C-технологий этого будет сложно добиться.

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

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

5. Упрощение технического обслуживания сайта

Проверка значительно упрощает работу веб-мастеру, делает ее эффективнее при разработке следующих проектов.

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

Это значительно снижает трудозатраты и экономит ресурсы.

Сервисы по проверке – простые и удобные.

При обнаружении ошибок в разметке страницы, инструменты подчеркивают этот фрагмент соответствующим цветом.

При этом «важность» ошибки ранжируется по цвету.


Таким образом, веб-мастер может проанализировать эти недочеты и устранить наиболее грубые неточности в разметке.

Практика показывает, что не стоит исправлять все ошибки.

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

Зачем проверять HTML- и CSS-код?

Существует ряд причин, по которым следует проверить страницу.

Во-первых, это помогает при определении браузерной совместимости.

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

Но вот эти самые недочеты не позволят ей нормально отобразиться на другом браузере.

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

Сегодня разработчики браузеров ориентируются на единые стандарты HTML и CSS, поэтому валидатор W3C – это своеобразная страховка от будущих версий браузеров, которые могут находить ошибки и вступать с ними в конфликт.

При наличии ошибок браузеры пытаются компенсировать это различными способами.

Одни стараются игнорировать, другие пытаются как бы «доработать» недочеты, пытаясь представить, что именно хотел сказать разработчик.

Как правило, это негативно сказывается на скорости загрузки и отображении ресурса.

Это касается и работы алгоритмов поисковиков при индексации страницы.

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

В результате, целые страницы остаются непроиндексированными.

Самый безопасный способ убедиться, что поисковые системы видят страницу в том виде, в котором она была задумана — это представить им страницу без ошибок.

И помочь добиться такого совершенства призваны различные сервисы по онлайн-проверке html-кода.

Ограничения: что не делает валидация?

Важно понимать рабочие ресурсы подобных сервисов и осознавать, что они всего лишь проверяют веб-страницу на наличие конкретных ошибок html-кода.

Проверка ресурса не гарантирует, что она будет выглядеть так, как задумал веб-мастер.

Это просто гарантирует, что код не будет содержать ошибок HTML или CSS.

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

Так вот сервисы по валидации призваны выявить именно синтаксические недочеты на странице.

А вот логичность, понятность для браузеров они не оценивают.

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

В идеале – произвести такую проверку в разных браузерах, чтобы убедиться, что все они действительно правильно отображают страницу.

Это поможет исключить вероятность того, что при написании были использованы те коды, которые доступны только определенным браузерам.

Бесплатные сервисы для проверки кода

Предполагается, что идеально спроектированная веб-страница выполнена безупречно и дает ожидаемые результаты.

Но что, если допущены некоторые синтаксические ошибки в коде?

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

Прежде чем запустить веб-страницу, лучше провести тест-драйв и проверить код на наличие ошибок, опечаток.

На рынке доступны различные инструменты, которые помогут быстро и эффективно провести такой анализ.

Удобными, эффективными, а главное, бесплатными сервисами являются HTML и CSS валидатор.

Хочешь знать, есть ли на твоем сайте ошибки в верстке CSS/HTML?

Наличие этих ошибок негативно влияет на SEO.

Напиши мне и я проведу качественный анализ сайта при помощи валидаторов.

HTML VALIDATOR

Валидатор HTML – это служба, которая проверяет разметку HTML и синтаксис XHTML-кода.

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

Сервис дополнительно позволяет установить набор инструментов для исследования кодировки документа, его типа.

Такие недочеты, как открытые теги, пропущенные кавычки, лишние пробелы и т. д., могут привести к тому, что веб-страница будет выглядеть совершенно иначе, чем планировалось.

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

В рамки проверки входит:

  • проверка незакрытых тегов;
  • анализ синтаксиса;
  • наличие лишних ненужных элементов.

CSS VALIDATOR

Удобный бесплатный сервис, позволяющий разработчикам и дизайнерам при анализе и правке CSS.

Для проверки просто вводим в строку url адрес страницы и запускаем процесс.

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

Дальше уже веб-мастер отрабатывает все эти недочеты и проводит повторную проверку.

Последняя вкладка позволяет сразу исследовать онлайн часть набранного текста непосредственно в HTML.

Кроме самостоятельных сервисов проверки, существуют и встроенные плагины, призванные автоматически обнаруживать неточности в разметке.

Но эти инструменты-плагины скорее удобное дополнение, нежели полная замена валидатору.

Одним из таких плагинов является Tidy.

Он быстро сканирует страницу и выделяет неточности, которые можно классифицировать в группы:

  1. Предупреждения. Они содержат сведения об ошибках, которые можно устранять в автоматическом режиме.
  2. Ошибки. Отдельным цветом плагин подчеркивает те ошибки, которые разработчику нужно исправлять вручную.

Одним из плюсов плагина Tidy является автоматическая проверка страницы сразу в браузере.

Не нужно переключать свое внимание и загружать страницу в онлайн-проверку html-кода.

При просмотре ресурса значок в строке состояния указывает количество неточностей на странице.

Это лучшее бесплатное расширение для валидатора HTML работает на основе Tidy и OpenSP.

Оба этих алгоритма были в первую очередь созданы W3C.

Сервис дает возможность проводить проверку на 17 разных языках.

ЗАКЛЮЧЕНИЕ

Соответствие ресурса принятым в W3C стандартам гарантирует:

  • совместимость сайта с различными браузерами;
  • правильное отображение на различных устройствах (в том числе и мобильных);
  • снижение возможности появления багов с различными платформами;
  • эффективное продвижение сайта.

Поэтому W3C-валидатор следует включить в свой список обязательных инструментов при работе над созданием новых веб-проектов или сопровождении уже разработанных сайтов.

Скоростная валидация (на примере сайта habrahabr.ru)

Валидация. О её достоинствах/недостатках, необходимости/ненужности, актуальности/неактуальности и прочем, и прочем… можно спорить бесконечно 🙂 Для себя я вывел одно неоспоримое правило (очень простое): когда я вижу в правом нижнем углу Firefox’а такой значок —

я точно могу знать, что ошибка где-то в незакрытом тэге, некорректном расположении блоков или, например, неправильно названном атрибуте… или ещё в чём-то, что реально влияет на производительность/функциональность/отображение (нужное подчеркнуть). У меня не возникает ленивых размышлений из серии: «А, ну это ж валидатор… Что-то там ему опять не понравилось… Можно забить».

На самом деле, при отсутствии каких-либо средств, так сказать, «дебаггинга» html-разметки, валидатор — отличный способ избежать глупых ошибок и отловить их быстро и безболезненно. (Казалось бы, прописные истины, но почему-то об этом часто забывают… Меня удивляет, как те же программисты частенько пренебрежительно относятся к валидации html и в очередной раз пишут, к примеру, значение атрибута без кавычек — при переносе верстки в шаблон. Казалось бы, кому же ещё сознавать значение соблюдения правил синтаксиса и всяких формальностей, как не кодерам?)

Но вернёмся к нашему заголовку.

Итак, открываем главную страницу Хабрахабра — и видим:

8 ошибок (я использую SGML parser). В принципе, неплохо. Оно и понятно, ресурс делался людьми, мягко говоря, понимающими, разбирающимися… одним словом, профессионалами.

Дальше мне стало просто интересно, что же это за ошибки такие и насколько они «необходимы»:

т.е. все ошибки, по сути, содержатся в блоке, вставляющем Javascript. Что характерно, во всех остальных подобных блоках — всё отлично. Самое главное: исправить их можно было бы в буквальном смысле «в два счёта»:

1) добавляем необходимый атрибут type=»text/javascript»
2) заключаем содержимое тэга в CDATA (насколько я понимаю, так оно и положено, ведь валидатор обрабатывает только html — ну, SGML, если быть точным — всё остальное от него должно быть скрыто)
3) ВСЁ!

Также есть один непроставленный alt для картинки с красноречивым классом «kill-ie-please» 🙂 Ну, тут всё и того проще…

Предвосхищая множество недоумевающих комментариев из серии: «И что. » Отвечаю: ничего. Это просто очередная демонстрация как исчезающе малое количество действий может приводить иногда к значительным результатам. И как даже на таких уважаемых ресурсах этим предпочитают пренебречь…

Повод к размышлению, так сказать.

PS: ну и если я завтра, открывая по привычке любимый ресурс увижу внизу справа белую галочку на салатово-зеленом фоне — опять же, буду считать, что не зря это всё написал 🙂

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