Дата публикации статьи: 25.07.2006 15:21

Дорога к XHTML

Автор: Гайдар Магдануров

Введение

    Идея небольшого этой статьи родилась в результате работы с Web-приложениями с мобильного устройства и всех тягот, связанных с этой нелегкой деятельностью. Наверное со мной согласиться каждый, кто пробовал с помощью телефона или КПК забронировать билеты на самолет или поезд, посмотреть важную информацию на каком-либо Web-ресурсе или на сайте компании посмотреть ее адрес и схему проезда. Дизайнерские изыски, которые так привлекательно и вкусно смотрятся даже на 15-дюймовом экране, на небольшом экранчике мобильного устройства превращаются в ужасных монстров, которые стремятся как можно дальше отправить бегунок полосы прокрутки и спрятать такой нужный элемент управления как кнопка куда-нибудь, где его не стал бы искать даже Шерлок Холмс.
    С достаточно недавних пор разработчики Web приложений получили возможность создавать страницы, которые будут выглядеть красиво на больших экранах и сохранят свою информативность и функциональность на маленьких. Для этого достаточно не использовать атрибутов тегов HTML для оформления, а перенести установку этих свойств в таблицы стилей (CSS), при этом структурируя документ так, чтобы его структура соответствовала представлению данных, а не несла чисто оформительской нагрузки. Например, использование элементов <h1>, <h2> и т.д. для оформления текста правомерно, только если <h2>  выстраиваются в дерево подзаголовков, а не раскиданы абы как, представляя собой ссылки в меню страницы.

XML в качестве основы

    Да, именно так. На самом деле XHTML - это XML, для которого определены имеющиеся ранее HTML теги. Или же, можно считать, что это HTML документ, который оформлен по правилам XML документов. В любом случае, для того, чтобы страница прошла валидацию по стандарту XHTML необходимо, чтобы она удовлетворяла следующим условиям:

  1. Иметь обязательный заголовок DOCTYPE с указанием варианта используемого XHTML

  2. Все теги должны быть закрыты (т.е. <br> - неверно, верно- <br />)

  3. Не должны быть использованы атрибуты тегов, отвечающие за отображения

  4. Значения атрибутов должны быть помещены в двойный кавычки (<td colspan=2> - неверно, верно - <td colspan="2">)

  5. Недопустимо использование "пустых" атрибутов (т.е. <option checked> - неверное, верно - <option checked="checked">

  6. Теги не могут быть перемешаны (т.е. <b><i>Текст</b></i> - неверно, верно - <b><i>Текст</i></b>)

  7. Все имена тегов и атрибутов должны быть в нижнем регистре, поскольку в XML верхний и нижний регистры различаются (т.е. <BR /> - не верно, верно <br />).

  8. При использовании внутри встроенных CSS таблиц или вставок кода (например, на JavaScript) специальных символов вроде <, > и & необходимо заключать код в элемент <![CDATA[]]>

Разновидности XHTML

W3C определяет три разновидности XHTML:

1. Strict

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Документ должен быть оформлен в соответствии с правилами для XML, недопустимо использование "оформительских" атрибутов  и недопустимо использование фреймов.

2. Transitional

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

Документ должен быть оформлен в соответствии с правилами для XML, но допустимо использование любых атрибутов, которые были определены в HTML 4.

3. Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Документ должен быть оформлен в соответствии с правилами для XML, но допустимо использование любых атрибутов, которые были определены в HTML 4, а также допустимо использование фреймов.

    Рекомендованным при создании новых документов является Strict, правила оформления для которого описаны выше. Два других варианта были определены для уже имеющихся документов на время "переходного периода" от HTML к XHTML, поскольку очевидно, что преобразовать то огромное множество имеющихся документов к жесткому формату XHTML невозможно.

Преимущества XHTML

    Упомянув правила оформления XHTML документов и разновидности форматов можно обсудить преимущества XHTML и, заодно, вернутся к началу статьи и обсудить решение описанной во введении проблемы.
    Целесообразность использования XHTML определяют две основные причины. Первая из которых, возможность отделить данные от представления, которая так часто обсуждалась, обсуждается и будет обсуждаться Web-разработчиками. Четко структурированный документ может быть легко прочитан человеком, в отличие от документа, в котором каждый второй символ относится не к содержанию, а к оформлению. Помимо этого, изменение отображения такого документа не составляет труда - достаточно заменить таблицу стилей, чтобы преобразить документ до неузнаваемости.
    Вторая причина тесно связана с первой - поскольку представление документа определено в CSS таблице, существует возможность задать разные таблицы для разных устройств, что позволит пользователям КПК и мобильных телефонов с маленькими экранами пользоваться Web-приложением без существенных затруднений.

Давайте создадим небольшой документ в формате HTML, затем преобразуем его к формату XHTML. Ниже приведен правильный HTML документ.

Документ HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Простая HTML страница</title>
</head>
<body>
    <h1 align="center">
        Заголовок страницы</h1>
    <p align="center">
        Какой-то текст, выравненный по центру зачем-то.</p>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <td align="center">
                    <b>Колонка 1</b></td>
                <td align="center">
                    <b>Колонка 2</b></td>
            </tr>
        </thead>
        <tr>
            <td valign="top">
                <b>Текст вверху</b></td>
            <td>
                Много текста Много текста Много текста Много текста Много текста Много текста Много
                текста Много текста Много текста Много текста Много текста Много текста Много текста
                Много текста
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <b>Текст внизу</b></td>
            <td>
                Много текста Много текста Много текста Много текста Много текста Много текста Много
                текста Много текста Много текста Много текста Много текста Много текста Много текста
                Много текста
            </td>
        </tr>
    </table>
    <p align="left">
        <font color="#6633ff">Много текста Много текста Много текста Много текста Много текста
            Много текста Много текста Много текста Много текста Много текста Много текста Много
        </font>
    </p>
</body>
</html>
Документ XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Простая HTML страница</title>
    <link rel="Stylesheet" href="StyleSheet.css" type="text/css" media="screen" />
</head>
<body>
    <h1>
        Заголовок страницы</h1>
    <p class="centeredText">
        Какой-то текст, выравненный по центру зачем-то.</p>
    <table class="mainTable">
        <tr>
            <td class="headerCell">
                Колонка 1</td>
            <td class="headerCell">
                Колонка 2</td>
        </tr>
        <tr>
            <td class="cellTop">
                Текст вверху</td>
            <td>
                Много текста Много текста Много текста Много текста Много текста Много текста Много
                текста Много текста Много текста Много текста Много текста Много текста Много текста
                Много текста
            </td>
        </tr>
        <tr>
            <td class="cellBottom">
                Текст внизу</td>
            <td>
                Много текста Много текста Много текста Много текста Много текста Много текста Много
                текста Много текста Много текста Много текста Много текста Много текста Много текста
                Много текста
            </td>
        </tr>
    </table>
    <p class="redText">
        Много текста Много текста Много текста Много текста Много текста Много текста Много
        текста Много текста Много текста Много текста Много текста Много
    </p>
</body>
</html>

Как видите, в разметке XHTML документа не осталось никаких атрибутов, отвечающих за отображение. Внешний вид полностью определяется таблицей стилей.

Таблица стилей
H1
{
    text-align: center;
}

.centeredText
{
    text-align: center;
}

.mainTable
{
    width: 100%;
}

.headerCell
{
    font-weight: bold;
    text-align: center;
}

.cellTop
{
    vertical-align: top;
    font-weight: bold;
}

.cellBottom
{
    vertical-align: bottom;
    font-weight: bold;
}

.redText
{
    text-align: left;
    color: Red;
}
Насколько актуален переход на XHTML

    Переход на XHTML актуален не только для создателей Web-приложений, ориентированных на большое количество пользователей, использующих для доступа к приложению не только разные браузеры и платформы, но и разные устройства, но и для разработчиков, использующих системы генерации отчетов в HTML. Если код представления полностью вынесен в таблицу стилей, то появляется возможность создав два разных файла стилей для печати и экрана генерировать симпатичные отчеты, которые не будут "портится" при печати или, например, правильно разбиваться на страницы.
    Хорошим тоном при создании современных HTML документов является использование XHTML и таблиц стилей. Косвенным подтверждением этому может являться создаваемая по умолчанию страница HTML в Visual Studio 2005 с DOCTYPE для XHTML :).

Заключение

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