Вычищаем HTML-код

Автор: Александр Архипов
NeoMoon-Хостинг

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

Зачем нужен "правильный" HTML-код?

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

Теперь представьте, что HTML код страницы содержит ошибки (не соответствует
стандарту). Что в этом случае делать браузеру?

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

Вот тут и кроется проблема. Каждый браузер имеет свои правила, по которым он
будет исправлять HTML ошибки на веб-страницах. Поэтому, если на странице есть
ошибки, то существует большая вероятность, что данная страница в разных
браузерах будет выглядеть по-разному.
Более того, если даже он сейчас выглядит одинаково во всех браузерах, это не значит, что так будет всегда. С выходом новой версии какого-либо браузера коррекция HTML ошибок может быть изменена. А вот следование стандартам изменено вряд ли будет.

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

W3C Markup Validation Service

Представляю вашему вниманию классический сервис для проверки синтаксиса HTML от W3C (World Wide Web Consortium). W3C - это специальный консорциум, который разрабатывает и принимает стандарты веб-технологий, такие как HTML или набирающий сейчас популярность XHTML.
Проверить валидность (правильность) HTML кода своей страницы вы можете по
адресу: http://validator.w3.org/
Введите URL страницы, которую вы хотите проверить, и нажмите "Check". После
этого вы получите результаты проверки HTML-кода на странице.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

W3C Validator по этой строке определяет, как нужно проверять данный документ.
Для страницы, содержащей приведенную выше строку, будет использован стандарт HTML в редакции 4.01.

Если вы используете тип документа HTML 4.01, то будьте готовы к
неожиданностям. Например, в классическом HTML нельзя использовать укороченную форму записи тегов (одновременно и открывающийся, и закрывающийся тег).

<meta http-equiv="Content-Type" content="text/xhtml; charset='windows-1251'"/>

Нужно делать вот так:

Если же вы хотите использовать укороченную форму записи тегов, то вы можете
описать тип вашей страницы, как "расширенный HTML" (XHTML). Этот тип уже
позволяет пользоваться конструкциями вида: <tag attribute="value"/>.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Обнаружив такую строку, W3C Validator будет проверять веб-страницу, используя
правила стандарта XHTML.

Но будьте аккуратны. Стандарт XHTML не разрешает отсутствие закрывающегося
тега. То есть, если элемент <BR> является вполне допустимым для HTML, то
XHTML Validator сгенерирует ошибку. Чтобы "удовлетворить" его, необходимо
вместо <BR> использовать <BR />

HTML Validator плагин для Firefox

Недостаток валидатора от W3C - это то, что он работает только для страниц,
уже загруженных на сайт. А как же проверить HTML-код, если проект
отлаживается локально на локальном веб-сервере? Конечно, можно сохранить код веб-страницы в буфер обмена и затем вставить в форму на той же странице:
http://validator.w3.org/ Но... Есть способ лучше.

Совершенно случайно я узнал, что для браузера Firefox есть плагин для
проверки синтаксиса HTML-кода. Этот плагин доступен для скачивания вот здесь:
https://addons.mozilla.org/firefox/249/

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

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

Например, можно настроить плагин, чтобы он работал только на определенных
сайтах. Этим вы сбережете время отображения страниц, которые вы не хотите
проверять.
Вы можете спрятать определенные предупреждения, если вы не хотите, чтобы они показывались в статус баре. Например, я отключил предупреждение о том, что в таблице отсутствует атрибут summary. Не знаю, почему этот плагин считает этот
атрибут обязательным. В стандарте HTML я не нашел требования обязательного
присутствия этого атрибута для тега <table>.

Поскольку этот плагин базируется на проекте HTML Tidy, то в нем предусмотрена
опция исправить (tidy) HTML код на странице. Эта опция активируется при
нажатии кнопки: "Clean up the page..." при просмотре исходного кода страницы
в браузере Firefox. После нажатия на эту кнопку открывается диалоговое окно,
где вам предлагатся исправленный вариант вашей страницы.

Выводы

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

Существуют различные инструменты для проверки и контроля над правильностью
HTML-кода на странице. Среди них есть как профессиональные инструменты, такие как W3C Validator, которые строго проверяют код, выводя все, даже малейшие огрехи, так и простые в использовании, интуитивно понятные, как плагин для Firefox - HTML Validator.

Тема проверки правильности HTML-кода настолько обширна, что объем статьи не
позволяет описать ее полностью. Однако, я надеюсь, что эта статья укажет вам
правильное направление для дальнейших исследований.