+
Здравствуйте, дорогие друзья! Рад снова Вас видеть на моем блоге 
Сегодня речь пойдет о HTML коде, точнее об его валидности. Валидность – это соответствие кода определенным нормам. Задает нам эти нормы Консорциум Всемирной паутины (от англ. World Wide Web Consortium, W3C).
Консорциум разрабатывает стандарты всемирной паутины и задачей разработчиков программого обеспечения, в частности, интернет-браузеров, является внедрять эти стандарты в свои разработки. К сожалению, не все они придерживаются этих норм.
Официальный сайт предоставляет вебмастерам очень полезные сервисы, а если ближе к сегодняшней теме, то одним из таких сервисов является валидатор. Перейдя по ссылке Вам откроется главная страница сервиса.
На ней есть три вкладки:
- Validate by URI – проверка по URL-адресу;
- Validate by File Upload – проверка загружаемого файла;
- Validate by Direct Input – вставка непосредственно кода и его проверка.
Выбирайте любой из вариантов и после нажатия Check откроется следующая страница. Для примера я проверил главную страницу Яндекса и вот что получил:
Как видите, сервис показал что имеется 38 ошибок и 8 предупреждений. Странно это видеть, я не ожидал… Ну да ладно, ведь соблюдать абсолютно все стандарты действительно сложно, тем более для такого крупного портала. Ниже будет приведен список ошибок и предупреждений с подробным их описанием и рекомендациями по их исправлению:
К сожалению все на английском, но если знаете сам язык HTML, то поймете и суть, а если нет, то воспользуйтесь каким нибудь форумом, связанным с сайтостроением и веб-дизайном и там задайте вопрос. Ответы непременно найдутся 
.
На странице Вы найдете настройки проверки, которые могут очень пригодиться:
- Show Source – отображает исходный код;
- Show Outline – отображает строку в которой присутствует ошибка;
- Validate error pages – проверяет страницы, которые выдают ошибку, например 404 – страница не существует и т.п.;
- Verbose Output – этот параметр, если честно, я не знаю что означает, если знаете – поделитесь в комментариях, буду очень благодарен;
- List Messages Sequentially – выводит ошибки и предупреждения обычным списком;
- Group Error Messages by Type – группирует ошибки и предупреждения по одинаковым признакам;
- Clean up Markup with HTML Tidy – отображение правильного кода, исправленного программой HTML Tidy. Если решите его использовать в своем коде, то будьте осторожны, т.к. HTML Tidy не является разработкой W3C и он не предоставляет гарантий по его работе.
В начале мой блог так же имел много ошибок и предупреждений. По мере их изучения мне удалось снизить их количество, а со временем и вовсе от них избавиться . Сейчас, на момент написания этого поста, блог не имеет ни одной ошибки
Буду стараться и впредь придерживаться стандартов W3C, но многочисленные плагины в большинстве своем делают свое «черное» дело и все портят, время покажет!
Так зачем же нам валидный код? В первую очередь он будет гарантом правильного отображения страничек в современных браузерах. Снизится скорость загрузки страниц. А некоторые специалисты уверяют, что правильный код может благоприятно повлиять на ранжирование в поисковой выдаче! А Вы проверяли свой сайт или блог? Интересно узнать, уделяете ли вообще внимание такой проблеме или это для Вас несущественно?
Раньше особо над этим не заморачивался. Сейчас проверил – 27 ошибок. Есть над чем поработать.
Ответить
Да, я тоже только недавно стал уделять этому внимание. Жаль только сервис на английском…
Ответить
Webliberty, то что сервис на английском меня ничуть не пугает, а наоборот стимулирует к изучению иностранных языков
. На самом деле все понятно, если есть хоть малейшее понимание исходного кода, то вопросов возникнуть не должно, а если что будет не понятно, то можно воспользоваться форумом, где ответы на вопросы не заставят себя ждать.
Ответить
С ошибками валидации CSS разобрался, а вот HTML с кодом не могу, ибо чайник. Где бы почитать про устранение этих ошибок с сайтом на друпале?
Ответить
Дмитрий, в принципе нет разницы в методах исправления ошибок в зависимости от CMS (системы управления сайтом), т.к. HTML везде одинаковый. Другое дело если ошибки в самом движке, в Вашем случае на Друпале, т.к. не всегда их удается исправить без потери работоспособности. Вот например, WordPress изначально, как CMS, построена правильно и единственное что может вызвать ошибки, так это всевозможные плагины и сторонний код (баннеры, счетчики)
. Иногда приходится чем то жертвовать и отказываться.
Сейчас проверил Ваш код. Есть несколько ошибок со скриптами, т.е. не прописан атрибут type. Строчку
достаточно заменить на
и проблема исчезнет, по остальным пунктам также можно посмотреть описание и рекомендации по устранению ошибки, которые выводятся после проверки. Также вижу счетчик Rambler TOP100 вызывает ошибку, тут уж ничего не поделаешь, если хотите его оставить, то придется смириться.
Ответить
Огромное спасибо! Даж не знаю, как и благодарить )))
Я по растровой графике не хилый спец
Ответить
Дмитрий, спасибо, приятно осознавать, что пишу не зря и кому то может пригодиться
. По-изучайте HTML и обязательно разберетесь, если что – обращайтесь, вместе попробуем разобраться.
Ответить
Я всегда уделяю особое внимание валидации. Сейчас на сайте в html ошибок 0, в css 5 незначительных ошибок (вставлены свойства filter: opacity, -moz-opacity, text-shadow, которых нет в спецификации CSS2.1, но в последних версиях браузеров эти свойства работают)
Ответить
concrete5russia, такие свойства наверно уже поддерживаются CSS3
Иногда приходится жертвовать чем то…
Ответить
Webliberty, Вы правы, эти свойства в CSS3 поддерживаются. Важно, что эти свойства никак на работоспособность сайта не влияют: если свойство поддерживается браузером, то оно применяется к элементам на сайте, если не поддерживается, то браузер его просто проигнорирует:)
Ответить
concrete5russia, понятно, но мне все же пришлось отредактировать некоторые свойства CSS плагинов, чтобы исключить все ошибки. В частности убирал скругления углов (border-radius)тень вокруг границ (box-shadow) и другие. Думаю не много потерял, да и на дизайне практически не отразилось.
Ответить
В продолжении темы, хотелось бы добавить:
1. По проблемам английского.
В браузере Хром у меня стоит расширение Google Translator (для тех кто не в теме).Таким образом любой англ. сайт автоматом переводится на рус.
Не много коряво, но понятно.
2. Там же расширение Web Developer с десятками сервисов для проверки.
Ответить
Виктор, тоже иногда пользуюсь переводом) Если же перейти к проверке валидности HTML, то все подобные сервисы используют API W3C. Я пользуюсь RDS bar’ом для первичной проверки страниц своего блога. Если возникают ошибки, то перехожу на сайт валидатора и смотрю что за ошибки, а потом исправляю.
Ответить
наконец то я проверил свои блоги и удивился, один вообще не чекаеться, где то невалидный символ, блин не могу найти где.
а во втором 15 ошибок ))))
спасибо, будемс исправлять
Ответить
Уже не первый раз встречаю данный сервис, так и не могу в нем разобраться. Указывает, что есть 50 ошибок. Конечно, переводчик translate.google сейчас более-менее хорошо переводит, но смысл непонятен: пробелов и прочего я не допускал. Ругается на ссылки, созданные через админку WordPressa, а также на счетчики, код которых просто копируется с сайта
Ответить
Дмитрий, как раз счетчики и вызывают большую часть ошибок. Их создатели просто не позаботились об их валидности, один из вариантов – отказаться от счетчиков (их у Вас 6 штук я насчитал) или попробовать вручную попытаться их исправить без нарушения функциональности.
У некоторых ссылок не правильно составлена структура, например значение
должно иметь кавычки, у Вас они не везде, тоже самое касается и тега
Присутствует лишний закрывающий тег </script> и прочие ошибки. Проверьте исходный код файлов шаблона, удалите пустые и лишние строки, одним словом, наведите порядок.
Ответить
Большое спасибо за ответ, буду исправлять
Ответить
Validation Output: 17 Errors
дома пороюсь через редактор…вроде ошибки понятны и думаю решаемы. единственно не понятно,в каких файлах эти ошибки расположены или я невнимателен и не заметил этого?
Ответить
levko, для этого нужно хорошо ориентировать в исходном коде и знать какой из файлов за что отвечает) В качестве подсказки будет установленная галочка на против Show Source при проверке валидности HTML и конечно же можно воспользоваться поиском по файлу.
Ответить
Это мой больной вопрос- у меня на сайте 65 ошибок и еще предупреждения. Но я никак не могу понять, где искать эти ошибки и где их исправлять. Вы не могли бы объяснить это поподробнее, для блондинок
Ответить
Да статья очень интересная и полезная, да впрочем, как и остальные Ваши статьи. А кстати, для моего блога жирной ссылочкой не поделитесь, буду очень Вам благодарен, и буду партнером.
Ответить
Наталья, как я понял у Вас не возникло вопросов по тому что это за ошибки? Думаю с этим все понятно, да и перевести страницы с результатами проверки на валидность можно на русский (в том числе встроенными средствами браузера, если они есть).
А вопрос о том где их искать… Для этого при проверке поставьте галочку напротив Show Source – таким образом в конце списка ошибок и предупреждений будет отображен исходный код страницы с нумерованными строками. В описании ошибок также указана строка с ошибкой – посмотрите на них. Далее нужно смотреть файлы шаблона – чтобы узнать какая ошибка в каком файле нужно хорошо ориентироваться в них. Вот к примеру возьмем Вашу первую ошибку:
Понятно, что это код от кнопки Поделиться Одноклассников, из пояснения видно, что тег link не закрыт, в конце не поставлен слеш, т.е. правильный вариант будет выглядеть так:
Вы же помните, куда вставляли этот код? Вот там и исправляйте. С другими ошибками аналогично.
Александр Ветров, спасибо
, не практикую обмен постовыми, да и ссылка с моего блога явно не жирная)
Ответить
Наталья, там ничего сложного на самом деле нет:) достаточно начального уровня знания английского, а так же html и css. Если что пишите в аську 63-60-56-32-0 – помогу ошибки исправить.
Ответить
Полезный сервис, пользуюсь им постоянно. Допилил валидность сайта до 100%, но если поставлю счетчик от рамблера или liveinternet, валидность улетит… Вот сижу и думаю, что сегодня нужнее
Ответить
Max, а счетчик рамблера ставить хотите ради участия в рейтинге или для статистики? У меня например, тоже ведь стоит его счетчик, но как видите проверка на валидность HTML проходит на ура)
Открою секрет: если счетчик нужен только для рейтинга (для статистики я пользуюсь метрикой), тогда выбирайте Упрощенный код счетчика, а не рекомендуемый – их отличия в том что упрощенный не засчитывает заходы через браузеры с отключенным javascript – согласитесь, такое редко бывает, так что ничего не теряется. Ну а если для статистики – тогда надо подумать, я пробовал скорректировать рекомендуемый код – не получилось…
Ответить
Еще раз побеспокою, если можно. Этот код пришел вместе с плагином кнопок соцсетей, отдельно я его не прописывала, так что где его искать – ума не приложу…
Ответить
Webliberty, спасибо теперь все нормально работает, обошелся liveinternet’овской статистикой, в целом довольно неплохо считает. А Рамблер, подумал и решил, что смысла нет его еще подвешивать. Но кнопку W3C держу на сайте
, и убирать пока не собираюсь, удобно по ходу проверять разные части сайта.
Ответить
Самое печальное что каждый 2ой плагин несет за собой кучку мусора
простой выход
обходиться без плагинов (как в посте про обратную связь)
все немножко сложнее для простых пользователей
не все так красиво и функционально
но зато чистый код
остается только выбрать !
в принципе жить то не мешает и нужно решить для себя как приятнее
Ответить
Вы б молчали со своими 10-50 ошибками)
У меня из 384, и я не жалуюсь
Ответить
создаю свой сайт, загрузил страницу, на валидность одобрили, загрузил код, выбрал ввести в ручную и скопировал код в окно, выдало 102 ошибки, как это понимать?
И ещё, что это значит «Some Headers, mandatory for this resource, are missing.
Referer»
Ответить
Роман, видите в чем дело, простое копирование кода (ввод вручную) не дает полную информацию о странице, особенно если сайт создается с помощью CMS. Наиболее достоверную информацию дает проверка по URL – ориентируйтесь на эти данные.
При проверке страницы на валидность сервис проверяет заголовок, который отдает страница, а она содержит в своем заголовке Referer – источник запроса. Браузеры по-разному обрабатывают этот заголовок. Если ошибка повторятся, то есть смысл попробовать проверить через другой браузер.
Ответить
Как-то проверял данным сервисом код страничек одного из сайтов, но так и не разобрался, на что указывают ошибки…
Например, вот такая ошибка есть:
element «center» undefined
Якобы типом документа не определяется используемый элемент. В чём подвох – не пойму, всего лишь выравнивание отдельных частей страницы… Решил не обращать внимания на них. Пока что ни в одном браузере ошибок при показе не было, надеюсь – и не будет
Ответить
Филя, Элемент center относят к «осуждаемым» тегам, то есть к тем, которые удалены из спецификации HTML как морально устаревшие. Браузеры обычно без ошибок отображают центрирование элемента с помощью этого тега, однако валидный код получается только при использовании переходного .
Для получения валидного когда можно использовать другие способы центрирования – например для текста использовать в стиле text-align: center; для блока, у которого ширина меньше родительского блока, можно применить стиль – margin: 0 auto;
Ответить
Cам недавно занялся исправлением ошибок. Сейчас осталось 19 ошибок из 42.15 из них создаёт плагин Google Syntax Highlighter for WordPress. Кто знаком с работой этого плагина помогите избавится от невалидного кода.
Ответить
Пётр, с таким плагином лично мне не приходилось сталкиваться, может кто другой подскажет… Я для синтаксической подсветки кода использую плагин WP-Syntax, он не вызывает ошибок валидности HTML.
Ответить
Webliberty, нашел альтернативу Syntax Highlighter for WordPress. WP-Syntax немного не подошел. Сейчас на главной осталось четыре ошибки.
Ошибки возникают в сайтбаре при выводе заголовков виджетов.
Ответить
Пётр, осталось совсем чуть-чуть) Попробуйте знаете что, вот в этой строке:
заменить атрибут li на div, чтобы получилось так:
Не забудьте поправить закрывающий тег этого блока, если будете менять, он тоже должен быть div а не li!
При таком раскладе как сейчас ошибки возникают вот по какой причине: тег li является вложенным в ul и естественно перед ним должен стоять родительский атрибут. Кстати, как вариант, перед этой строкой можно вставить этот самый ul, но при этом не забыть вставить закрывающий тег. Экспериментируйте!
Ответить
Теоретически я это знаю. Но вот напрактике…В sidebar.php вроде бы всё в порядке. Ошибка формируется в другом месте. Буду искать.
Ответить
Здравствуйте, Денис! я тоже хотела бы иметь валидный код, но при этом задумалась вот о чем. Андрей Морковин говорит «Теперь определимся с выбором между актуальными стандартами: HTML 4.01 и XHTML 1.0.
Вы собираетесь расширять язык HTML? Если нет, то и не нужно использовать гнилую ветку XHTML, которая так и не переродилась в версию 2.0.» а тогда никогда не будет валидности тк редактор кода позволяет исп самозакрывающиеся элементы только в стандарте xhtml. Может я просто не знаю и редактор можно перенастроить чтоб все эти br получались без слеша? или все-таки использовать гнилую ветку? как вы решаете эту проблему?
Ответить
Здравствуйте, Денис. Я новичок, HTML кода не знаю, так, немного из практики. Мне Feedburner пишет синтаксическую ошибку на линии 2. Я пошла на сервис, а он мне выдал еще 50 ошибок и 10 предупреждений. Он, конечно, показывает, какие ошибки, но где это? там такие номера линий, за 700, а 2-й нет! Я даже не представляю, где это.
А Fb выдает «The URL does not appear to reference a valid XML file. We encountered the following problem: Error on line 2: The processing instruction target matching «[xX][mM][lL]» is not allowed.»
Вы не могли бы подсказать, где эта вторая линия, и что там надо исправить?
Ответить
Вера, здравствуйте! Я использую стандарт XHTML 1.0. И HTML 4.01, и XHTML 1.0 – это действующие стандарты, но оба старые. Так что без разницы что сейчас выберите, будущее все рано за HTML 5, так что или оставляйте все как есть или же переделывайте верстку используя HTML 5, тем более последние версии браузеров поддерживают этот стандарт.
Ответить
Здравствуйте, Надежда. Вы немножко путаете. То что FD выдает ошибку – это ошибка XML. Сейчас лента выглядит у Вас так: feeds.feedburner.com/pro362/oUqq
На конце /oUqq – это лишнее. Прожгите ленту заново, но уже без этого окончания, чтобы было /pro362 возможно в этом проблема при валидации ленты RSS.
То что выдал сервис – это как раз и есть ошибки валидации именно HTML. Сказать точно, где эти ошибки находятся не могу. Страница документа формируется из нескольких файлов шаблона установленной темы. Вам нужно просматривать где примерно ошибка (строки в результатах проверки) и искать файл в котором ошибка. Вот например первая ошибка:
Мета-теги всегда располагают в заголовке, поэтому не сложно догадаться что ошибка в файле header.php. И так далее, строчка за строчкой нужно разбираться.
Ответить
Денис, спасибо за ответ. Наверное, воспользуюсь Вашим советом и прожгу ленту заново. Хотя я ее уже прожигала, и все было нормально, она выходила, а /oUqq – это как раз окончание ее адреса было. А сейчас выдает какую-то синтаксическую ошибку.
А с другими ошибками придется разбираться… )
Ответить
Приветствую) Сменил шаблон от Артистир, поставил новую версию прежней шкурки и снова куча ошибок)
Может попробовать отключить все плагины и потом плясать уже от них, заменяя на валидные? Или лучше поискать шаблон потолковее?) Заранее спасибо за ответ)
Ответить
Дмитрий, привет! Можно и так попробовать, ну а если не поможет, значит сам шаблон так сверстан не валидно. Сейчас глянул мельком – есть несколько ошибок не связанных ни с темой, ни с плагинами, а именно отсутствии тега alt у изображений и в нескольких местах noindex. Альт достаточно прописать, а noindex сделать так:
Ответить
Проверил последние посты, в картинках есть прописанные alt. По поводу noindex не совсем понял, куда их требуется вставить
Ответить
Дмитрий, вставлять специально не нужно, а следует посмотреть где этот тег уже используется и переоформить по новому, используя выше приведенный пример)
Ответить
Webliberty, большое спасибо, теперь понял)
Ответить
Webliberty, Яндекс официально поддерживает более простую конструкцию
Ответить
Maximal, верно, именно такая конструкция приведена в справке Яндекса, просто я привык использовать такую
Ответить
Здравствуйте Денис, долго рылся в своем шаблоне и много исправил ошибок, но остальные ни как не могу найти, в итоге решил посетить сайт автора. Оказалось у него их гораздо больше и шаблон у него такой же. Осталось 6 ошибок, подскажите пожалуйста
Ответить
valery12, как я понял у Вас табличная верстка блока с контентом. Найдите в файле шаблона такие строки:
и замените для td атрибут id на class, чтобы получилось так:
При этом не забудьте в CSS подогнать стили под новые, т.е. #head-date заменить на .head-date
Не уверен что поможет, но попробуйте
Ответить
Спасибо Денис, пришлось еще table id заменить также, осталось еще два замечания исправить, вы мне очень помогли
, больше двух недель рылся в своем шаблоне, как вас отблагодарить, сбросьте свой номер кошелька 
Ответить
valery12, был рад помочь! Да ну перестаньте, никаких кошельков не требуется)))
Ответить
Вот нашел еще 3 ошибки в плагине Scroll to Top, проблему решил так:
в файле scrolltotop.php под строкой
добавил:
//< ![CDATA[и под строкой
добавил
//]]>может кому поможет
Ответить
Странно,код в комментарии отправил а он не отправился.
Ответить
valery12, да, код из комментариев вырезается, если не используются специальные теги для его выделения. При желании можете выслать код через обратную связь или e-mail и я вставлю.
PS: код получил, поправил комментарий, большое спасибо!
Ответить
Как вы думаете, можно ли сделать шаблон блога, созданного на Блоггер, полностью валидным?
Ответить
БЛОGГЕР, скорее всего да, но там очень много ограничений, ведь доступ к файлам, насколько я понимаю, сильно ограничен. Если на платном хостинге можно вынести невалидные функции в отдельные файлы скриптов или вывести код через AJAX, то на Блоггере вроде так не сделать… Обратите внимание на комментарий valery12 чуть выше и попробуйте обрамлять код с ошибками с использованием CDATA.
Ответить
Добрый день! Спасибо за статью! Оказывается у меня так много ошибок! Больше всего беспокоит лишний тэг HTML. Подскажите как исправить, в каком редакторе? И как вообще это делается? Куда зайти, что сделать, как сохранить? Я откровенный чайник в этом деле, но если объяснить, пойму! Пожалуйста, помогите, я готова заплатить!
С уважением, Лариса
Ответить
Спасибо за статью! На днях тоже решил заняться устранением ошибок в коде. Большее количество снизил, устраняю остатки. Но не легкое это дело, скажу
Ответить
Не тут то было – всё очень серьёзно! Робот GetGoodLinks не принимает мои выполненные задания, требует исправления кода. Пожалуйста, помогите кто-нибудь!!!Неужели нет добрых людей
Ответить
Лариса, ну что же Вы так распереживались, все в порядке) Исправляются ошибки HTML в файлах шаблона в первую очередь, а также возможно потребуется вмешательство и в сами тексты, их оформление. По поводу ГГЛ не совсем понял, напишите на почту с вопросом – помогу чем смогу
Роман, не легкое, зато получаем важные знания, пытаясь вникнуть в подробности – так проще научиться верстке.
Ответить
Вот и у меня тоже 89 ошибок валидности HTML и 6 валидности CSS. Почему решил проверить? сразу напишу. Оказывается валидность HTML напрямую влияет на поисковую выдачу. Вроде при написании статей использую НЧ запросы, а результат низкий. Вот и решил заняться этой проблемой. Только вот маленько никак не дойду где искать эти ошибки. Вернее не искать а где и как их исправлять. Буду благодарен за подсказку.
Сайт добавил в закладки.
Ответить
Александр, в файлах. Конкретного ответа не найти, все зависит от движка, далее от файлов которые формируют конечную страницу, от верстки. Ошибки не «лежат» в одном месте, начало может быть в одном файле, а конец в другом, так что единственный выход – изучать как устроена структура, исходный код и разбираться потихоньку.
Ответить
Webliberty, движок у меня Вордпресс. И в последнее время заметил, что индексация Яндексом стала совсем плохая. Если раньше в течении 30 минут статья индексировалась, то теперь наоборот, даже проиндексированные статьи просто стали вылетать. Может ли это быть связано с ошибками валидности HTML.
Ответить
Александр, не переживайте, с индексацией сейчас у всех такие же проблемы, вот уже месяц как с большой задержкой они входят, вероятно готовится очередное обновление алгоритмов. С ошибками это никак не связано и не случайно в обзоре я приводил в пример сам Яндекс – у него они также присутствуют.
Ответить
Денис, спасибо, за информацию. Я думал по поводу индексации это только у меня. Теперь все понятно. Еще раз спасибо.
Ответить