Советы

Нужна ли HTML-валидация?! Что такое валидаторы кода. Как появился Консорциум Всемирной Паутины

Нужна ли HTML-валидация?! Что такое валидаторы кода. Как появился Консорциум Всемирной Паутины

Производит несколько проверок Вашего кода. Основные из них:

  • Валидация синтаксиса - проверка на наличие синтаксических ошибок. является корректным синтаксисом, несмотря на то, что не является допустимым HTML-тэгом, так что проверка синтаксиса является минимально полезной для написания хорошего HTML.
  • Проверка вложенности тэгов - тэги должны быть закрыты в обратном порядке относительно их открытия. Например, эта проверка отлавливает ошибки с неправильно закрытыми .
  • Валидация DTD - проверка соответствия Вашего кода указанному Document Type Definition. Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа)
  • Проверка на посторонние элементы - проверка выявляет все, что есть в коде, но отсутствует в DTD. Например, пользовательские тэги и атрибуты.
  • Имейте ввиду, что это логические проверки, и не важно как реализован валидатор. Если хотя бы одна из проверок не проходит успешно, то HTML считается невалидным. И в этом заключается проблема.Аргументы Основным аргументом за валидацию HTML является обеспечение кроссбраузерности. Каждый браузер имеет свой парсер и «скармливать» ему то, что понимают все браузеры - это единственный путь быть уверенным, что Ваш код будет работать правильно во всех браузерах. Поскольку каждый браузер имеет свой механизм коррекции ошибок HTML Вы не можете полагаться на невалидный код.

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

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

    Вообще, моей наибольшей проблемой валидации является проверка #4 (на посторонние элементы). Я сторонник использования пользовательских атрибутов в HTML тэгах для хранения дополнительных мета-данных, относящихся к определенному элементу. В моем понимании, это, например, добавить атрибут foo, когда у меня есть данные (bar), которые мне надо ассоциировать с определенным элементом. Иногда люди перегружают существующие атрибуты для этих целей только для того, чтобы пройти валидацию, несмотря на то, что атрибут будет использовать не по назначению. Для меня это бессмысленно.

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

    В случае пользовательских атрибутов, все браузеры парсят и распознают синтаксически корректные атрибуты как допустимые. Это делает возможным получить доступ к таким атрибутам через DOM с помощью Javascript. Так почему я должен беспокоиться о валидности? Я буду продолжать использовать свои атрибуты и я очень рад, что HTML5 формализует их.

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

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

    Чтобы прояснить мою позицию: я считаю, что проверки #1 и #2 являются очень важными и должны проводиться всегда. Проверку #3 я тоже считаю важной, но не столь, как первые две. Проверка #4 очень сомнительна для меня, так как она задевает пользовательские атрибуты. Я считаю, что, как максимум, пользовательские атрибуты должны быть помечены как предупреждения (а не ошибки) в результатах проверки, чтобы была возможность проверить, не ошибся ли я при вводе названия атрибута. Отметка пользовательских тэгов как ошибок, возможно, хорошая идея, но тоже имеет некоторые проблемы, например, при встраивании содержимого в другой разметке - SVG или MathML.

    Валидация ради валидации? Я считаю, что валидация ради валидации - это крайне глупо. Валидный HTML означает только лишь то, что все 4 проверки прошли без ошибок. Есть несколько важных вещей, которых не гарантирует валидный HTML:
    • валидный HTML не гарантирует accessibility;
    • валидный HTML не гарантирует хороший UX (user experience);
    • валидный HTML не гарантирует функционирующий сайт;
    • валидный HTML не гарантирует корректное отображение сайта.
    Валидный HTML может служить поводом гордиться самим собой, но само по себе это не является показателем мастерства. Ваш валидный код не всегда лучше выполняет свои функции чем мой невалидный.Валидация HTML5 Валидация HTML5 исправит некоторые проблемы, которые были с валидацией HTML 4. Она явно позволяет употребление пользовательских атрибутов (они должны начинаться с data-). Это позволит моему коду пройти проверку на валидность для HTML5. Конечно, есть некоторые моменты в валидаторе HTML5, с которыми я не согласен, но я считаю, что он намного больше соответствует практическим потребностям чем валидатор HTML 4. Заключение Я считаю, что некоторые составляющие HTML-валидации крайне важны и полезны, но я не хочу быть ее заложником, потому что я использую свои атрибуты. Я горжусь тем, что я использую ARIA в моей работе и мне безразлично то, что это считается невалидным кодом. Опять же, из четырех проверок валидатора у меня есть проблемы только с одной. И HTML5 валидатор избавит меня от большинства этих проблем.

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

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

    Производит несколько проверок Вашего кода. Основные из них:

  • Валидация синтаксиса - проверка на наличие синтаксических ошибок. является корректным синтаксисом, несмотря на то, что не является допустимым HTML-тэгом, так что проверка синтаксиса является минимально полезной для написания хорошего HTML.
  • Проверка вложенности тэгов - тэги должны быть закрыты в обратном порядке относительно их открытия. Например, эта проверка отлавливает ошибки с неправильно закрытыми .
  • Валидация DTD - проверка соответствия Вашего кода указанному Document Type Definition. Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа)
  • Проверка на посторонние элементы - проверка выявляет все, что есть в коде, но отсутствует в DTD. Например, пользовательские тэги и атрибуты.
  • Имейте ввиду, что это логические проверки, и не важно как реализован валидатор. Если хотя бы одна из проверок не проходит успешно, то HTML считается невалидным. И в этом заключается проблема.Аргументы Основным аргументом за валидацию HTML является обеспечение кроссбраузерности. Каждый браузер имеет свой парсер и «скармливать» ему то, что понимают все браузеры - это единственный путь быть уверенным, что Ваш код будет работать правильно во всех браузерах. Поскольку каждый браузер имеет свой механизм коррекции ошибок HTML Вы не можете полагаться на невалидный код.

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

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

    Вообще, моей наибольшей проблемой валидации является проверка #4 (на посторонние элементы). Я сторонник использования пользовательских атрибутов в HTML тэгах для хранения дополнительных мета-данных, относящихся к определенному элементу. В моем понимании, это, например, добавить атрибут foo, когда у меня есть данные (bar), которые мне надо ассоциировать с определенным элементом. Иногда люди перегружают существующие атрибуты для этих целей только для того, чтобы пройти валидацию, несмотря на то, что атрибут будет использовать не по назначению. Для меня это бессмысленно.

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

    В случае пользовательских атрибутов, все браузеры парсят и распознают синтаксически корректные атрибуты как допустимые. Это делает возможным получить доступ к таким атрибутам через DOM с помощью Javascript. Так почему я должен беспокоиться о валидности? Я буду продолжать использовать свои атрибуты и я очень рад, что HTML5 формализует их.

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

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

    Чтобы прояснить мою позицию: я считаю, что проверки #1 и #2 являются очень важными и должны проводиться всегда. Проверку #3 я тоже считаю важной, но не столь, как первые две. Проверка #4 очень сомнительна для меня, так как она задевает пользовательские атрибуты. Я считаю, что, как максимум, пользовательские атрибуты должны быть помечены как предупреждения (а не ошибки) в результатах проверки, чтобы была возможность проверить, не ошибся ли я при вводе названия атрибута. Отметка пользовательских тэгов как ошибок, возможно, хорошая идея, но тоже имеет некоторые проблемы, например, при встраивании содержимого в другой разметке - SVG или MathML.

    Валидация ради валидации? Я считаю, что валидация ради валидации - это крайне глупо. Валидный HTML означает только лишь то, что все 4 проверки прошли без ошибок. Есть несколько важных вещей, которых не гарантирует валидный HTML:
    • валидный HTML не гарантирует accessibility;
    • валидный HTML не гарантирует хороший UX (user experience);
    • валидный HTML не гарантирует функционирующий сайт;
    • валидный HTML не гарантирует корректное отображение сайта.
    Валидный HTML может служить поводом гордиться самим собой, но само по себе это не является показателем мастерства. Ваш валидный код не всегда лучше выполняет свои функции чем мой невалидный.Валидация HTML5 Валидация HTML5 исправит некоторые проблемы, которые были с валидацией HTML 4. Она явно позволяет употребление пользовательских атрибутов (они должны начинаться с data-). Это позволит моему коду пройти проверку на валидность для HTML5. Конечно, есть некоторые моменты в валидаторе HTML5, с которыми я не согласен, но я считаю, что он намного больше соответствует практическим потребностям чем валидатор HTML 4. Заключение Я считаю, что некоторые составляющие HTML-валидации крайне важны и полезны, но я не хочу быть ее заложником, потому что я использую свои атрибуты. Я горжусь тем, что я использую ARIA в моей работе и мне безразлично то, что это считается невалидным кодом. Опять же, из четырех проверок валидатора у меня есть проблемы только с одной. И HTML5 валидатор избавит меня от большинства этих проблем.

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

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

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

    На моем же блоге сейчас нет подобных ошибок, я от них избавился (всего было более 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 "