Ряд тегов изменяют внешний вид текста и придают ему некий скрытый смысл.
В целом они могут быть разделены на две группы – теги физической и
логической разметки.
Кроме того, стандарт каскадных таблиц стилей, созданный W3C, теперь
хорошо поддерживается популярными броузерами. Он дает авторам
другой, более мощный способ управления макетом и внешним видом
документов. В этой главе будет рассмотрено управление стилями
с помощью тегов.
В заголовок можно вставить одно или несколько изображений – от маленьких
маркеров или кнопок до полноразмерных картинок. Комбинирование
продуманной системы заголовков с соответствующими пиктограммами
не только внешне привлекательно, но и может быть эффективным средством
помощи пользователям в их работе с коллекцией документов.
Вставить изображение в заголовок легко. К примеру, следующий
текст помещает пиктограмму «информация» в заголовок «For more information» («Дальнейшие справки»):
<h2>
<img src=»info.gif»>
For More Information</h2>
Вообще говоря, изображения в заголовках выглядят лучше всего, когда их
помещают в начало строки, выравнивая по нижнему краю текста или посередине.
Формально стандарты HTML и XHTML допускают вхождение заголовков
исключительно в содержимое тела документа. На практике большинство
броузеров признают заголовки почти везде, форматируя текст при выводе
в соответствии с установками текущего элемента. Во всех случаях появление
заголовка означает конец абзаца или другого текстового элемента, так что
вы не можете использовать теги заголовков, чтобы изменить высоту
нескольких символов в строке. Используйте каскадные определения стилей
для достижения таких локальных эффектов.
Заголовок может содержать любой элемент, допустимый в потоке тек
ста, включая слова и знаки препинания, гиперссылки (<a>), изображения
(<img>), теги новой строки (<br>), украшения шрифта (<b>, <i>, <tt>,
<strike>, <big>, <small>, <sup>, <sub> и <font>), а также компоненты
логической разметки (<acronym>, <cite>, <code>, <dfn>, <em>, <kbd>,
<samp>, <strong> и <var>). На практике, однако, изменения шрифта и стиля
в заголовке могут не оказывать действия, поскольку сам заголовок
предписывает броузеру изменение шрифта.
Раньше было принято ругать использование тегов заголовков для
управления размером шрифта во всем документе. Формально абзацы,
списки и другие «блочные» элементы не допускаются в заголовках
и могут быть ошибочно истолкованы броузером как обозначения их
конца. На практике большинство броузеров применяют стиль заголов
ка ко всем содержащимся в нем абзацам. Мы не одобряем такую практику,
поскольку она не только нарушает стандарты HTML и XHTML,
но как правило, безобразно выглядит. Представьте себе газету, напечатанную
одними заголовками!
Описание больших фрагментов текста в качестве заголовков противоречит
назначению этого тега. Если вам действительно нужно изменить вид
шрифта или его размер в документе, пользуйтесь стандартными каскадными определениями стилей.
Кроме того, мы настоятельно рекомендуем тщательно тестировать
свои страницы более чем на одном броузере и при нескольких различных
разрешениях. Можно ожидать, что ваш <h6> текст будет читаться
при разрешении 480×320, но пропадет при разрешении 800×600.
Большинство графических броузеров для представления заголовков
<h1>, <h2> и <h3> применяют более крупный шрифт, для заголовка
<h4> – такой же, как для отображения основного текста, и для заголовков
<h5> и <h6> – более мелкий. Авторы обычно используют последние
два размера для вывода стандартного текста, такого как уведомление
об авторских правах или отказ от ответственности. Хотя рекомендуется
применять стилевые правила, некоторые авторы употребляют мелкий
текст заголовков в оглавлении и в навигационной панели, расположенной
на главной странице сайта. Посмотрите, как типичный броузер выводит
информацию о защите авторских прав в следующем XHTML примере :
resulting in years of successful kumquat production
throughout North America.
</p>
<h6>This document copyright 2007 by the Kumquat Growers of
America. All rights reserved. </h6>
</body>
</html>
Тег <cite>, как правило, означает, что заключенный в нем текст является библиографической ссылкой, в частности названием книги или журнала.
Традиционно текст ссылки отображается курсивом.
Используйте тег <cite> для выделения ссылок на другие документы,
особенно представленные в традиционной форме, например книги,
журналы, журнальные статьи. Если существует доступная в сети версия
работы, на которую вы ссылаетесь, то следует также заключить
ссылку в тег <a> и сделать ее гиперссылкой на онлайновую версию.
Кроме того, тег <cite> обладает скрытой возможностью: он позволяет
автоматически выделять библиографию из документов. Легко вообразить
броузер, который автоматически создает таблицу ссылок, отображая их
в сносках или в виде отдельного материала. Семантика тега <cite> идет
гораздо дальше простого изменения внешнего вида охватываемого
текста, она позволяет броузеру представить содержимое тега
множеством полезных способов.
Впервые появившись в HTML 4.0, тег <abbr> («аббревиатура») указывает,
что заключенный в нем текст является сокращенной формой более длинного
слова или фразы. Броузер может использовать эту информацию для выбора
способа отображения заключенного в нем содержимого. Заметьте, мы сказали: «может». Не все популярные броузеры реагируют сейчас на текст, заключенный в тег <abbr>,
и мы не можем предсказать, как они будут его обрабатывать в будущем.
Разумно повторить название вашего документа в первом теге заголов
ка, поскольку оно не отображается в основном окне броузера, если было
определено в теге <head>.
Следующий HTML текст может служить хорошим примером пов
ния названия вашего документа в его заголовке и в теле:
<html>
<head>
<title>Выращивание кумкватов в Северной Америке</title>
</head>
<body>
<h3> Выращивание кумкватов в Северной Америке</h3>
<p>
Возможно, одним из самых привлекательных фруктов является…
В типичном случае броузер помещает текст <title> в самом верху вы
веденной страницы. Тег может использоваться для создания закладок
и включения в списки любимых страниц, отображаясь только где-то
на краю окна броузера, заголовок третьего уровня в этом примере всегда
будет появляться в самом начале документа. Он будет служить видимым
названием документа, как бы броузер ни обрабатывал содержимое
тега <title>. И, в отличие от текста в теге <title>, название в заголовке
окажется в начале первой страницы документа при его распечатке,
потому что является частью основного текста.
В нашем примере мы решили использовать заголовок третьего уровня
<h3>, который отображается обычно чуть более крупным шрифтом,
чем основной текст. Заголовки первого и второго уровня еще крупнее
и смотрятся непропорционально. Следует выбрать уровни заголовков,
представляющиеся вам уместными и привлекательными, и систематически
применять их в своих документах. Слишком большие заголовки
разрушат композицию окна; слишком мелкие визуально сольются с текстом.
Установив заголовок высшего уровня в документе, применяйте для
добавочных заголовков теги того же или более низкого уровня, обеспечивая структурированность документа и его читабельность. Если вы
выбрали третий уровень заголовка для названия документа, разбейте
текст на части с применением заголовков четвертого уровня. Если есть
необходимость в дальнейшем разбиении текста на подразделы, подумайте о том,
не использовать ли для названия документа заголовок второго уровня,
заголовок третьего уровня – для выделения разделов, а четвертого –
для подразделов.
Шесть заголовочных тегов, записываемых <h1>, <h2>, <h3>, <h4>, <h5>
и <h6>, представляют иерархию заголовков от высшего (<h1>) до нижнего
(<h6>) уровня, которая может встречаться в вашем документе.
Текст, заключенный внутри заголовка, обычно отображается специальным
образом в зависимости от технологии, доступной броузеру.
Броузер может обозначить заголовок, поместив его в центре, выделив
полужирным шрифтом и/или шрифтом большего размера, курсивом,
подчеркнув его или отобразив отличным от основного цветом. А кроме
того, пользователи в пику самым нудным авторам часто меняют способ,
которым воспроизводятся различные заголовки.
Традиционно авторы применяют заголовок <h1> для названия документа,
<h2> – для названий разделов и т. д., часто так же, как мы привыкли
оформлять работы с использованием заголовков, подзаголовков и
заголовков более низких уровней.
Наконец, не забывайте включать соответствующие закрывающие теги.
Броузер не вставит его за вас автоматически, и пропуск закрывающего
тега заголовка может повлечь за собой катастрофические последствия
для вашего документа.
К счастью, на практике большинство броузеров применяют для отобра
жения иерархии заголовков последовательно уменьшающийся размер
шрифта, так что текст в <h1> будет очень крупным, а текст в <h6> –
очень мелким.