Semantic web. Заметка о логичной и нелогичной верстке

В прошлых материалах мы рассматривали общие вопросы разработки веб-сайтов - планирование веб-сайта, анализ целей и задач, разработка информационной архитектуры веб-проекта, базовые навигационные элементы и т.д. А сейчас - тема для веб-разработчиков, дизайнеров, верстальщиков, всех, кто создает веб-страницы, веб-сайты - для себя, для пользователей, для заказчиков ли, для поисковых машин... Небольшая заметка о логичной и нелогичной верстке.

Факт: у человека есть два полушария головного мозга. Исследования ученых: левое полушарие отвечает за логику и аналоговые сигналы (знаки), правое – за образы.
Когда мы создаем веб-страницу, мы формируем информацию так, чтобы воздействовать на оба полушария, задача визуального дизайна – образами показать посетителю, пользователю этой страницы, что он здесь получит (это – использование цвета, графическое оформление, подсказывающее, как распределена информация, подсветки и подчеркивания, выделение смысловых элементов, навигационных и текстовых, "выдавить" на первый план важный навигационный элемент), а задача семантики – отдать пользователю упорядоченные данные документа.

В irc канале webmascom (интересующимся – искать на irc.ircinfo.ru) один из участников дискуссии озвучил следующую информацию: "нет большого смысла ждать от браузеров корректной реализации display: table;, поскольку нет смысла в его использовании". Имелось ввиду, что для вывода табличных данных должно использовать стандартный html-тег table, и, с другой стороны, использовать для визуального дизайна, в частности, к примеру, для злополучной 3-колоночной верстки display: table – это тот же самый возврат к табличной верстке (имитации табличной верстки), т.е. - неправильно с точки зрения семантики web, типа - "назвали таблицы дивами и радуемся".

Тогда и стал вопрос по поводу того, что же такое "семантика в web". Тем же участником дискуссии было предложено официальное такое определение: "(от греч . semantikos - обозначающий):

1. значения единиц языка.
2. То же, что семасиология, раздел языкознания, изучающий значение единиц языка, прежде всего слов.
3. Один из основных разделов семиотики."

О как! Не то, чтобы не понятно, но хотелось услышать более... близкое к css определение. Попыталась сформулировать нечто следующее (просто поток сознания):

"Я так понимаю, что если не путаться в терминах (семасиология, семиотика) - то, к примеру, если я закрою глаза и прослушаю открытую страницу, озвученная информация будет достоверной. Так? Т.е. если мне браузер говорит: Таблица, а в ней - заголовок (в th) - Прайс - то дальше будут табличные данные - название, цена... Описания стилей или назначенные id/class в этом случае браузер мне надиктовывать не будет. Вот. Т.е. если он дойдет до дива, в котором назначен display:table, он прочтет только содержимое этого дива, но диктовать мне табличную структуру не будет, так? Тогда где нарушение семантики?"

Что же касается злополучного вопроса о трехколоночном футере, стабильном и кроссбраузерном, без использования display: table; - было предложено использовать метод "отрицательных полей" (по статье на вебмасконе http://webmascon.com/topics/coding/43a.asp). Однако. Отрицательные поля - такой же обман браузера, как и в случае использования стилевых свойств типа display:table! Поэтому - выбор между двумя нарушениями логики - типа по вкусу как мне кажется.

В рамках семантических реализаций был супер главным оператором канала озвучен вывод урока: "сегодняшний урок: не важно, что мы там напишем в CSS, главное, чтоб ul был списком" (в первоначальной реализации звучало так: "сегодняшний урок: не важно, что мы там напишем в CSS, главное, чтоб ul выглядел как список", что не соответствует тем требованиям, которые предъявляются к семантической разметке – она не должна выглядеть, она должна быть – ее можно озвучить словом, словами).

Semantic Web - это вообще интереснейший проект, продвигаемый директором w3c.org, одним из основателей Web, и более внятно и подробно (определение, цели и задачи, плюсы и минусы) лучше прочесть на официальном портале семантической паутины на сайте консорциума или же в русскоязычной википедии. Однако великое и прекрасное будущее сети, видимо, еще достаточно далеко от нынешних разработчиков. Давайте немного поговорим об основах - стандартном html.

По определению HTML — Hypertext Markup Language (Язык Разметки Гипертекста) - это язык, предназначенный для описания форматирования текста, задания ссылок и других элементов веб-страниц. В нём используются стан­дар­ти­зи­ро­ван­ные "тэги", такие как и , смысл и способ интерпретации которых задан универсально WWW-Консорциумом. К сожалению, современные разработчики, зачастую, не стремятся к изучению и соблюдению стандартов (не забывая при этом обижаться и злобить на разработчиков браузеров, которые так же не в полной мере те же стандарты блюдут, что, мол, "кривой браузер неверно отображает мою страницу", и старая больная тема - сделать кроссбраузерный, не разваливающийся и не расползающийся сайт). Более того, некоторые, довольно матерые интернетчики демонстративно игнорируют осовные требования к разметке страницы, намеренно рекомендуя новичкам "не возиться" с правильным, но трудно форматируемым документом, "не морочиться" с изучением документации, а сделать "как все" - поскольку главное - чтобы документ отображался в сегодняшних браузерах прилично, а начинающий дизайнер при этом - не переутомился, побыстрее сдал проект и забыл как о заказчике сайта, так и о его пользователях.

Совсем уже живой пример: на форуме в разделе, где обсуждаются дизайнерские проекты и проблемы по разработке, один из участников попросил помочь решить проблему: одна из картинок отображалась неправильно, а вернее, не так, как требовалось по замыслу дизайнера, причем не во всех браузерах, а только лишь в Мозилле (в ИЕ - ок).

Код был примерно следующим: в блоке (div с длинным и сложным описанием стиля) располагался тег параграфа P, внутри которого - картинка, т.е. примерно следующее:

(div id="Layer8" style="position:absolute; left:161px; top:-410px; width:141px; height:598px; z-index:1;")
(p align="left")(img src="/images/shvarz.jpg" width="138" height="600")(/p)
(/div)
замените "(" на "<" и наоборот

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

Однако что говорит консорциум о правильном использовании тега параграфа?

P - это строчный (inline) элемент. Элемент P представляет параграф. Он не может содержать элементы уровня блока (включая сам P). в рамках стандарта допустимо заключать картинку в тег абзаца (поскольку она не является блочным элементом, а определена как empty - т.е. пустой объект, до тех пор, пока этому объекту не заданы дополнительные атрибуты и значения), картинку вообще можно ставить куда угодно :), однако вовсе не обязательно заключать ее в тег параграфа; при этом простое решение для конкретного вопроса - убрать обрамляющий и не нужный тег параграфа и поставить перенос строки после картинки, т.е.

...
(img src="/images/shvarz.jpg" width="138" height="600")(br)
...
замените "(" на "<" и наоборот

Решение простое, и оно сработало. Однако настойчивые рекомендации других участников форума "забить на стандарты" и перейти к табличной верстке немного удивляло. А на замечание о том, что существует какая-то "логика сети", которая, вообще-то, должна соблюдаться, от весьма уважаемого участника форума (который, кстати, и порекомендовал не морочиться и перейти к традиционной табличной верстке) поступил странный ответ: "А не приходила мысль, что может быть логика эта - какая-то неправильная, раз большинство разумных, профессиональных разработчиков при создании хороших в общем-то сайтов ее нарушают?". Да почему же нарушают? Профессиональные разработчики как раз очень даже используют картинки в качестве иллюстраций к текстовому контенту, в том числе включают их в тег параграфа. А те картинки, которые не являются контентом, а представляют из себя элемент интерфейса, оформление - здесь уже другие решения используются.

И вот ведь странно... я не являюсь фанатом css и блочной верстки, и настаивать на какой-то конкретной модели не буду - да верстайте как хотите, однако странно - даже если не говорить о semantic web, зачем же рекомендовать начинающему разработчику использовать лишние теги для верстки параграфы/таблицы, усугубляя изрядным стилевым описанием, когда достаточно сделать по стандарту, (как в приведенном выше примере - добавить перенос строки после иллюстрации)? Решение, которое является избыточным, не может быть правильным.

Действительно, решение вставить картинку в тег параграфа не противоречит логике разметки, когда картинка является иллюстрацией к тексту параграфа. Однако противоречие наблюдается, когда в параграф включают картинки "элементов дизайна" интерфейса страницы. А теперь воспользуемся приведенным в начале заметки методом анализа семантической верности разметки и попробуем прочесть то самое неправильное решение :) голосовым, к примеру, браузером, для ленивых или плохо видящих, к примеру, пользователей: "а сейчас будет новый параграф текста: оп-па, картинка для оформления страницы; а сейчас - следующий параграф: оп-па, еще одна картинка для оформления страницы". И как? логично?

Статьи по теме

Для чего нужен новый язык разметки?

Когда осенью 1991 года Интернет впервые услышал позывные новой технологии, название которой легко уместилось в три буквы, почти никто не ...

2010-12-16

Языки разметки

Электронные документы в современных автоматизированных системах являются структурированными гипертекстовыми документами, оформляем�...

2010-12-16

Что такое RSS?

Как работает RSSRSS начинается с прототипа сайта, на котором размещаются какие-то сведения. Web-сайт создает для RSS механизм подачи информаци...

2010-09-23

Перекрывание селектов в IE6

Даже через абсолютно спозиционированные ДИВ-ы с максимальным zIndex-ом в ИЕ6 "проглядывают" селекты. Задача: подобрать HTML/CSS-способы перекры�...

2010-09-23

Почему редизайн сайта нужно делать с использованием CSS

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

2010-09-23

Идеология HTML

Как работают профиКак ни странно, даже у такой, казалось бы, простой вещи как HTML, есть своя идеология. HTML - это отнюдь не язык оформления до...

2010-09-23

Сайт изнутри

Всегда используйте «width» и «height» для рисунковЭто одно из главных правил обращения с рисунками. Связь по интернету мала, для того чтобы лю...

2010-09-23

Особенности ссылок «вверх страницы»

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

2010-09-21

История языка HTML

HTML является сейчас основой любой, даже самой продвинутой, технологии в Интернете. Годом рождения данного языка принято считать 1986, когд�...

2010-09-21

Как зашифровать HTML-код веб-страницы

У начинающих веб-мастеров частенько возникает желание хоть как-то защитить свою интеллектуальную собственность от посягательств други...

2010-09-21

Аккуратный HTML

Любая работа должна быть выполнена аккуратно и красиво. Особенно если ее могут увидеть много людей. А это напрямую касается разработки с...

2010-09-21

Анимационная Favicon

Создание анимационной иконки для сайта отличается от использования обычной иконки тем, что анимационная иконка обязательно должна име�...

2010-09-21

Ответы на часто задаваемые вопросы по XHTML и HTML

Зачем нужен XHTML? Не достаточно ли HTML?HTML — возможно, самый популярный в мире язык разметки документов. С появлением XML было организовано об...

2010-09-21

Черновой стайлинг

Считается, что при создании веб-приложений графическим дизайном и программированием должны заниматься разные люди. Ведь известно, что и...

2010-09-21

XHTML, говорите?

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

2010-09-21