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

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

В 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
(Язык Разметки Гипертекста) - это язык, предназначенный для описания
форматирования текста, задания ссылок и других элементов веб-страниц. В
нём используются стан­дар­ти­зи­ро­ван­ные "тэги", такие как <HEAD> и <BODY>,
смысл и способ интерпретации которых задан универсально
WWW-Консорциумом. К сожалению, современные разработчики, зачастую, не
стремятся к изучению и соблюдению стандартов (не забывая при этом
обижаться и злобить на разработчиков браузеров, которые так же не в
полной мере те же стандарты блюдут, что, мол, "кривой браузер неверно
отображает мою страницу", и старая больная тема - сделать
кроссбраузерный, не разваливающийся и не расползающийся сайт). Более
того, некоторые, довольно матерые интернетчики демонстративно
игнорируют осовные требования к разметке страницы, намеренно рекомендуя
новичкам "не возиться" с правильным, но трудно форматируемым
документом, "не морочиться" с изучением документации, а сделать "как
все" - поскольку главное - чтобы документ отображался в сегодняшних
браузерах прилично, а начинающий дизайнер при этом - не переутомился,
побыстрее сдал проект и забыл как о заказчике сайта, так и о его
пользователях.

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

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

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

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

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

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

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

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