Привет. Сразу отвечу на ваш вопрос: стоит ли читать Вам этот урок? Перейдите на весьма полезный и бесплатный сервис , вбейте туда адрес своего сайта и, если вы видите, что на Вашем сайте есть ошибки, то урок прочитать стоит. Примеры отображения ошибок с помощью данного онлайн валидатора:
На моем же блоге сейчас нет подобных ошибок, я от них избавился (всего было более 70 ошибок и более 80-ти предупреждений). Чтобы внести ясность, расскажу, что такое валидный код и зачем он нам необходим.
Валидный код - это код, который соответствует стандартам.
На валидность можно проверить HTML, CSS, всяческие микроразметки и другое. Сегодня я расскажу про валидность в HTML.
- Валидный код необязателен, но количество ошибок должно быть минимальным, иначе ваш сайт не будет кроссбраузерным. Валидность кода нужна в прежде всего для того, чтобы ваш сайт отображался правильно во всех браузерах.
- Поисковые роботы "разговаривают" с вашим сайтом на языке HTML, поэтому важно отдавать четко и ясно контент на сайте со всеми "закрытыми тегами" и прочее.
- Валидность HTML влияет на SEO, но довольно незначительно (если, конечно, у вас не сотни, а то и тысячи ошибок). Рекомендую почитать интересные наблюдения Деваки "Влияние качества HTML на их ранжирование" .
- Когда я делал на своем сайте код валидным, я нашел и исправил свои глупые ошибки (повторение тегов, пропущенная буква и т.п.).
- Не стоит "рвать себе *опу", если какую-то ошибку сложно исправить, либо ее исправление принесет вред функциональности сайта. Главное, чтобы было удобно пользователю.
Ниже я разберу основные ошибки, на которые указывал валидатор. Если вдруг в списке ниже не окажется вашей ошибки, впишите ее в комментариях, попробуем вместе разобраться и я добавлю решение данной проблемы в данный урок. Кстати, да, ошибки, на которые указывает валидатор w3c смотрим тут:
В каждой ошибке есть подсказка - это номер строки в исходном коде странице, а из нее уже можно определить примерно в каком файле темы расположена данная строка. Исходный код страницы смотрим с помощью CTRL+U (в основных браузерах).
Перед тем, как приступить к работе, сделайте резервную копию шаблона вашего сайта.
Также для упрощения нахождения ошибок в исходном коде, можете использовать HTML валидатор для Mozilla Firefox . Установив его, перейдя в исходный код страницы, вы увидите те же самые ошибки, что указывает сервис validator.w3.org. Кликнув по названию ошибки (в левом нижнем углу), вас автоматически перебросит на ту строчку, где находится данный невалидный код.
Нахождение ошибок в HTML с помощью валидатора w3c и их исправление
Ищите в списке ниже свою ошибку и кликнуть по ней, вас автоматически "прокрутит" куда надо.
1. No space between attributes.
…rel="shortcut icon" href="http://arbero.ru/favicon.ico" ;
type="image/x-icon" Просто убираем "точку с запятой".
2. The width attribute on the td element is obsolete. Use CSS instead.
td valign="center" width="80" height="80" >
Подобное преобразуем к виду
td style="align:center; width:80; height: 80;">
3. An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
Одна из самых частых ошибок. Просто не хватает альтернативного текста для картинки. Прописываем тег alt.
4. Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
section id="comments" >
Внутри блока section должны содержаться что-то из тегов h2-h6, если их нет, просто переименовываем слово section на div
5. The hgroup element is obsolete. To mark up subheadings, consider either just putting the subheading into a p element after the h1-h6 element containing the main heading,
or else putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class="subheading" element with differentiated styling. To group headings and subheadings, alternative titles, or taglines, consider using the header or div elements.
Аналогично предыдущему пункту. Просто меняем фразу hgroup на div. Вы можете использовать инструмент "Найти/заменить все" в текстовом редакторе, чтобы ускорить подобные процессы.
6. Element "noindex" undefined
Чтобы тег noindex стал валидным, пишем его в виде комментирования, то есть так:
Неиндексируем
7. End tag for element "div" which is not open
Закрывающий тег div лишний. Убираем его.
8. Document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
Неправильное использование тега "li": отсутствует тег "ul", "ol" и др. Проверьте.
9. End tag for "div" omitted, but OMITTAG NO was specified
Не хватает закрывающего тега div.
10. There is no attribute "border"
alt="" width="1" height="1" border=" 0"/>
Просто удаляем фразу border="0".
11. Character "<" is the first character of a delimiter but occurred as data
Не используйте тег "<" перед обычными словами, используйте лучше разные кавычки.
12. Saw " when expecting an attribute name. Probable cause: = missing immediately before.
Лишняя кавычка, удалите ее.
13. The align attribute on the img element is obsolete. Use CSS instead.
Не используйте значение align внутри тега img. Пропишите ее отдельно, в таком виде:
14. Bad value for attribute href on element link: Illegal character in path segment: not a URL code point.
Заключение
Если у вас на сайте есть какая-то ошибка, которой нет в этом списке - пишите в комментариях. Разберемся, а я дополню статью. Повторюсь, если какую-то ошибку не получается исправить, не стоит заморачиваться.
У меня на блоге осталась ошибка (хотя еще вчера почему-то код был без ошибок):
The text content of element script was not in the required format: Expected space, tab, newline, or slash but found < instead.
Если в курсе, как исправить ее, буду признателен. Я немножко перфекционист. 🙂
Будете ли вы делать HTML код сайта валидным?
Пожелаю вам получить валидный HTML код на вашем сайте, уведомление которого выглядит так:
P.s. Вы часто перегружаете свой организм? Тогда вам нужна программа детоксикации . Восстановите силы и энергетический баланс.
Аннотация: Как лучше всего начать проверку страниц HTML и гарантировать, что эти страницы будут выводиться правильно в различных браузерах, без каких-либо ошибок? Ответом является валидация (проверка на соответствие правилам). О ней и пойдет речь
Введение
Итак, вы написали несколько страниц HTML , и они, кажется, выводятся нормально, но имеется несколько не совсем правильных вещей. Как лучше всего начать поиск того, что неправильно, и гарантировать, что эти страницы (и написанные в будущем страницы) будут выводиться правильно в различных браузерах, без каких-либо ошибок?
Ответом является валидация (проверка на соответствие правилам)! Существует много доступных средств на сайте W3C и в других местах, которые позволяют выполнить валидацию кода сайта.
Наиболее известными валидаторами являются следующие:
- W3C MarkUp Validator (http://validator.w3.org/): Этот валидатор находит используемый в проверяемом документе doctype (X)HTML , и просматривает затем весь документ, указывая места, где код HTML не соответствует используемому doctype (т.е., где имеются ошибки кода HTML ).
- W3C Link Checker (http://validator.w3.org/checklink): Этот валидатор просматривает документ, представленный для проверки, и проверяет все ссылки в документе, чтобы гарантировать отсутствие неработающих ссылок (у которых значения href указывают на несуществующие ресурсы).
- W3C CSS Validator (http://jigsaw.w3.org/css-validator/): Как можно догадаться, этот валидатор просматривает документ CSS (или HTML/CSS ) и проверяет, что CSS соответствует спецификациям CSS .
В этой статье будет рассмотрен первый из этих инструментов, чтобы показать, как его использовать, и как интерпретировать типичные результаты, которые возвращает валидатор . Проверка ссылок достаточно очевидна, а валидатор CSS также станет вполне понятен после прочтения этой статьи и статей по CSS , которые будут представлены дальше в курсе.
Статья имеет следующую структуру:
- Ошибки
- Что такое валидация?
- Зачем нужна валидация?
- Различные браузеры интерпретируют неправильный код HTML
по разному
- Quirksmode
- Как выполнить валидацию страниц
- Валидатор W3C HTML
- Заключение
- Дополнительные инструменты
- Контрольные вопросы
Ошибки
В программировании компьютеров существует, вообще говоря, два вида проблем кода:
- синтаксические ошибки - когда ошибки в записи кода не позволяют компьютеру правильно выполнить или скомпилировать программу.
- ошибки программирования (или логики) - когда код не полностью отражает замысел программиста.
В большинстве языков программирования ошибки первого рода достаточно легко обнаружить - программа просто отказывается выполняться или компилироваться, пока ошибка не будет исправлена. Это делает поиск и исправление таких ошибок значительно проще в ситуациях "почему она не делает то, что я хочу".
HTML не является языком программирования. Синтаксические ошибки на Web -странице обычно не ведут к тому, что Web - браузер отказывается открыть страницу (хотя XHTML является более строгим, чем HTML -- по крайней мере, когда обрабатывается как данные application/xhtml+xml или text/xml , как и должно быть - и некоторые doctype запрещают использование определенных типов элементов HTML ). Это является одной из основных причин быстрого принятия и распространения Web .
Первый браузер Web , WorldWideWeb (http://www.w3.org/People/Berners-Lee/WorldWideWeb.html) написанный Тимом Бернерс-Ли, был также редактором, позволявшим людям создавать Web -страницы, не изучая сначала HTML . Этот редактор создавал неверный HTML . Это можно было бы исправить, но был создан важный прецедент , который существует во всех браузерах Web до сегодняшнего дня - суть которого в том, что предоставление людям доступа к контенту важнее, чем сообщение об ошибках людям, которые их не понимают или не могут их исправить.
Что такое валидация?
Хотя браузеры Web будут принимать плохие (недействительные в нашей терминологии) Web -страницы и делать максимум возможного для визуализации кода, делая наилучшие предположения о намерении автора, тем не менее, можно проверить, был ли HTML написан правильно, и на самом деле это нужно делать, как мы увидим ниже. Мы называем этот процесс "валидацией" HTML .
Программа валидации сравнивает код HTML на странице Web с правилами сопровождающего doctype и сообщает, какие правила и где были нарушены.
Зачем нужна валидация?
Существует распространенное мнение среди некоторых Web -разработчиков, что если Web -страница выглядит в браузерах хорошо, то не имеет значения, что ее валидация не была выполнена. Они называют валидацию идеальной целью, но не чем-то, что является черно-белой проблемой.
Существует некоторая доля истины в таком подходе, спецификация HTML не является совершенной, и сейчас существенно устарела. Некоторые вещи, которые, возможно, правильны (такие как начало упорядоченного списка в точке, отличной от 1) являются недействительными в HTML . Однако как говорит пословица:
Учите правила, чтобы знать, как нарушать их правильно
Существует две крайне важные причины для валидации кода HTML при его создании.
- Человек не совершенен, как и создаваемый им код - все делают ошибки, и Web -страницы будут более высокого качества (т.е., работать более согласованно), если выполоть все ошибки.
- Браузеры изменяются. В будущем браузеры, скорее всего, будут менее снисходительны при синтаксическом анализе недействительного кода.
Валидация является системой раннего предупреждения о существовании ошибок на страницах, которые могут проявлять себя разнообразным и трудно определяемым образом. Когда браузер встречает недействительный код HTML , он вынужден делать обоснованное предположение о том, что вы собирались делать - и различные браузеры могут приходить к различным ответам.
Различные браузеры интерпретируют неправильный код HTML по разному
Действительный код HTML является только контрактом, который вы заключаете с производителями браузеров. Спецификация HTML говорит, как вы должны написать это, и как они должны интерпретировать ваш документ. В последнее время соответствие браузеров стандартам достигло той точки, где, если вы пишете действительный код, все основные браузеры должны интерпретировать ваш код одинаково. Это почти всегда касается в любом случае HTML , в то время как другие стандарты имеют немного больше различий в поддержке в различных браузерах.
Но что будет, если передать браузеру недействительный (невалидный) код? Что тогда произойдет? Ответ состоит в том, что в браузере начинает работать обработка ошибок, чтобы определить, что делать с кодом. Браузер , как правило, поступает следующим образом: "ладно, этот код недействителен, как можно представить эту страницу конечному пользователю? Давайте заполним недостающее следующим образом!"
Звучит прекрасно, не правда ли? Если на странице имеется несколько ошибок, то браузер заполнит вместо вас недостающее? Не совсем так, так как каждый
После создания сайта и наполнения его всем необходимым, сайт нуждается в проверки на ошибки. Что бы найти ошибки написания в html и css вам поможет валидатор W3 — World Wide Web Consortium, что в переводе: Консорциум Всемирной Паутины. Он находит все ошибки и указывает где они находятся, так же предлагает варианты их устранения.
Зачем исправлять код Валидатором W3C
На самом деле плюсов от этого не много и все они условные, но к сожалению каждый сайт должен иметь минимальное количество ошибок в идеале ни одной. Что бы вы решили нужно ли вам это, вот его плюсы:
- Повысится скорость загрузки страницы, но чуть-чуть, это даже не будет заметно.
- В каждом браузере сайт будет отображаться одинаково.
- Когда добавляют сайт в каталог, обращают внимание на грамотность написания html и css.
Плюсов не много, но исправить ошибки html и css с помощью валидатора W3C стоит!
Как исправлять ошибки Валидатором
Принцип исправления ошибок валидатором не сложный и каждый сможет справиться с этим! Переходим по ссылки на , если трудно понять английский, советую пользоваться переводчиком, либо пользуетесь этим , что покажет на русском вид ошибок. Рассмотрим пример исправления валидатором:
1.Набираем в поле имя вашего сайта полностью.
2.В списке начинаем смотреть где и какая ошибка и что нужно для её устранения.
Как видно на картинки, моя ошибка в ссылке, эту проблему я нашёл в плагине share buttons. Часто приходится копаться во всех файлах, что бы найти ошибку.
3.Добавляем элемент в строку, где была найдена ошибка и проверяете валидатором опять.
Если ошибка исправлена, то это хорошо. Если нет, то придётся искать дальше.
Влад Мержевич
Для проверки веб-страниц на наличие ошибок и замечаний существует множество путей и способов. Условно они делятся на онлайновые и локальные. Онлайновые предназначены для проверки страниц с помощью браузера через Интернет, а локальные используются для проверки документов на текущем компьютере. Далее рассмотрим популярные методы валидации документов.
validator.w3.org
Установка расширения
После скачивания файла установить расширение можно несколькими способами.
1. Через менеджер расширений
Запустите Firefox и откройте меню Инструменты > Расширения . Перетащите мышью загруженный файл (он имеет расширение xpi) в открывшееся окно. Далее расширение будет установлено автоматически.
2. С помощью открытия файла
Выберите в меню Firefox пункт Файл > Открыть файл... и укажите путь к файлу с расширением, дальнейшие действия браузер выполнит сам.
3. Копирование файла в папку extension
Откройте папку на диске, где установлен Firefox (к примеру c:\Program Files\Mozilla Firefox) и найдите в ней подпапку extension, в которую скопируйте расширение. После запуска браузера дальнейшая установка пройдет самостоятельно.
Все приведенные методы установки требуют перезагрузки браузера после установки расширения. Работа HTML Validator начинается сразу же после повторного запуска Firefox.
Если указанные способы по каким-либо причинам не помогли, вы можете обратиться на сайт поддержки браузера Mozilla Firefox и прочитать обо всех возможных методах установки расширений по адресу
http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing
Использование HTML Validator
При открытии веб-страницы HTML Validator начинает сразу же свою работу, и результат проверки отображается в строке состояния, в ее правом нижнем углу в виде небольшой картинки. Изображение зависит от статуса проверки и показано на рис. 14.6.
Рис. 14.6. Виды картинок, отображаемых при проверке документа
Кружок с галочкой (рис. 14.6а) показывает, что документ валидный, желтый треугольник с восклицательным знаком (рис. 14.6б) - по коду имеются замечания, которые могут быть исправлены автоматически. А красный кружок с крестиком (рис. 14.6в) предупреждает, что есть серьезные ошибки.
Просмотреть все ошибки можно двояко. Во-первых, заглянуть в HTML-код документа через меню Вид > Исходный код страницы или щелкнуть правой кнопкой и в контекстном меню выбрать Просмотр исходного кода страницы (рис. 14.7).
Рис. 14.7. Контекстное меню с пунктом выбора исходного кода
Окно исходного кода веб-страницы разделено на три части (рис. 14.8), где верхний блок содержит собственно HTML-код. В левом нижнем блоке отображается список ошибок и замечаний или информационные сообщения в случае валидного документа. Правый нижний блок предназначен для подробных подсказок о текущих замечаниях.
Рис. 14.8. Результат работы расширения HTML Validator
