Почему дивную верстку называют семантически правильной? "Философия CSS-дизайна". HTML-код сайта www.csszengarden.com | WEB-дизай

Статьи

Об уdivительной технологии
Позаботьтесь о красоте HTML-разметки

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

О красоте HTML-разметки я задумалась, когда прочитала великолепную и роскошную книгу Дэйва Ши и Молли Е. Хольцшлаг «Философия CSS-дизайна» (Dave Shea, Molly E. Holzschlag «The Zen of CSS Design: Visual Enlightenment for the Web», буквально «Путь CSS-дизайна: Визуальное просвещение для сети»).

Книга посвящена сайту www.csszengarden.com. Создатель сайта Дейв Ши разработал очень хитрую HTML-разметку: она проста и в то же время позволяет создавать бесконечное число вариантов дизайна при помощи CSS-технологии.

Дейв Ши предложил дизайнерам использовать его HTML-разметку и создать свой уникальный дизайн. Визуальное представление сайт должен получить с помощью новых правил в CSS-файле.

Привожу 4 изумительные работы:

]]> ]]>

Сайт www.csszengarden.com показал мне, что внешняя красота рождается благодаря CSS-технологии, уникальной графике, умению работать со шрифтами и особенной HTML-разметке. 

Особенности HTML-кода www. csszengarden.com

Как просмотреть HTML-код страницы? Если вы пользуетесь браузером Internet Explorer: Вид > Просмотр HTML-кода; в браузерах Mozilla, Opera: Вид (View) > Исходный текст (Page Source).

1. В исходном коде сайта нет ни одного табличного тега (<table>, <td>, <tr>), т.е. страница структурирована без таблиц (самый распространенный вариант макетирования в Рунете). Поэтому такую верстку называют бестабличной.

2. Страница структурирована посредством блоков (<div>). Поэтому распространилось и другое название такой верстки — дивная.

3. Каждый блок имеет свое уникальное имя. Логично, что блок с шапкой страницы получил название «pageHeader» (англ. «голова страницы»), блок со ссылками — «linkList» (с англ. «список ссылок»), блок с контентом — «supportingText» — разбит в свою очередь на блоки, которые тоже имеют свои имена, хвостовик документа — «footer».

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

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

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

На этот вопрос отвечу поговоркой: «Называйте вещи своими именами».

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

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

5. Страница создана в соответствии со стандартом XHTML 1.0 Strict, о чем свидетельствует в начале документа декларация DOCTYPE.

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

Так образом, разметка сайта www. csszengarden.com не содержит оформительского кода, соответствует WEB-стандартам, по сравнению с жестким табличным структурированием она дает возможность изменить внешний вид сайта без его правки. Каждый элемент разметки имеет соответствующее по смыслу название. Любой человек с базовыми знаниями HTML может разобраться в таком коде. Именно такую разметку я и называю красивой.

Статьи
Блочная верстка сайтов
Контент для сайта
Реклама