Телекоммуникации

Сайтостроение по стандартам

Заметка 3. Как написать плохой код

Так же как плохое питание негативно влияет на организм, плохой код подрывает “здоровье” всей Сети. Но до недавнего времени этот факт был скрыт от нас, [...] потому что нам не с чем было сравнивать, — 99,9% сайтов устарели.

Джеффри Зельдман “Web-дизайн по стандартам”

Плохой код можно написать разными способами.
В этой заметке рассказано, как написать плохой код при помощи:

разметки структуры визуальными тегами;
визуальной разметки структурными тегами;
стилевых определений в тегах;
неверного выбора способа соединения CSS с HTML.

Разметка структуры визуальными тегами

<font color="#FFFFFF">|</font>
 
 
<a style="color:#FFFFFF;text-decoration:none;" href= "/isapi/gosearch.asp?target=/us/default.asp" target="_top" onmouseover="this.style.color=’#FFCC00’;" onmouseout="this.style.color=’#FFFFFF’;">Search</a> 

Это может показаться невероятным, но этот кусок кода взят не из архивов 1997 года, не является фрагментом студенческой работы новичка или исходным кодом загнивающего сайта мелкой конторы. Он был взят именно в таком виде, в каком вы его видите, с web-сайта компании Microsoft 7 января 2003 года.

Джеффри Зельдман “Web-дизайн по стандартам”

Довольно часто в HTML-коде можно встретить разметку, вроде приведенной ниже:

Пример неструктурной разметки

<B><FONT size="6" color="red">Заголовок раздела</FONT></B><BR>
<FONT color="#1a1a1a">
  Первый абзац содержания раздела.<BR>
  Второй абзац содержания раздела.<BR>
</FONT>

Автор думает, что он хорошо структурировал текст: разделил его на заголовок и два абзаца.

На самом деле в этом коде нет ни одного элемента, отражающего структуру. Здесь нет ни заголовков, ни абзацев. Код позаботился лишь о виде отдельных фрагментов текста, не давая ни малейшего намека на роль этих фрагментов в структуре документа.

Почему это плохо?

Программа, автоматически создающая оглавление страницы, не сможет сделать свою работу, ибо никакой структуры в текст не заложено.
Поисковые системы особенно внимательно относятся к заголовкам, справедливо считая их важными структурными элементами. Первыми в результатах поиска они запишут сайты с заголовками, содержащими образец поиска. Но только не сайт с кодом, приведенным выше.
Голосовой браузер читает заголовки определенной интонацией, привычной для пользователя, или снабжает их комментарием (“заголовок”). Никаких заголовков в тексте такой браузер не обнаружит.
Большой сайт содержит сотни и даже тысячи страниц. Когда сайт закодирован подобным образом, модификация дизайна становится практически невозможной.

Если потребуется изменить красный цвет заголовка на зеленый, придется просматривать сотни страниц и править указание color="red" на color="green" в каждом теге FONT, принадлежащем заголовку.

Всю эту работу придется делать вручную, просматривая строчки кода по порядку. Автоматический поиск не поможет, ибо тег FONT может встречаться не только в заголовках. Понятно, что такая работа просто не реальна. Даже если отважиться на нее, пропуски “заголовков” или правки в “не заголовках” становятся неизбежными.

Нужна ли нам такая головная боль?

А ведь можно написать красиво и совсем просто:

Пример структурной разметки

<H1>Заголовок раздела</H1>

<P>

Первый абзац содержания раздела.

<P>

Второй абзац содержания раздела.

— Постойте, а как же красный цвет заголовка? (Это возмущается автор неструктурного кода.)

— Нет проблем. Добавляем в файл CSS определение, которое будет работать для заголовков всех уровней на всех страницах:

H1,H2,H3,H4,H5,H6 {color: red;}

— А темно-серый цвет текста?

— Еще одно определение:

P {color: #1a1a1a;}

— А как теперь изменить цвет в заголовках на зеленый?

— Очень просто! Делаем всего одну правку в CSS-файле:

H1,H2,H3,H4,H5,H6 {color: green;}

И все заголовки на всех страницах станут зелеными.

— Постойте! Получилось плохо. Я использовал BR, и мои заголовки близко примыкали к тексту, а ваши, выводимые H1, отстоят от него далеко. Это противоречит моему замыслу. Придется отказаться от H1 — дизайн для меня очень важен.

— Вы еще не поняли? HTML — язык не для дизайна. HTML предназначен для разметки структуры.

Забудьте про HTML, когда нужно изменить вид объекта на экране.

Для дизайна предназначен язык CSS. Вам не нужен отступ заголовка от текста? Пожалуйста:

H1,H2,H3,H4,H5,H6
{
color: red; /* задаём красный цвет */
margin-bottom: 0; /* убираем отступ внизу */
}

Теперь все заголовки на всех страницах будут примыкать к тексту плотно (как это было с вашим тегом <BR>).

— Еще проблема. В своем коде я писал:

  Первый абзац содержания раздела.<BR>
  Второй абзац содержания раздела.<BR>

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

— И очень правильно. Для экрана такой стиль отображения абзацев — самый хороший. В книгах слова переносятся по слогам, и очень легко добиться выравнивания текста по ширине без пустот в нем. Браузеры не умеют расставлять переносы, поэтому в нешироких текстах выравнивание по ширине не используют, а текст с длинными строчками читать некомфортно. Для абзаца используют выравнивание слева.

Красные отступы ломают ровный левый край. Получается, что такой текст не выровнен ни слева, ни справа, читать его трудно, и он некрасиво смотрится, ибо отсутствие выравнивания всегда воспринимается как визуальная погрешность.

Если к тому же абзацы не отделены пустыми строками, весь текст на странице превращается в один сплошной абзац с неровными краями. Читать практически невозможно.

— Вы хотите сказать, что тег <BR> вообще не нужен? А если надо записать вертикальное меню ссылок?

Такое меню я всегда записываю так:

ссылка 1<BR>
ссылка 2<BR>
ссылка 3<BR>
ссылка 4<BR>

— Давайте наконец договоримся: HTML — язык для разметки структуры документа. А для дизайна существует язык CSS. И баста.

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

<UL class=setlinks>
<LI>ссылка 1
<LI>ссылка 2
<LI>ссылка 3
<LI>ссылка 4
</UL>

Список — это структура, а ваша запись с BR никакой структуры не отражает.

— Мне не нужны маркеры и списочные отступы!

— Нет проблем, берем в руки CSS и пишем нужное определение:

.setlinks
{
list-style: none; /* убираем маркеры */
padding: 0; /* убираем отступы */
}

Теперь элементы списка будут выводиться без маркеров и отступов. Заметим, что это CSS-определение будет работать только для списков, в которых записан атрибут class со значением setlinks и не затронет другие UL, которые будут отображаться на экране обычным образом (с маркерами и отступами).

Визуальная разметка структурными тегами

Мы привыкли, что <h1> означает крупный шрифт,

<li> — маркер, <blockquote> — отступ.

...

Игры кончились, пора начать использовать элементы по их назначению, а не по внешнему виду.

Джеффри Зельдман “Web-дизайн по стандартам”

Очень плохо, когда структурные элементы используют в коде не по назначению. Например, элемент Hn употребляется для выделения обычных слов или фраз, не являющихся заголовками, а элемент BLOCKQUOTE — для записи обычного текста с отступами.

В примере, который приводится ниже, автор сайта поступил именно таким образом:

<BLOCKQUOTE>
На этом сайте рассказаны потрясающие истории!
<H1>ЗАХОДИТЕ К НАМ!!!<H1>
</BLOCKQUOTE>

Разработчик знает, что браузер выводит Hn на экран укрупненным шрифтом повышенной жирности, а BLOCKQUOTE с отступами, и использует эти элементы для дизайна, игнорируя их структурный смысл.

Давайте скажем “нет” таким приемам, они не добавляют порядка в наш код.

Структурные элементы предназначены для разметки структуры и не должны использоваться для визуальных нужд.

Стилевые определения в тегах

В 1997 году, когда MS IE3 предложил частичную поддержку CSS1, заинтригованные перспективами нового стандарта дизайнеры подошли к нему с той же самой, неструктурной, излишне многословной точки зрения, так полюбившейся нам.

Вместо ссылок на единый файл с таблицами стилей, который может храниться в кэше браузера пользователей, мы вставляли стили отдельно для каждого элемента, что создавало не меньше трафика, чем пресловутые font и bgcolor.

Джеффри Зельдман “Web-дизайн по стандартам”

Вместо раскритикованного в начале заметки кода:

<B><FONT size="6" color="red">Заголовок раздела
</FONT></B><BR>
<FONT color="#1a1a1a">
  Первый абзац содержания раздела.<BR>
  Второй абзац содержания раздела.<BR>
</FONT>

автор написал другой плохой код:

<DIV style="font-size:150%;font-weight:bold;color:red">Заголовок раздела</DIV>
<DIV style="color:#1a1a1a">
  Первый абзац содержания раздела.<BR>
  Второй абзац содержания раздела.<BR>
</DIV>

— и премного порадовался удачному решению! Автор решил, что использование CSS привело код в соответствие с современным уровнем сайтостроения.

На самом деле ничего не изменилось.

Код не стал структурным, потому что в нем не использованы структурные элементы HTML.

Визуальная разметка по-прежнему уложена на один диван с содержанием.

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

Способы соединения CSS с HTML

Скажем сразу: для отделения содержания от дизайна последний нужно помещать в отдельный CSS-файл.

А всего существует три способа соединения стилевых правил CSS с кодом HTML.

1. Стилевые определения размещаются в отдельном CSS-файле, а в каждом HTML-файле записывается ссылка на эти определения при помощи элемента LINK в головной части HTML-кода:

<LINK rel="stylesheet" type="text/css" href="style.css">

При построении страницы браузер руководствуется указаниями стилевого файла style.css.

Каждая страница сайта строится по одному визуальному шаблону, определенному в style.css, и мы получаем те преимущества CSS, о которых говорилось: отделение дизайна от содержания, уменьшение общего кода почти на 50%, простой редизайн сайта. И плюс к этому: единый стиль для всех страниц сайта.

2. Стилевые определения размещаются в головной части HTML-файла при помощи элемента STYLE:

Так, заданные стилевые определения действуют только внутри того файла, в котором они записаны.

3. Стилевые определения размещаются в открывающем теге элемента в качестве значений атрибута style:

<H1 style="color: green">Заголовок раздела</H1>

По правилам каскадирования стилевое определение в теге главнее стилевого определения в головной части HTML-кода, а последнее главнее определений, заданных в отдельном стилевом файле.

Рассмотрим области использования этих трех вариантов соединения CSS с HTML-кодом.

Вариант, при котором стилевые определения задают единый шаблон страниц в отдельном CSS-файле, является основным. Именно он позволяет действительно отделить дизайн от содержания, разведя их по разным кодам и файлам.

Вариант размещения CSS-определений в головной части можно использовать, чтобы переопределить для данной страницы свойства общего шаблона.

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

Можно найти и другие причины для создания собственных стилей отдельной страницы (связанных, например, с особенностями форматирования материала, на ней расположенного).

Строго следуя принципу разделения дизайна и содержания, можно завести для каждого HTML-файла собственный CSS-файл и в нем указывать стилевые особенности, характерные только для этого файла.

Так и надо поступать, если набор уникальных правил для страницы достаточно велик.

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

Для HTML-файла с именем 01.htm можно записать:

<LINK rel="stylesheet" type="text/css" href="style.css">

<LINK rel="stylesheet" type="text/css" href="01.css">

В файл style.css записываются определения общего шаблона страниц, а в файл 01.css — уникальные определения для файла 01.htm.

Когда задано несколько конфликтующих стилевых определений, действует последнее из них. Значит, в силу порядка следования, определения в 01.css будут главнее определений style.css, и если в общем шаблоне для кнопки был прописан синий цвет, а в файле 01.css белый, то на странице 01.htm кнопка будет белой.

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

Вариант размещения CSS-определений в тегах противоречит рекомендациям стандарта (никакого разделения дизайна и содержания не получается) и надо избегать такого кодирования.

Заметка 4. Выбор языка разметки гипертекста

До сих пор подавляющее большинство текстов создаются и хранятся в “фирменных”, ориентированных на визуальное представление, форматах, вроде MS Word, — которые, как языки первобытных племен, неспособны отделить “существительное” содержимого документа от “прилагательного” его представления в той или иной среде.

Дмитрий Кирсанов “Веб-дизайн”

В Word есть средства для задания стилей. Если грамотно их использовать, то и в этом редакторе можно отделить визуальную разметку от структурной.

Но очень мало людей используют стили. Когда нужно выделить слово, нажимается К или Ж, то есть пользователи Word поступают так же, как те web-разработчики, которые используют элементы I и B вместо EM, STRONG и языка CSS.

Но Дмитрий Кирсанов выразился очень изящно!

Давайте отделять в своих web-проектах “существительное” содержимого документа в файле HTML от “прилагательного” его представления в файле CSS. И мы сразу поднимемся над уровнем первобытных племен и древних технологий!

Эта заметка посвящена вопросу выбора языка гипертекстовой разметки. Чтобы выбор был максимально понятным, мы снова начнем с исторических корней. Причем на этот раз копнем глубже, до самого SGML.

Развитие языка гипертекстовой разметки

Начало истории HTML следует отнести к далекому 1969 году, когда Чарльз Гольдфарб, работающий тогда в компании IBM, создал прототип языка для разметки технической документации, впоследствии названного GML, а с приданием ему в 1986 году статуса международного стандарта — SGML (Standard Generalized Markup Language). Этот обобщенный метаязык предназначен для построения систем логической, структурной разметки любых разновидностей текстов. Слово “структурная” означает, что управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о форматировании документа, а лишь указывают границы и соподчинение его составных частей, т.е. задают его структуру.

...

Однако сам по себе SGML не получил сколько-нибудь заметного распространения до тех пор, пока в 1991 г. сотрудники Европейского института физики частиц (CERN), занятые созданием системы передачи гипертекстовой информации через Интернет, не выбрали SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык — самое известное из приложений SGML — был назван HTML (HyperText Markup Language, “язык разметки гипертекста”).

Дмитрий Кирсанов “Веб-дизайн”

В ЦЕРН (CERN) разработку языка возглавил Тим Бернерс-Ли (Tim Berners-Lee).

Версия HTML 1.0 была предельно проста — кроме тегов для записи гипертекстовых переходов (для контекстной связи документов друг с другом), она предусматривала лишь несколько тегов для логической разметки текста и один тег IMG для записи ссылок на файлы с картинками-иллюстрациями.

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

Структурная разметка указывает границы частей документа и их соподчинение (заголовки Hn, абзацы P, цитаты CITE, выделения EM, сильные выделения STRONG, гиперссылки A, ссылки на файлы с картинками IMG).

Задача представления элементов на экране возлагалась на средства отображения гипертекстовых документов (браузеры).

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

Развитие графических средств вывода информации провоцировало появление в следующих версиях HTML многочисленных тегов, позволяющих непосредственно управлять видом элемента на экране: тег I для оформления курсивом, тег B для полужирного начертания, тег FONT для задания гарнитуры и кегля...

Смесь из структурной и визуальной разметки стала здорово перегружать код страницы мешаниной тегов с их многочисленными атрибутами.

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

В самом деле, если разработчик принял решение выводить текст рубленым шрифтом пониженного размера вместо ранее используемого серифного шрифта, он должен внимательно отредактировать сотни страниц сайта, заменяя всюду тег <FONT face=Journal> тегом <FONT face=Verdana size=-1>.

Автоматизировать такую замену нельзя, ведь исходные теги FONT могут содержать и другие атрибуты, например, color. Приходится выполнять правки вручную, лишь частично упрощая жизнь автоматическим поиском по ключу “font”. Работа большая, как и вероятность ошибки: легко можно пропустить правку тега или даже целого файла.

Описанием стандартов HTML, начиная с версии 2.0 (1994 год), стала заниматься международная организация W3C (от англ. World Wide Web Consortium — Консорциум Всемирной паутины).

В 1995 году Консорциум ввел в HTML версии 3.0 поддержку иерархических стилевых спецификаций CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей).

CSS — это разрешение противоречий между идеологией структурной разметки и потребностями разработчиков в гибких и богатых средствах визуального представления элементов на экране.

Язык CSS имеет свой собственный синтаксис и позволяет задавать визуальные параметры представления любого элемента HTML.

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

В 1999 году W3C опубликовала спецификации версии HTML версии 4.0. Затем в 1999 году был опубликован стандарт HTML 4.01. На этом развитие языка HTML закончилось окончательно.

На смену HTML в 2000 году пришла спецификация XHTML 1.0. Буква “X” здесь означает XML.

XML (от англ. eXtensible Markup Language — расширяемый язык разметки, компактное упрощенное подмножество языка SGML) — рекомендованный W3C язык разметки, представляющий собой свод общих правил, нацеленных на создание описаний данных.

XML не предназначен для осуществления каких-либо действий, в том числе для показа информации на экране компьютера. Он создан для хранения структурированной информации.

Данные на языке XML описываются при помощи тегов. Вот как, например, может выглядеть на XML описание списка школьников:

<СПИСОК>

<ЗАГОЛОВОК>Список учеников</ЗАГОЛОВОК>

<ШКОЛЬНИК>
<ФАМИЛИЯ>Кук</ФАМИЛИЯ>
<ИМЯ>Вася</ИМЯ>
<КЛАСС>8 класс</КЛАСС>
<ПОЛ>Пол: мужской</ПОЛ>
<ХОББИ>Информатика</ХОББИ>
</ШКОЛЬНИК>

<ШКОЛЬНИК>
<ФАМИЛИЯ>Воробьева</ФАМИЛИЯ>
<ИМЯ>Света</ИМЯ>
<КЛАСС>7 класс</КЛАСС>
<ПОЛ>Пол: женский</ПОЛ>
<ХОББИ>Музыка</ХОББИ>
</ШКОЛЬНИК>

</СПИСОК>

Приведенный выше XML-код содержит описание элемента с именем СПИСОК. В какой-то степени этот элемент соответствует элементу BODY в языке HTML. Только BODY — ключевое слово языка, а слово СПИСОК придумано разработчиком для описания своей структуры данных.

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

Теги в XML могут содержать атрибуты. Имена атрибутов и набор их значений также задаются разработчиком.

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

Как же браузер сможет отобразить XML-страницу на экране, если в этом коде он не знает ни одного тега (они придуманы разработчиком)?

Очень просто. Можно рассказать браузеру о виде элементов на экране в отдельном CSS-файле.

Получается полная изоляция структурной разметки документа от его визуального представления.

Для описаний внешнего вида XML-элементов разработан специальный стилевой язык XLS (от англ. eXtensible Stylesheet Language — расширяемый язык стилевых спецификаций). XLS сложнее CSS (который тоже можно использовать), но гораздо мощнее его — стилевые указания можно не только описывать свойствами из фиксированного набора, но и произвольно программировать.

На базе XML можно строить другие языки разметки. Один из ярких примеров — язык XHTML.

Отметим некоторые синтаксические особенности языка XML.

Каждый элемент должен иметь закрывающий тег. Таким образом, одиночный тег <HR> на XML должен записываться в виде: <HR></HR>. Допускается специальная форма записи одиночного тега: <HR />.

Регистр букв (в отличие от HTML) имеет значение. Так, теги <ШКОЛЬНИК> и <Школьник> являются разными.

Значения атрибутов обязательно должны заключаться в кавычки.

XHTML — это попытка обеспечить описания данных с помощью выразительных средств сложного XML, сохранив при этом простоту и удобство HTML.

Завершение эпохи совершенствования HTML не означает отказ разработчиков от использования этого языка. HTML продолжает свою жизнь и в качестве подмножества XHTML, и в “чистом” виде — как простой инструмент разработки сайтов.

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

Язык CSS по-прежнему решает задачу представления информации на устройствах вывода, как в паре с HTML, так и в паре с XHTML.

Какой язык гипертекстовой разметки выбрать

Есть два способа движения вперед: переходная совместимость, при которой используется сочетание традиционных и основанных на стандартах техник, и строгая совместимость, основанная на полном (или почти полном) разделении структуры, оформления и поведения.

Джеффри Зельдман “Web-дизайн по стандартам”

К сожалению, строгая совместимость сегодня невозможна, ибо браузеры не поддерживают стандарт CSS на 100%, и, например, в ряде случаев невозможно заменить привычную визуальную разметку при помощи таблиц блочной разметкой CSS.

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

Такой подход имеет массу преимуществ сегодня и будет единственно возможным завтра.

Визуальная разметка должна выделяться в отдельный файл с описанием стилей, а содержание, несущее на себе теги структурной разметки, должно покоиться в гипертекстовом файле.

Возникает вопрос: на каком языке лучше выполнять разметку структуры? Подходит ли для этого HTML, или нужно использовать XHTML, а может быть, XML?

Ведь универсальный язык XML завоевывает мир!

Возможность форматирования, распознавания и обмена данными сделала XML таким же популярным и вездесущим, как Coca-Cola в своей отрасли. XML применяется не только в Интернете или корпоративных базах данных, например, FileMaker Pro, а также для других программных продуктов, таких, как Microsoft Office и OpenOffice. Многие конфигурационные файлы этих программ представляют собой XML-файлы.

...

Когда вы делаете снимок цифровой фотокамерой и она сохраняет такие параметры, как дата, информация о цветах и его разрешение, скорее всего для этого используется XML.

Джеффри Зельдман “Web-дизайн по стандартам”

Но использовать “чистый” XML для разметки страниц сайта — легкое безумие. В этом языке нет ни одного тега, ни одного атрибута. Сначала мы должны создать (описать) эти теги и атрибуты, а уж потом выполнять разметку своих страниц.

К счастью, это (описание нужных для web-разметки тегов и атрибутов) уже сделали за нас. Этот язык, сконструированный на XML, уже существует и называется XHTML.

Итак, современным языком структурной разметки является XHTML.

Значит, усилия, потраченные на изучение HTML, пропали зря? Теперь придется изучать новый язык?

Это не так.

Согласно W3C, XHTML является (www.w3.org/TR/xhtml1) переформулировкой HTML в XML. Более простыми словами, XHTML является языком разметки на базе XML, который работает и выглядит так же, как и HTML, за исключением некоторых небольших, но существенных различий.

...

Для дизайнеров и разработчиков XHTML почти не отличим от HTML, за исключением более строгих правил и нескольких новых элементов.

Джеффри Зельдман “Web-дизайн по стандартам”

Отметим синтаксические особенности языка XHTML.

Названия тегов и атрибутов нужно записывать в нижнем регистре.
Значения атрибутов в обязательном порядке заключаются в кавычки.
Все атрибуты должны иметь значения
(<hr noshade="noshade">).
Каждый элемент должен заканчиваться закрывающим тегом.
Одиночные теги (вроде img) тоже необходимо закрывать с помощью прямого слэша в конце тега
(<img scr="pic.gif" />).
Нельзя использовать двойной дефис внутри комментария (так нельзя: <!------>, а так можно:
<!-- — - -->).

И это практически все. Очень легко преобразовать HTML-код в код на XHTML, причем совсем не обязательно делать это вручную. В сети можно найти много программ (например, бесплатная HTML Tidy http://www.w3.org/People/Raggett/tidy), которые выполнят это автоматически.

Значит... Берем свой ужасный HTML-код, напускаем на него автоматический преобразователь и... Получаем прекрасный структурированный код на XHTML, в соответствии со стандартами W3C?

Конечно, нет. Что имели, то и получили. Плохой код на входе — плохой код на выходе.

Но если на входе был хороший код HTML, на выходе будет получен хороший код XHTML.

Так какой язык выбрать — XHTML или HTML 4.1? Сегодня разницы практически нет. Но HTML замер на цифре 4 и больше развиваться не будет, а XHTML в начале пути.

Что выбрать, решение за вами.

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

Напоследок приведу еще одну цитату из Джеффри Зельдмана.

Соблюдение web-стандартов проявляется не только в используемых нами технологиях, но и в том, каким образом мы их используем. XHTML и CSS не делают автоматически наши сайты более доступными, совместимыми или компактными. XHTML или CSS важно использовать правильно. Некорректный XHTML-код производит трафика не меньше, чем такой же HTML-код. Громоздкий, чрезмерно нагруженный CSS не станет правильной заменой разметки таблицами HTML, это всего лишь замена одной плохой вещи на другую.

Джеффри Зельдман “Web-дизайн по стандартам”

В следующей заметке мы приступим к практической работе по созданию страниц по стандартам, постоянно помня о двух самых важных вещах:

Язык HTML (или XHTML) служит для разметки структуры содержания, а не для оформления внешнего вида элементов на экране.
Язык CSS используется для задания внешнего вида структурных элементов HTML на экране компьютера или для задания способа отображения этих элементов на других устройствах вывода.