Зачем нужен "правильный" 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'" />
Нужно делать вот так:
<meta http-equiv="Content-Type" content="text/xhtml;
charset='windows-1251'"></meta>
Если же вы хотите использовать
укороченную форму записи тегов, то вы можете описать тип вашей
страницы, как "расширенный 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 в программе Dreamweaver от компании Macromedia
в меню "Commands" выбираем кнопку "Clean up HTML".
Чем чище HTML код вашей страницы,
тем больше вероятность, что она будет выглядеть одинаково во
всех браузерах.
Существуют различные инструменты
для проверки и контроля над правильностью HTML кода на странице.
Среди них есть как профессиональные инструменты, такие как W3C
Validator, которые строго проверяют код и выводя все, даже малейшие
огрехи, так и простые в использовании, интуитивно понятные,
как плагин для Firefox - HTML Validator.
Тема проверки правильности HTML
кода настолько обширна, что объем статьи не позволяет описать
ее полностью. Однако, я надеюсь, что эта статья укажет вам правильное
направление для дальнейших исследований.
Еще статьи на тему: Веб
дизайн
