Как найти ошибку в коде css. Исправление html и css c помощью валидатора W3C

После создания сайта и наполнения его всем необходимым, сайт нуждается в проверки на ошибки. Что бы найти ошибки написания в html и css вам поможет валидатор W3 — World Wide Web Consortium, что в переводе: Консорциум Всемирной Паутины. Он находит все ошибки и указывает где они находятся, так же предлагает варианты их устранения.

Зачем исправлять код Валидатором W3C

На самом деле плюсов от этого не много и все они условные, но к сожалению каждый сайт должен иметь минимальное количество ошибок в идеале ни одной. Что бы вы решили нужно ли вам это, вот его плюсы:

• Повысится скорость загрузки страницы, но чуть-чуть, это даже не будет заметно.
• В каждом браузере сайт будет отображаться одинаково.
• Когда добавляют сайт в каталог, обращают внимание на грамотность написания html и css.

Плюсов не много, но исправить ошибки html и css с помощью валидатора W3C стоит!

Как исправлять ошибки Валидатором

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

1.Набираем в поле имя вашего сайта полностью.


2.В списке начинаем смотреть где и какая ошибка и что нужно для её устранения.


Как видно на картинки, моя ошибка в ссылке, эту проблему я нашёл в плагине share buttons. Часто приходится копаться во всех файлах, что бы найти ошибку.

3.Добавляем элемент в строку, где была найдена ошибка и проверяете валидатором опять.
Если ошибка исправлена, то это хорошо. Если нет, то придётся искать дальше.

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

Бесплатные онлайн-сервисы от W3C для проверки кода на валидность.
Валидаторы от W3C имеют интуитивно понятный интерфейс. Работать с ними легко и просто.
Сервисы дают возможность проводить проверку в трех режимах и имеют, соответственно, всего три кнопки:
Проверить URL
(для проверки нужно указать адрес любой страницы сайта, доступного в Сети)
Проверить загруженный файл
(для проверки нужно указать путь к проверяемому файлу)
Проверить набранный текст
(для проверки нужно скопировать и вставить в окно валидатора проверяемый код)

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

Как пользоваться онлайн-валидаторами от W3C .
обращаемся к валидатору, по адресу:
(http://validator.w3.org/ - для проверки HTML или XHTML
http://jigsaw.w3.org/css-validator/ - для проверки CSS)
в открывшемся окне валидатора выбираем один из трех способов проверки
(url-адрес страницы сайта, локальный файл или набранный текст)
переходим на соответствующую вкладку
указываем объект проверки
(вводим url-адрес проверяемой веб-страницы,
либо путь к файлу на локальном компьютере,
либо вставляем проверяемый код, соответственно)
жмем кнопку «Проверить» и смотрим на результат проверки

Сервисы от W3C проверяют код на валидность и сразу указывают на ошибки, буде таковы имеются. Каждая ошибка будет прокомментирована. Комментарии, к сожалению, на инглиш. Так что, Google-переводчик - в помощь.Остается только, при необходимости, исправить код и снова проверить его на соответствие.
Валидаторы от W3C полностью бесплатны и автоматизированы. Поэтому, долбить их своей работой над ошибками можно долго и безнаказанно. Для этого, эти сервисы и созданы.

Нормальная альтернатива валидаторам W3C.
Кроме онлайновых серваков W3C по проверке веб-кода, очень хороший результат дает расширение HTML Validator для браузера Mozilla Firefox. Наличие такого дополнения в браузере облегчает работу веб-мастера и лишний раз доказывает, что Mozilla Firefox - «рульный» браузер.
Скачать расширение для мазилки можно здесь: http://users.skynet.be/mgueury/mozilla/

Установить расширение можно так:
- Запускаем Firefox.
Дальше: Меню - Инструменты - Дополнения - Расширения.
И, просто перетаскиваем мышью загруженный файл (расширение xpi) в открывшееся окно.
После этого, расширение установится автоматически.

или (второй способ):
- Запускаем Firefox.
Дальше: Меню - Файл - Открыть файл - указать путь к скачанному файлу.
После этого, расширение, опять-таки, установится автоматически.

После завершения установки - нужно будет перезапустить браузер.
При перезапуске - появится окно с выбором способа проверки веб-страниц:
"HTML Tidy", или "SGML Parser", или "Serial"
Выбираем способ "SGML Parser", как наиболее удобный и приемлемый вариант. Жмем соответствующую кнопочку.Теперь, в окне браузера, будет отображаться ярлык-значок дополнения, а рядом с ним - кнопка меню настройки дополнения.
У меня - вверху и справа:

HTML Validator для браузера Mozilla Firefox работает полностью в автоматическом режиме. Ему не нужно показывать, что проверять. Он проверяет все документы, которые будут открыты в Mozilla Firefox. Это очень удобно. Достаточно взглянуть на цвет ярлычка программы, чтобы понять, есть или нет проблемы в открытом документе.
В зависимости от результатов проверки, цвет значка может быть зеленый, желтый или красный, что обозначает следующее:
зеленый - «нет ошибок», все «ОК»
желтый - «нет ошибок, но есть предупреждения»
красный - «есть ошибки»

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

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

Валидация HTML

Произвести проверку можно по адресу:

После перехода на ресурс вам достаточно только ввести адрес ресурса в строку ввода и вам выдаст результат. И если ваша страница пройдёт валидацию, то система выдаст зелёный сигнал «светофора». Если же он найдёт одну и более ошибок, то выдаст вам все эти ошибки и одновременно с этим красный сигнал «светофора»). Под каждой ошибкой валидатор старается дать как можно больше информации, как устранить проблему. Если же конечно вы понимаете английский язык и разбираетесь в коде, то все найденные ошибки вы исправите без труда.

А вот как выглядит отчёт после проверки сайта:

Как мы видим сервис нашёл у меня 20 ошибок и 3 опасных. Раньше было около 150 ошибок). Исправить все ошибки многим не удаётся из-за шаблонов. Как я прочитал на одном сайте: «Сделай сайт валидный и потеряй всю красоту сайта.» Но всё равно нужно стремится к максимально возможному уменьшению ошибок на сайте!

Валидация CSS

А вот с стилевой валидацией всё гораздо легче и исправлять её в разы легче. Для этого зайдите на и всё в том же порядке, что и выше. После ввода адреса сайта, система W3C выдаст результат. Что касается с моим сайтом, то у меня всё ок). Но так же было много ошибок и всё приходилось менять собственноручно.

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

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

Я уже упоминал о том, что существует с точки зрения валидности html кода. Это надо делать хотя бы время от времени, поскольку валидность как html, так и css сильно влияет на сайта, то есть тождественное отображение вашего ресурса в различных браузерах ( о популярных и лучших вэб-обозревателях обобщающая статья, которая, надеюсь, поможет вам сделать выбор в пользу одного из них).

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

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

Ладно, как говорится ближе к делу. Сначала немного о CSS. CSS (Cascading Style Sheets - Каскадные таблицы стилей) является языком стилей, который определяет отображение HTML документов. То есть если HTML описывает содержимое страницы, то CSS форматирует это содержимое, иными словами придает ему завершенный вид. Кстати, для повышения скорости сайта полезно будет провести файлов вашей темы.

W3C валидатор: проверка валидности кода CSS

Теперь перейдем к тому, как осуществить проверку на валидность того или иного документа (странички нашего сайта или блога WordPress). Также, как в случае проверки HTML кода, воспользуемся одним из инструментов . Перейдем на сервис валидации CSS :

Как видите, есть три возможности проверки валидности CSS посредством W3C валидатора. Кстати, обратите внимание, что внизу страницы валидатора есть примечание, которое указывает на необходимость проверки кода HTML на валидность. Только оба правильных кода дают гарантию корректности всего документа. Для проверки вводим URL. Например, проверим главную страницу моего блога:

Итог проверки W3C валидатором в отношении ошибок CSS кода нельзя назвать неутешительным, поскольку обнаружены всего 2 ошибки. Конечно, эти ошибки бывают разными, в каждом конкретном случае они вызывают разные последствия. Посмотрим, как можно поступить для их ликвидации. Здесь все удобно, поскольку W3C валидатор выдает не только ссылку на документ, содержащий некорректный код, но и номер строки, на которой он расположен. Кстати, ниже, после списка предупреждений и ошибок будет отображен вариант корректного кода CSS, которым можно воспользоваться:

На странице результата проверки валидности CSS присутствует ссылка на документ css.ie , который расположен в папке темы. Он был создан для достижения кроссбраузерности блога (одинакового отображения в популярных браузерах). Причем именно для различных модификаций Internet Explorer, который грешит различными ”косяками” в плане искажения вида сайта, особенно его старые версии (IE9 значительно лучше в этом отношении). Кроссбраузерность имеет очень важное значение для продвижения проекта, однако при проверке оказалось, что в этом документе присутствуют свойства, которые не соответствуют стандартам W3C.

Итак, получаем строчки 3 и 12, на которых присутствуют ошибки. Для их исправления следует удалить ошибку разбора html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} и свойство .zoom . Сейчас не буду вдаваться в тонкости программирования и верстки сайтов, замечу только, что свойство expression помогает избавиться от неприятного эффекта мерцания фоновых изображений, которое происходит в IE6.

То есть в браузере, использование которого исходит на нет, а в последующих версиях этого ”глюка” уже не наблюдается. Сразу скажу, что я некоторое время еще буду использовать это ”лекарство”, до тех пор, пока количество потенциальных посетителей, иcпользующих IE6 не достигнет минимального уровня. Однако для наглядности, чтобы показать вам, как на это будет реагировать W3C валидатор, я удалю его.

Свойство.zoom, которое устанавливает коэффициент масштабирования элемента, не являющаяся частью Международного Стандарта W3C, поддерживается совсем старинными версиями браузеров Opera, Safari, в том числе IE8 (9 версия почти полностью ”законопослушная”, так что в скором времени, надеюсь, вебмастера будут освобождены от необходимости использовать хаки , то есть дополнительные коды, позволяющие достичь максимальной кроссбраузерности). Теперь посмотрим на документ, содержащий невалидные элементы и откорректируем его:

Этот документ находится в папке моей темы Cloudy, я удаляю вышеназванные элементы, которые не прошли проверку валидности. Далее, в результатах проверки на валидность, кроме ошибок, оказалась еще масса так называемых предупреждений:

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

Конечно, это не всегда так происходит, однако недооценивать эту опасность нельзя. Итак, переходим непосредственно к исправлению ситуации. Лучше всего скопировать файл style.css вашей темы в HTML и PHP редактор notepad++, о котором я рассказывал и который упрощает поиск по номеру строки:

Теперь мы знаем, где расположены эти строчки в файле вашей темы, корректируем цвет, немного изменив оттенок. В шестнадцатеричной системе цветов #ffffff соответствует белому цвету. Изменяем его следующим образом: вместо последней f вписываем d, таким образом получаем немного другой оттенок белого цвета; теперь изменения для пользователей заметны не будут, однако поисковики увидят разницу:

Вот примерно так можно проводить корректировку невалидных частей кода CSS страничек вашего ресурса. Точно также находим остальные участки, отмеченные предупреждениями и которые необходимо исправить.Что касается предупреждений, касающихся строки 483 (таких оказалось, кстати, немало, порядка 10). При проверке я обнаружил, что их причиной является плагин WP Page Numbers, который обеспечивает постраничную навигацию.

Это подвинуло меня на деактивацию этого плагина и явилось причиной того, что я наконец заменил его внедрением кода, что явилось шажком по направлению к снижению нагрузки на сервер. Как только проделал это, предупреждения, касавшиеся нарушения валидности кода именно этим плагином, при повторной проверке тут же исчезли. После вышеописанных телодвижений проводим повторную проверку валидности CSS с помощью W3C валидатора:

Теперь вы знаете, как проверять валидность CSS документа (вебстраницы сайта или блога), прибегнув к помощи W3С валидатора. Напоследок хотелось бы отметить, что степень и частоту проверки валидности кода CSS каждый для себя решает сам, все зависит от обстоятельств, но тем не менее время от времени это надо делать обязательно, по моему глубокому убеждению. Подписывайтесь на обновления блога для получения свежих материалов на e-mail . Засим разрешите откланяться, надеюсь, расстаемся ненадолго.

Добро пожаловать на Блог Свободного Вебмастера! В прошлый раз я рассказывал как проверить , а сегодня предлагаю продолжить тему валидации веб-страниц. Проверим каскадные таблицы стилей (CSS) и документы HTML с таблицами стилей на соответствие общепринятым интернет-стандартам.

Разработчиком языка стилей CSS является Консорциум Всемирной паутины (World Wide Web Consortium, сокращённо W3C) — это организация, которая разрабатывает и внедряет технологические стандарты в интернете.

CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей) - это формальный язык, предназначенный для описания внешнего вида документа с использованием языка разметки.

Для проверки стилей существует очень полезный сервис, который предлагает Консорциум W3C. Давайте перейдём на главную страницу сервиса CSS Validation Service и проверим валидность CSS.

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

Здесь нас ждёт приятное удивление, всё на русском языке! Кроме того, есть возможность выбора любого другого языка из более 20 доступных. На странице расположены вкладки, предлагающие выбрать вариант проверки:

1. Проверить по URI - достаточно указать адрес страницы;
2. Проверить загруженный файл — требуется выбрать локальный файл CSS;
3. Проверить набранный текст — нужно ввести код CSS для проверки на корректность.

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

• Профиль — перечисляет все особенности и возможности реализации на конкретной платформе. Выбор по умолчанию соответствует наиболее часто используемому стандарту третьего уровня CSS3.
• Предупреждения — настройка подробности отчётов: все или наиболее важные предупреждения, обычный отчёт, без показа предупреждений. Сервис может выдавать два типа сообщений: ошибки и предупреждения. Если проверяемый CSS не соответствует рекомендации — это ошибка. Предупреждения отличаются от ошибок тем, что не относятся к проблемам выполнения спецификации.
• Среда — указать где применяются стили, например, на портативном устройстве, дисплее, телевизоре или странице для печати. Рекомендуется проверять все среды применения стилей.
• Расширения поставщика — желательно оставить по-умолчанию, есть возможность отображения только ошибок или только предупреждений. Поставщики браузеров иногда реализуют экспериментальные CSS свойства, для их поддержки используются префиксы: -moz- (для Firefox), -webkit- (для Chrome), -ms- (для Internet Explorer), -o- (для Opera) и другие.

Указываю URL адрес, настраиваю дополнительные параметры проверки и нажимаю на кнопку «Проверить» для старта. Ура! Результат проверки CSS: ошибок не обнаружено!

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

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

Обратите внимание, в списке предупреждений приведён номер строки, в которой найдено неизвестное свойство. При обнаружении ошибок вы увидите таблицу со свойством и описанием проблемы. Например, такой результат проверки имеет главная страница Яндекса:

Ниже представлена информация о корректном проверенном CSS. Не спешите его копировать и использовать на своём сайте! Да, в приведённом варианте корректного CSS нет ошибок и свойств, использование которых вызывает предупреждения, код 100% пройдёт полную проверку. Но эффект достигается путём удаления этих свойств, поэтому на сайте могут возникнуть проблемы с отображением или ожидания не совпадут с реальностью.

Данный сервис размещается и обслуживается на сервере W3C, но в то же время не является официальным инструментом проверки CSS.

При желании, воспользуйтесь совмещенным валидатором — он проверяет весь документ, объединяя на одной странице результаты проверки HTML и CSS валидаторов, а также других полезных инструментов.

При веб-разработке сайтов обращайтесь к актуальным спецификациям и справочникам по таблицам каскадных стилей. Рекомендую воспользоваться валидатором CSS и проверить свой сайт, делитесь результатами в комментариях!