В последнее время мне все чаще попадаются сайты, HTML-содержимое которых я бы назвал безликим. Например, встречая конструкции вида <div class=”h2”></div>, я не могу логически объяснить их появление. Чем не угодил <h2></h2> разработчику?

Да, конечно, при современном уровне развития CSS можно обойтись парочкой тегов. Можно даже устроить конкурс на самый куцый HTML — у меня вышло 10 тегов для сайта с полной функциональностью. А раз так, то потребность в них все-таки есть. И существуют спецификации, в которых они перечислены. А их осмысленное использование, как минимум, позволит старым браузерам или устройствам, не умеющим работать с CSS, подать информацию в приемлемом виде. Не многие сайты могут похвастаться версиями оформления для КПК или для людей, имеющих ограничения по здоровью.

А что же это даст разработчикам? Скорее всего, CSS-правила станут более компактными. Доступ к элементам через DOM в скриптах также упростится.

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

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

Расскажу о некоторых из них. Начнем с таблиц. Их можно разделить на два типа: макетные и таблицы с данными.

Используются для графического разнесения информационных блоков.

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 

<table width="100%" class="layout">
    <tr valign="top" class="layout">
        <td width="75%" class="layout">
            ...
        </td>
        <td width="25%" align="right" class="layout">
            ...
        </td>
    </tr>
</table>

01 
02 
03 
04 
05 
06 
07 

<table border="1" class="data">
    <tr valign="top">
        <td>
            ...
        </td>
    </tr>
</table>

В обоих вариантах нет указания атрибутов cellpadding и cellspacing, эти свойства таблицы можно задать в CSS (для версии без CSS их значения по умолчанию достаточно малы, ими можно пренебречь). Но если все же хочется их задать явно, то можно применять атрибут cellpadding, а вот отличное от нуля значение атрибута cellspacing использовать не стоит (для IE изменить его с помощью CSS не удастся).

Тем не менее, атрибуты align, valign, width и height (последние два только для макетной таблицы) рекомендуется оставить, иначе разбивка в версии без CSS может сильно отличаться от задуманной.

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

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

А как же стандарты W3C? Большинство из этих атрибутов — deprecated. Но это не значит, что они ошибочны. И я не вижу ничего криминального в их осмысленном использовании, особенно если все эти свойства будут явно заданы в CSS (причем необязательно с теми же значениями).

Навигация — это, по сути, список ссылок. Поэтому хочется использовать элемент <ul></ul>.

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 

<ul class="navigation">
    <li><a href="#">item 1</a></li>
    <li class="selected">
        <a href="#" class="selected">item 2</a>
        <ul>
            <li><a href="#">item 2 1</a></li>
            <li class="selected"><b class="selected">item 2 2</b></li>
        </ul>
    </li>
    <li><a href="#">item 3</a></li>
</ul>

Такого HTML-кода чаще всего вполне достаточно для формирования CSS-правил на любой вкус.

Правило замены текущей ссылки на <b></b> позволяет нам использовать этот элемент для оформления, а в версии сайта без CSS — выделяет его из списка ссылок.

Списки новостей или статей — те же списки. Но с одной маленькой особенностью: у элементов такого списка есть нечто общее, а именно дата. Поэтому предлагается следующая HTML-конструкция:

01 
02 
03 
04 
05 
06 
07 

<dl class="articles">
    <dt>02.10.05</dt>
    <dd>новость 3</dd>
    <dd>новость 2</dd>
    <dt>01.10.05</dt>
    <dd>новость 1</dd>
</dl>

При необходимости элементам можно добавлять классы: title, summary и т. п.

Все, что можно здесь сказать: не забывайте о наличии в HTML осмысленных текстовых блоков. Используйте их. Элемент параграфа, как минимум, компактнее элемента слоя на 4 символа ;)

И в завершении постараюсь выделить основные этапы, на которые я разбиваю верстку.

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

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 

    <head>
        <title>О компании &laquo;Компания&raquo;</title>
        <link rel="stylesheet" type="text/css" href="/global/main.css" />
        <link rel="stylesheet" type="text/css" href="/global/main-handheld.css" media="handheld" />
        <link rel="stylesheet" type="text/css" href="/global/main-print.css" media="print" />
    </head>
    <body id="home_page">
        <div id="layout">
            <div id="header">
                <b id="logo">
                    <img src="/global/logo.gif" width="100" height="50" alt="Компания" />
                </b>
            </div>
            <div id="navigation" class="navigation">
                <ul>
                    <li class="selected"><b class="selected">О&nbsp;компании</b></li>
                    <li><a href="/news/">Новости</a></li>
                    <li><a href="/search/">Поиск и&nbsp;карта сайта</a></li>
                </ul>
            </div>
            <div id="content">
                <h1>О&nbsp;компании</h1>
                <p>Это крупнейшая компания.</p>
            </div>
            <div id="footer">
                <p id="copyright">&copy;&nbsp;2006 Компания</p>
            </div>
        </div>
    </body>
</html>

Вариант с использованием таблиц:

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 

<html>
    <head>
        <title>О компании &laquo;Компания&raquo;</title>
        <link rel="stylesheet" type="text/css" href="/global/main.css" />
        <link rel="stylesheet" type="text/css" href="/global/main-handheld.css" media="handheld" />
        <link rel="stylesheet" type="text/css" href="/global/main-print.css" media="print" />
    </head>
    <body id="home_page">
        <table width="100%" id="layout" class="layout">
            <tr valign="top" id="header" class="layout">
                <td colspan="2" class="layout">
                    <b id="logo">
                        <img src="/global/logo.gif" width="100" height="50" alt="Компания" />
                    </b>
                </td>
            </tr>
            <tr valign="top" class="layout">
                <td width="30%" id="navigation" class="navigation layout">
                    <ul>
                        <li class="selected"><b class="selected">О&nbsp;компании</b></li>
                        <li><a href="/news/">Новости</a></li>
                        <li><a href="/search/">Поиск и&nbsp;карта сайта</a></li>
                    </ul>
                </td>
                <td width="70%" id="content" class="layout">
                    <h1>О&nbsp;компании</h1>
                    <p>Это крупнейшая компания.</p>
                </td>
            </tr>
            <tr valign="top" id="footer" class="layout">
                <td colspan="2" class="layout">
                    <p id="copyright">&copy;&nbsp;2006 Компания</p>
                </td>
            </tr>
        </table>
    </body>
</html>