Смысловая разметка

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

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

Первоначально HTML был задуман как простой, легкий для понимания язык разметки. Однако по мере того, как Web-страницы становились все более презентабельными, понять их код было все труднее. Чтобы хоть как-то совладать с этим нагромождением дескрипторов, были разработаны инструменты WYSISYG (What You See Is What You Get — что видишь, то и получишь).

К сожалению, вместо того чтобы упростить ситуацию, инструменты WYSIWYG только усугубили ее: они дополнительно добавили в код HTML огромное количество дескрипторов, понять которые стало еще труднее. На стыке тысячелетий типичная Web-страница была настолько сложной, что редактировать ее вручную было практически невозможно из-за риска разрушить код WYSIWYG. Ситуация стала невыносимой, и нужно было что-нибудь предпринять.

И тогда появились таблицы CSS. Благодаря им возникла возможность управлять внешним видом страницы, не вторгаясь в нее, и отделить презентационные аспекты документа от его содержимого. Презентационные дескрипторы, как и дескриптор шрифта, теперь можно отбросить и управлять версткой с помощью правил CSS, а не таблиц HTML. Разметка опять стала простой, а дизайнеры вновь стали интересоваться кодом документа.

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

Разметка считается “смысловой” (другое название — “семантической”), если назначение элементов на странице не противоречит их назначению в спецификациях (X)HTML. Смысловая разметка предоставляет разработчику несколько важных преимуществ. С ней намного легче работать, чем с презентационной разметкой. Предположим, например, что на странице нужно изменить цитаты.

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

Смысловая разметка облегчает не только понимание кода человеком, но и обработку документа программами и устройствами. Например, поисковые механизмы могут распознавать заголовки по дескрипторам hi и присваивать им более высокий приоритет, чем другим элементам страницы. Устройства чтения с экрана могут использовать заголовки как дополнительное средство навигации по странице.

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

Синтаксис (X)HTML содержит богатый набор смысловых элементов, например:

■ hl,h2,h3;

■ ul, ol, dl;

■ strong, em; N

■ blockquote, cite;

■ abbr, acronym, code;

■ fieldset, legend, label;

■ caption, thead, tbody, tfoot.

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

Источник: Энди Бадд, Камерон Молл, Саймон Коллизон. Мастерская CSS: профессиональное применение Web-стандартов.