хороший XHTML-код

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

Создать сайт с хорошей разметкой — это все равно что добротно сделать стул. Сделайте его хорошо, и этот стул будет вас радовать долгие годы. Даже если каждые несколько лет вам приходится менять обивку, чтобы стул не выглядел устаревшим, вам никогда не придется чинить его с помощью гвоздей и клея. Если такие ситуации не уязвляют ваше самолюбие, то, возможно, вас предостережет от них хотя бы чувство стыда за некачественно сделанные вещи. Несколько лет назад мои друзья заказали себе деревянную веранду, которую собирались пристроить к задней части дома. Они думали, что так их дом будет выглядеть лучше, и огорчились, когда эта веранда развалилась через год. Подрядчик использовал плохую древесину для строительства, неустойчивую к дождям, снегу и палящим солнечным лучам. Мои друзья предъявили подрядчику претензии, и ему пришлось заплатить штраф.

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

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

Для того чтобы привыкнуть к этому новому (на самом деле довольно старому) подходу к разметке, вам, возможно, понадобится некоторое время. Не удивляйтесь тому, что поначалу продуктивность работы будет не очень высокой. Не зря говорят: тяжело в учении — легко в бою. Потом вам будет гораздо проще создавать и переделывать сайты. Вы будете гораздо меньше работать с HTML; будете писать несколько строк разметки, так чтобы они выполняли всю оставшуюся работу. В результате у вас получатся страницы, которые хорошо работают во всевозможных браузерах и других устройствах просмотра.

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

  • XHTML должен начинаться с тегов, которые говорят браузеру о том, как их надо интерпретировать. Начните страницу с объявления типа документа (Document Type Declaration ~ DTD) и с XHTML-объявления пространства имен.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

Объявление типа документа (Document Type Declaration) сообщает браузеру, какое определение типа документа (Document Type Definition ~ DTD) вы используете. Определение типа документа — это документ, который представляет собой список элементов и атрибутов, которые могут использоваться в SGML, XML или HTML-документах. Определение типа документа описывает, где каждый тег позволителен и какие теги могут появиться внутри других тегов. У каждой версии XHTML есть определение типа документа. Web-разработчики могут выбрать один из типов документов: XHTML Transitional (Переходный), XHTML Strict (Точный) и, если вы хотите разделить окно браузера на два или более фрейма, XTHML Frameset (Установка фреймов).

Пространства имен (Namespaces) — это способ определить или квалифицировать элементы и атрибуты, используемые в XML, HTML или других документах разметки. Поскольку элементы и атрибуты могут приобрести двойной смысл в различных типах документов и программном обеспечении, вам нужно задать конкретное пространство имен, которое вы используете. Возможно, это покажется вам слишком нудной процедурой, но имейте в виду, что управление этими именами поможет предохранить ваши элементы от неправильного интерпретирования браузерами и устройствами просмотра. Это трудно понять, но легко сделать. Просто вставьте эту строку.

  • Пишите теги строчными буквами. Если у вас привычка писать <Н1>, <BODY> и тому подобное, привыкайте писать <h1> и <body>. Многие HTML-редакторы имеют установку, которая позволяет писать теги строчными буквами по умолчанию.
  • Возьмите все атрибуты в кавычки. Возможно, это лишняя перестраховка — все равно что держать закрытыми двери в шкафу. Раньше вам не приходилось брать в кавычки атрибуты ширины (width) и высоты (height).

В HTML это было совершенно нормально:

<img src=»images/susan.gif» alt=»Жизнь снова может стать хорошей» width=239 height=243>

XHTML требует, чтобы эти атрибуты были в кавычках, вот так:

<img src=»images/susan.gif» alt=»Жизнь снова может стать хорошей.» width=»239″ height=»243″ />

  • Закройте все теги. Это будет самым трудным для выполнения изменением. Если у вас сформировались плохие привычки, как у большинства из нас, вам придется стать дисциплинированнее. Если у вас стоит открытый тег <body>, вам придется его закрыть тегом </body>. Если у вас открытый тег абзаца <р>, закройте его тегом </р>.

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

Метатеги (Meta Tags) в заголовке документа описывают документ. Метатеги содержат тему, автора, ключевые слова и другие описательные элементы о странице. Поисковые машины и индексаторы используют эти данные для того, чтобы описывать и ссылаться на сайт.

В старые добрые времена HTML 4.0 и более ранних версий тег новой строки выглядел вот так:

<br>

В XHTML он должен быть закрытым. Добавьте к тегу пробел и слэш:

<br />

Тег изображения в ранних версиях HTML выглядел следующим образом:

<img src=»gadget.gif» width=»500″ height=»250″ alt=»Китайский телефон»>

Если вы используете язык XHTML, вам придется добавить пробел и слэш, прежде чем закрыть тег:

<img src=»gadget.gif» width=»500″ height=»250″ alt=»Китайский телефон» />

  • Проверяйте ваши страницы. Поначалу это может вас испугать, но вскоре вы поймете, что процесс проверки полезен, даже увлекателен. Просто напишите URL-адрес страницы, над которой вы работаете, в странице HTML-валидатор (контролер) на сайте W3C (http://validator.w3.org), как показано на рисунке; нажмите кнопку Submit (Отправить) и узнайте, насколько хорош ваш XHTML-код. Этот инструмент обнаружит большинство XHTML-ошибок. Когда вы научитесь выявлять ошибки в CSS, этот инструмент станет вашим лучшим другом.

 

Если вам кажется, что валидатор W3C работает медленно, используйте валидатор Web Design Group, который можно найти на сайте www.htmlhelp.com/tpols/validatior.

Валидатор W3C - это инструмент, который проверяет, насколько правильно сделана ваша разметка.

При исправлении первых нескольких страниц у вас появится такое понимание разметки, какого, возможно, никогда и не было. В отчете валидатора на рисунке пункты 2, 3 и 4 сообщают о том, что элемент страницы body содержит нежелательные элементы topmargin, leftmargin, marginwidth и marginheight.

Говоря простым языком, это означает, что тег body содержит четыре характеристики (атрибута) полей, которые не используются в текущей спецификации XHTML.

Вот плохая разметка:

<body bgcolor=»#ffffff» topmargin=»0″ leftmargin=»0″ marginwidth=»0″ marginheight=»0″ onload=»preloadlmages();»>

А вот хорошая разметка, которую вы напишете, прочитав отчет валидатора:

<body onload=»preloadlmages();«>

Эти ненужные атрибуты тега body — теги, введенные Microsoft и Netscape, которые никогда не являлись частью формальной спецификации W3C. В качестве других ошибок могут быть выявлены устаревшие элементы и атрибуты — они были в предыдущей версии HTML, но сейчас от них отказались. Устаревшие атрибуты тега body, такие как marginwidth, занимавшиеся управлением представления сайта, прекрасно и более экономично поддерживаются CSS. Вместо того чтобы тратиться на внесение этой разметки на каждую отдельную страницу, вы можете написать строчку в таблице стилей, которая позаботится об оформлении на всем сайте.