CSS-практикум, часть 2: семантическая верстка

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

Последствия разыгравшегося кризиса, несмотря на все старания W3C, не устранены и по сей день — огромное количество разработчиков в той или иной мере подвержено влиянию традиций «старой школы», хотя, как мы говорили в предыдущей статье, реализации концепции разделения содержания и представления на уровне конечного кода веб-страниц сегодня, в 2007 году, решительно ничто не препятствует.

Однако даже формальное следование принципу разделения контента и представления и даже формальное соответствие (X)HTML- и CSS-кода букве спецификаций (т. е. валидность) не являются достаточными условиями правильно сверстанной страницы.

Посудите сами. CSS позволяет наделить любой элемент разметки любым представлением. В связи с этим решительно ничто не мешает нам сверстать сколь угодно сложную в визуальном плане страницу, ограничившись использованием в коде ее разметки одного-единственного тега. Какого именно — абсолютно все равно, ведь при помощи CSS можно любой блочный «по природе» элемент сделать внутристрочным, и наоборот; можно задать для любого элемента любые гарнитуру и кегль шрифта, любой цвет текста и фона, любой тип рамки, любое расположение и т. д.

Будет ли при этом возможно реализовать принцип разделения содержания и представления? Вполне. В разметке может не быть ни одного тега или атрибута визуального форматирования — так что формально условие соблюдено, не подкопаешься. Будут ли код разметки и CSS-код в данном случае валидными? Этому тоже нет никаких препятствий. Но будет ли сверстанная таким образом страница отвечать разрушенной во времена кризиса и восстанавливаемой ныне идеологии структурной, логической разметки, заложенной создателями Всемирной Паутины? Уже нет.

Почему? Основой означенной идеологии служит простой тезис: любой элемент разметки должен использоваться по прямому назначению, в соответствии с его смыслом (семантикой). Так, теги <h1>...<h6> предназначены для определения заголовков, и ни для каких других структурных единиц они применяться не могут; тег <p> — только для задания абзацев, тег <ul> — только для маркированных списков, тег <ol> — только для нумерованных, и т. д. Верно и обратное: если необходимо в коде страницы определить заголовок, то для этого надлежит использовать теги <h1>...<h6> (четко придерживаясь естественной иерархии заголовков) и никакие другие. Если нужно разметить абзац — значит, следует обязательно использовать тег <p>. И не что иное. Если нужен маркированный список — требуется применить тег <ul>, несмотря на то, что CSS позволяет и нумерованный список (определяемый тегом <ol>) превратить по внешнему виду в маркированный.

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

Характерный пример фрагмента HTML-разметки того времени:

<table width="600" bgcolor="#cc0000" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><table width="100%" cellspacing="1" cellpadding="20" border="0">
<tr bgcolor="#fff0cc">
<td align="justify">
<font size="+2" color="#cc0000"><b>Заголовок</b></font><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Первый абзац текста<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Второй абзац текста<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Третий абзац текста
<blockquote>Абзац примечания</blockquote>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Четвертый абзац текста
</td>
</tr>
</table></td>
</tr>
</table>

Здесь совершенно не по делу используются таблицы, причем одна из них вложена в другую для достижения определенного визуального эффекта. Заголовок статьи выделяется исключительно визуальными средствами, но никак не определяется логически. Абзацы текста отделяются друг от друга тегом <br>, поскольку элемент <p> имеет вертикальные отступы, величину которых без помощи CSS нельзя контролировать. (И это еще сравнительно безобидно; встречалась и откровенная клиника вроде <br><font size="-3"> </font><br> — так разработчики пытались контролировать величину абзацного отступа.) Текст каждого абзаца предваряется пятью неразрывными пробелами (&nbsp;) — тем самым имитируются горизонтальные отступы для «красной строки». Элемент <blockquote>, предназначенный для выделения цитат, применен исключительно в визуальных целях для придания горизонтального отступа тексту.

Сегодня фрагмент кода разметки, отображение которого может выглядеть в браузере точно так же, как и приведенного выше, может быть гораздо более стройным:

<div id="main">
<h1>Заголовок</h1>
<p>Первый абзац текста</p>
<p>Второй абзац текста</p>
<p>Третий абзац текста</p>
<p class="notice">Абзац примечания</p>
<p>Четвертый абзац текста</p>
</div>

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

И все же, определенные ограничения, препятствующие торжеству идеалов семантической верстки, существуют и сегодня. Хотя они, конечно, намного менее выражены, чем 10 лет тому назад.

Эти ограничения касаются, прежде всего, средств организации пространства страницы. К сожалению, многие сложные макеты до сих пор невозможно сверстать без использования таблиц не по прямому их назначению. А в тех случаях, где от таблиц удается отказаться, нередко приходится использовать вложенные элементы <div> — исключительно для того, чтобы обеспечить тот или иной визуальный эффект или преодолеть определенные несовместимости браузеров, что, разумеется, противоречит соображениям семантики.

Так или иначе, современные технологии позволяют без особого напряжения создавать на несколько порядков более красивый и логически стройный код, чем мы могли себе позволить в середине 1990-х. И это не блажь, от этого выигрывают решительно все. Мы уже обсуждали преимущества верстки в духе современных рекомендаций W3C — уменьшается объем разметки, страницы становится проще обрабатывать автоматическими средствами, они больше нравятся поисковым машинам, увеличивается их доступность для различных категорий пользователей и т. д., и т. п.
В заключение — еще один момент. Являются ли характеристики «семантическая верстка» и «бестабличная верстка» синонимами?

Нет. Во-первых, термин «бестабличная верстка» вообще нельзя счесть корректным. Таблицы сами по себе не противоречат ни здравому смыслу, ни рекомендациям W3C, если они используются по назначению, то есть для структурирования данных, организованных соответствующим образом — прайс-листов, разнообразных ведомостей и отчетов, календарей, расписаний, специальной справочной информации и т. п. Отказываться от таблиц как таковых нет никакой необходимости. Более того, даже если табличные по своей природе данные и получится сверстать без применения тега <table>, это будет нарушением семантики.

Во-вторых, факт отказа от использования тега <table> не по прямому назначению при верстке того или иного шаблона страницы не гарантирует, что в коде этого шаблона все остальные элементы применяются по назначению. Мне известен, в частности, сайт, вся разметка страниц которого основана на тегах <ul> и <li>. (Не буду приводить ссылку, чтобы не делать создателям сего творения рекламы.) Да, там нет ни одного тега <table>, но от этого не легче — причислить означенный образец нонконформизма к примерам семантической верстки, находясь в трезвом уме, невозможно.

Артемий Ломов