
В первые годы своего существования сеть 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-стандартов.
Comments are closed, but trackbacks and pingbacks are open.