Блочная верстка. Введение.

Формирование развивающейся сферы веб-технологий, внесшее в последние годы значительные изменения в идеологию веб-строительства, все чаще заставляет веб-разработчиков изменить подход к веб-строительству и задуматься о следовании при верстке веб-страниц неким определенным концепциям, заложенным в рекомендациях консорциума W3C. Рекомендации возникли, конечно же, не на пустом месте. Они строились на проверенных временем технологиях, одновременно привнося что-то новое, удаляя при этом излишние устаревшие элементы. Многие рекомендации способствовали появлению разнообразных технологических средств получения и «отображения» информации из сети Интернет. Примером этого могут служить коммуникаторы и внедренная в мобильные телефоны возможность доступа в Сеть. Также не стоит забывать о поисковых машинах, анализирующих контент сайтов для выдачи релевантной информации в ответ на поисковые запросы. Чем менее замусоренную семантически несвязанными элементами страницу они получат, тем точнее поисковый робот сможет определить тематику и содержание данной страницы, следовательно, эта страница будет находиться выше в результатах выдачи.

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

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

• Тэг – элемент разметки страницы, конструкция языка HTML заключенная в угловые скобки. Его можно сравнить с деталью из детского конструктора – у него есть свое название и предназначение: кирпичик – предназначен для постройки стены, колесо – должно быть использовано при построении транспортного средства, и его никак нельзя использовать вместо кирпичика.
• Документ – под этим термином давайте договоримся понимать непосредственно содержание и элементы разметки страницы, без CSS и JavaScript.
• Страница – это то, что увидит пользователь в своем браузере, после применения к документу стилей и JavaScript.
• Сайт – совокупность страниц.

Стоит отметить, что термин «семантическая верстка» веб-мастера понимают по-разному. Многие под этим термином понимают технику блочной, валидной или CSS-верстки. Если вы к ним относитесь, могу вас огорчить – это в корне неверно: можно сверстать прекрасную валидную страницу с использованием CSS и без использования таблиц, но эта верстка семантической не будет. Семантическая верстка подразумевает под собой верстку, основанную на принципе грамотного выбора элементов языка разметки HTML (XHTML) для описания структуры документа, исходя из их логического и смыслового предназначения, а также на принципе отделения документа от описания корректно названных стилей средствами CSS. Естественно семантическая верстка должна быть валидной.

Метод CSS-верстки основан на отделении содержания страницы от описания стилей ее элементов.

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

С развитием веб-технологий, браузеров и утверждением стандартов, а в частности с внедрением CSS, на замену технике табличной верстки пришла более современная и семантически правильная блочная верстка. Эту верстку также иногда называю версткой слоями и "div'ной" версткой. В основе блочной верстки лежит метод формирования макета страницы из блочных элементов, форма, позиция и стиль которых определяются средствами CSS. Основным преимуществом данной техники является легкость полученного в итоге документа. При применении соответствующих стилей, валидную страницу, сверстанную путем использования техники блочной верстки, можно просмотреть на любом устройстве, начиная от компьютеров с различными браузерами и заканчивая самыми обычными мобильными телефонами.

Для каждого типа устройств возможно определение индивидуального стиля веб-страницы. Для этого используется тег meta с заданным определенным образом набором его атрибутов. Кроме того, браузеры по умолчанию отображают страницы в так называемом режиме совместимости (quirks mode), стандарты которого у различных браузеров могут очень сильно различаться. Таким образом, при верстке веб-страницы необходимо указать, каких именно стандартов мы придерживаемся. Специально для этого случая консорциумом W3C было предложено использование определения типа документа – DTD. Если страница содержит элемент, указывающий на файл DTD, то браузер обязан отобразить страницу в соответствии со схемой стандарта, описанной в этом DTD.

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

• XHTML 1.0 Strict. В соответствии с определенным в нем стандартом, содержание документа должно быть полностью отделено от оформления.
• XHTML 1.0 Transitional. Обеспечивает некоторую совместимость с HTML 3.2, и позволяет пользоваться инлайн-фреймами.
• XHTML 1.0 Frameset. Используется при необходимости разделения окна браузера на несколько фреймов.
• XHTML 1.1 Basic. Описывает специальную облегчённую версию XHTML, обеспечивая совместимость с мобильными устройствами.

Подводя итог всего вышесказанного, отмечу, что наиболее современной и верной с точки зрения семантического подхода к верстке, является техника блочной верстки. Её объединение с техниками CSS-верстки и семантической верстки существенно влияет на легкость и удобочитаемость документа. Также, очень важной деталью, влияющей на правильное отображения веб-страницы, является указание её соответствия какому-либо стандарту. Применение всех этих методик в 98% случаев обеспечит правильное отображение сверстанной страницы в любых браузерах, оставшиеся 2% лежат на совести разработчиков браузеров, но они также решаемы путем использования некоторых хитростей веб-верстки.