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

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

В 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, внутри которого — картинка, т.е. примерно следующее:

<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, зачем же рекомендовать начинающему разработчику использовать лишние теги для верстки параграфы/таблицы, усугубляя изрядным стилевым описанием, когда достаточно сделать по стандарту, (как в приведенном выше примере — добавить перенос строки после иллюстрации)? Решение, которое является избыточным, не может быть правильным.

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

Источник: internet-technologies.ru