HTML / 4. Текст

Теги логической разметки

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

Тег
Впервые появившись в HTML 4.0, тег («аббревиатура») указывает, что заключенный в нем текст является сокращенной формой более длинного слова или фразы. Броузер может использовать эту информацию для выбора способа отображения заключенного в нем содержимого. Заметьте, мы сказали: «может». Не все популярные бро-узеры реагируют сейчас на текст, заключенный в тег , и мы не можем предсказать, как они будут его обрабатывать в будущем.

Тег
Тег означает, что заключенный в нем текст является акронимом – сокращением, составленным из первых букв каждого слова какого-то названия или фразы, например HTML или IBM. Как и в случае с тегом , не все броузеры соответствующим образом отобразят текст в теге логической разметки .

Тег <cite>
Тег <cite>, как правило, означает, что заключенный в нем текст является библиографической ссылкой, в частности названием книги или журнала. Традиционно текст ссылки отображается курсивом. Вот как Internet Explorer показывает следующий исходный текст:

While kumquats are not mentioned in Melville's
<cite>Moby Dick</cite>, it is nonetheless apparent
that the mighty cetacean represents the bitter
"kumquat-ness" within every man. Indeed, when Ahab
spears the beast, its flesh is tough, much like the noble fruit.

Используйте тег <cite> для выделения ссылок на другие документы, особенно представленные в традиционной форме, например книги, журналы, журнальные статьи. Если существует доступная в сети версия работы, на которую вы ссылаетесь, то следует также заключить ссылку в тег и сделать ее гиперссылкой на онлайновую версию.
Кроме того, тег <cite> обладает скрытой возможностью: он позволяет автоматически выделять библиографию из документов. Легко вообразить броузер, который автоматически создает таблицу ссылок, отображая их в сносках или в виде отдельного материала. Семантика тега <cite> идет гораздо дальше простого изменения внешнего вида охватываемого текста, она позволяет броузеру представить содержимое тега множеством полезных способов.

Тег <code>
Программисты привыкли к особому стилю представления своих исходных кодов. Тег <code> создан для них. Он возвращает заключенный в нем текст моноширинным шрифтом (как в пишущей машинке или телетайпе), таким как Courier, знакомым большинству программистов и читателей книжных серий издательства O’Reilly, включающих и эту книгу.
Следующий отрывок текста в теге <code> отображается моноширинным шрифтом в результате работы Firefox, (эффект, скажем прямо, не потрясает):

The array reference <code>a[i]</code> is identical to
the pointer reference <code>*(a+i)</code>.

Тег <code> следует применять только для текста, который представляет исходный код программы или другое содержимое, предназначенное для машинного чтения. Обычно, когда тег <code> просто делает текст моноширинным, подразумевается, что это исходный код программы, и будущие броузеры сумеют добавить новые эффекты при его отображении. К примеру, броузер программиста может искать сегменты в тегах <code> и производить какое-то дополнительное форматирование текста, типа специального выделения отступами циклов и условных предложений. Если единственный эффект, которого вы добиваетесь, состоит в выводе текста моноширинным шрифтом, используйте тег <tt>. Если же вы хотите представить код программы в виде четко отформатированного моноширинного текста, пользуйтесь тегом <pre>. [тег <tt>, 4.5.10] [тег <pre>, 4.6.5]

Тег <dfn>
Употребляйте тег <dfn> для выделения впервые появившихся в тексте специальных терминов. Популярные броузеры обычно выводят текст тега <dfn> курсивом. Впоследствии <dfn> поможет вам при составлении индекса или словаря. К примеру, используйте тег <dfn>, чтобы познакомить читателя с новым термином:Согласно результатам многолетних наблюдений, <dfn>спектроскопия кожуры</dfn> может оказаться весьма полезной. Сравнение с ее помощью относительных уровней содержания насыщенных гидрокарбонатов в плодах, снятых с соседних деревьев, выявило, что спектроскопия кожуры оказалась эффективной в 87% случаев для предупреждения водянки ствола у четырехлетних деревьев.

Заметьте, что мы выделили только первое вхождение «спектроскопии кожуры» в тексте примера. Чувство стиля советует нам не засорять текст излишней пестротой. Подобно другим тегам логической и физической разметки, здесь справедливо правило: чем меньше, тем лучше.1 Как это принято, особенно в технической документации, выделяйте новые термины, когда они впервые вводятся, чтобы помочь читателю лучше понять обсуждаемый вопрос, но воздержитесь от выделения этого термина в дальнейшем.

Тег <em>
Тег <em> сообщает броузеру, что его содержимое должно быть отображено с визуальным выделением. Почти для всех броузеров это означает, что текст будет выведен курсивом. К примеру, популярные броузеры выделят курсивом слова «всегда» и «никогда» в следующем исходном HTML/XHTML-тексте:

Те, кто выращивают кумкваты, должны <em>всегда</em> называть их не иначе как "благородный фрукт", но <em>никогда</em> – просто "фрукт."

Расстановка логических ударений в тексте – совсем непростое занятие. Слишком мало – и важная фраза может потеряться. Слишком много – и пропадет эффект, к которому вы стремитесь. Как любую приправу, тег <em> лучше употреблять скупо. Хотя он и отображается всегда курсивом, тег <em> намекает на многое, и броузеры завтрашнего дня, возможно, научатся воспроизводить его с разными спецэффектами. Тег <i> прямо требует выделить текст курсивом; применяйте его, если вам нужен именно курсив. В качестве альтернативы вы можете включить в документ каскадные определения стилей. [тег <i>, 4.5.4]

Кроме постановки логического ударения подумайте о возможности использования <em> при введении нового термина или постоянного стиля, ссылающегося на определенный круг объектов или понятий. К примеру, один из стилей в книгах O’Reilly предназначен для обозначения имен файлов и устройств. Тег <em> можно применять (в отличие от простого курсива) для акцентирования внимания на терминах.

Тег <kbd>
Если говорить о специальных стилях, предназначенных для технических понятий, то следует упомянуть тег <kbd>. Как вы уже, наверное, догадались, он используется для обозначения текста, который набирается на клавиатуре. Заключенный в этом теге текст обычно отображается моноширинным шрифтом.

Тег <kbd> чаще всего используется в компьютерной документации и руководствах так, как в следующем примере:

Введите <kbd>quit</kbd> для завершения программы или введите<kbd>menu</kbd>
для возвращения к главному меню.

Тег <samp>
Тег <samp> означает последовательность символов, которая не должна иметь для пользователя никакого другого смысла, кроме буквального.

Этот тег чаще всего применяется, когда последовательность символов вырвана из обычного контекста. К примеру, следующий исходный текст:

The <samp>ae</samp> character sequence may be converted to the æ ligature if desired.

Принятое в HTML указание на лигатуру «ae» – это æ, и большинством броузеров она правильно отображается символом "?". За дополнительной информацией обратитесь к приложению F.

Тег <samp> не очень часто используется. Его следует употреблять в тех немногих случаях, когда нужно особо выделить короткую последовательность символов, выхваченную из обычного контекста.

Тег
Подобно тегу <em>, тег используется для более выраженного логического подчеркивания текста. Броузеры обычно отображают теги и <em> различным образом, выводя, как правило, текст в полужирным шрифтом (в отличие от курсива), так что пользователи могут их различать. К примеру, в следующем тексте под-черкнутое с помощью <em> «never» выводится в броузере Opera курсивом, тогда как выделенное тегом слово «forbidden» отображается жирными буквами:

One should <em>never</em> make a disparaging remark about the noble fruit. In particular, mentioning kumquats in conjunction with vulgar phrases is expressly forbidden by the Association bylaws.

Если здравый смысл подсказывает, что тег <em> должен употребляться скупо, то тег должен появляться в тексте еще реже. Текст в <em> похож на возглас. Текст в – это вопль. Подобно тому как ярко звучит хорошо подобранный эпитет в устах обычно молчаливого человека, употребленный по особенному случаю, будет заме-
чен и оценен.

Тег <var>
Тег <var> – это тоже штучка из компьютерной документации. Он обозначает или имя переменной, или данные, вводимые пользователем.

Этот тег часто используется в соединении с тегами <pre> и <code> для отображения отдельных частей программного кода и тому подобного.

Текст в теге <var> обычно выводится курсивом, который представляет вывод для следующего примера:

The user should type <pre> cp <var>source-file</var> <var>dest-file</var>

</pre> replacing the <var>source-file</var> with the name of the source file, and <var>dest-file</var> with the name of the destination file.

Подобно другим тегам, связанным с программированием и компьютерной документацией, тег <var> не только облегчает пользователям просмотр и усвоение документа, но позволяет автоматизированным системам употреблять подходящим образом размеченный текст для извлечения из него информации. Скажем еще раз: чем больше разнообразной семантической информации вы сообщите броузеру, тем лучше он сможет представить ее пользователю.

Атрибуты class, id, style и title
Хотя каждый тег логической разметки имеет свой стиль при выводе, вы можете отменить эти установки и присвоить тегам новый образ. Этот новый внешний вид может быть применен к тегам логических стилей при помощи атрибута style или атрибута class. [встроенные стили: атрибут style, 8.1.1] [стилевые классы, 8.3]

Вы можете также присвоить каждому тегу логической разметки свой уникальный идентификатор, задаваемый атрибутом id, как и менее строгое название (title), используя соответствующие атрибуты и их значения в виде заключенных в кавычки строк. [атрибут id, 4.1.1.4] [атрибут title, 4.1.1.5]

Атрибуты dir и lang
Атрибут dir советует броузеру, в каком направлении следует выводить текст в теге логической разметки, а атрибут lang позволяет определить язык, который употребляется в теге. [атрибут dir, 3.6.1.1] [атрибут lang,3.6.1.2]

Атрибуты событий
Как внутри тега логической разметки, так и вне его происходят события, и с помощью соответствующих on-атрибутов и их значений вы можете реагировать на эти события, отображая окно диалога с пользователем или активизируя какое-нибудь мультимедийное событие. [обработчики событий JavaScript, 12.3.3]

Сводка тегов логических стилей
Различные графические броузеры выводят содержимое тегов логических стилей похожим образом. Чисто текстовые броузеры, такие как Lynx, отображают все теги одинаково. В табл. 4.1 представлены физические стили, используемые различными броузерами для отображения тегов логической разметки.

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

Допустимое употребление
Любой тег логической разметки может быть использован в любом месте, где применяются элементы, относящиеся к тексту. На практике это означает, что вы вправе употреблять <em>, <code> и им подобные теги везде, за исключением сегментов, выделенных тегами <title>, <listing>, <xmp>. Применение символических тегов в заголовках допустимо, но их влияние может быть перекрыто действием самого заголовка.

Комбинирование логических стилей
Иногда бывает, что вы комбинируете два или большее число логических стилей, чтобы создать интересный и, кажется, даже полезный гибрид. Так, например, логически подчеркнутая ссылка может быть получена следующим образом:

<cite><em>Moby Dick</em></cite>

На практике, многоуважаемый доктор Франкенштейн, броузер обычно проигнорирует вашего монстра. Как нетрудно убедиться, набрав и протестировав приведенный пример, Моби Дик будет цитатой без всякого подчеркивания.Стандарты HTML и XHTML не требуют от броузера поддержки всех возможных комбинаций логических стилей и не определяют, как он должен обращаться с такими комбинациями. Может быть, когда-нибудь… Пока же лучше выбрать один тег.

Теги физической разметки
Есть девять физических стилей текста, предлагаемых действующими стандартами HTML и XHTML. Это полужирный, курсив, моноширинный, подчеркнутый, зачеркнутый, увеличенный, уменьшенный, верхний и нижний индексы.

К нашему облегчению, Internet Explorer перестал поддерживать десятый физический стиль, «мерцающий» текст. Надеемся, остальные последуют его примеру. Все теги физической разметки требуют закрывающего тега.

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

Тег
Тег – это физический эквивалент тега логической разметки , но без дополнительных смыслов, связанных с последним. Он явным образом требует отображения полужирным шрифтом символа или текста, заключенного между ним и его закрывающим тегом . Если полужирный шрифт оказывается недоступным, броузер может использовать другое его представление, такое как подчеркивание или инверсная печать «белым по черному».

Тег
Тег позволяет легко увеличить размер текста. Нет ничего проще: броузер возвращает фрагмент, заключенный между тегом и соответствующим ему закрывающим тегом , используя шрифт, размер которого имеет номер на единицу больше, чем у окружающего текста. На текст наибольшего размера тег действия не оказывает. [<font>, 4.10.3]

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

Тег (нежелателен)
Текст, содержащийся между тегом и его закрывающим тегом , мерцает. Firefox, например, просто раз за разом меняет местами цвет шрифта и цвет фона для заключенного в теге текста. Ни HTML, ни XHTML не включают в себя . Первоначально он поддерживался в качестве расширения только в версиях Netscape Navigator до шестой. В версии 6 от него отказались, но потом он был восстановлен в версии 7 и последующих. Opera and Firefox тоже поддерживают его, и только Internet Explorer игнорирует. Игнорируйте и вы.

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

Тег <i>
Тег <i> похож на тег логической разметки <em>. Он и его необходимый закрывающий тег </i> предлагают броузеру отобразить заключенный между ними текст курсивом или наклонным шрифтом. Если этот шрифт недоступен, может быть применено выделение яркостью, обращение цвета или подчеркивание.

Тег <s> (нежелателен)
Тег <s> – это сокращенная форма тега <strike>, поддерживаемая всеми современными броузерами, несмотря даже на то, что она объявлена устаревшей в HTML 4 и XHTML. Не пользуйтесь тегом <s>. Рано или поздно он уйдет.

Тег <small>
Тег <small> действует точно так же, как противоположный ему тег (см. [тег , 4.5.2]), за исключением того, что он уменьшает текст, а не увеличивает его. Если окружающий текст уже имеет наименьший допускаемый моделью шрифта размер, тег <small> не оказывает никакого действия.

Как и в случае тега , можно применять несколько вложенных тегов <small> для кратного уменьшения текста. Каждый следующий тег <small> уменьшает размер текста вплоть до достижения предельно малого размера.

Тег <strike> (нежелателен)
Большинство броузеров выводят текст, заключенный между тегом <strike> и его закрывающим тегом </strike>, с добавлением горизонтальной линии, проходящей сквозь буквы (зачеркивают текст). Подразумевается, что это редакционная пометка, предлагающая читателю игнорировать вычеркнутый текст, как напоминание о временах, предшествовавших изобретению коррекционной ленты. Редко где вы встретите
этот тег сегодня: он признан нежелательным в HTML 4 и XHTML, как раз на расстоянии одного шага до полного исключения из стандарта.

Тег <sub>
Текст, содержащийся между тегом <sub> и его закрывающим тегом </sub>, отображается тем же типом и обычно немного меньшим размером шрифта, чем у окружающего потока. При этом он расположен ниже уровня строки на половину высоты текущего символа. Тег <sub>
и ему противоположный <sup> применяются в математических выражениях, научных обозначениях и в химических формулах.

Тег <sup>
Теги <sup> и его закрывающий </sup> создают верхний индекс из содержащегося между ними текста. Он отображается тем же типом и обычно немного меньшим размером шрифта, чем у окружающего потока.

При этом он расположен выше уровня строки на половину высоты текущего символа. Этот тег удобен при добавлении сносок и показателей степени. Комбинируя его с тегом
, можно создать красивую сноску, снабженную гиперссылкой:

Личинка кумкватового долгоносика
><sup><small>74</small></sup> – это

В этом примере подразумевается, что все ссылки хранятся в файле footnotes.html, подходящим образом разграниченные и пронумерованные.

Тег <tt>
Подобно тегу <code> и <kbd>, тег <tt> предлагает броузеру отобразить моноширинным шрифтом текст, заключенный между ним и его обязательным закрывающим тегом </tt>. Для тех броузеров, что уже используют моноширинный шрифт, этот тег может не оказать никакого выделяющего действия на представление текста.

Тег <u> (нежелателен)
Этот тег говорит броузеру, чтобы тот подчеркнул текст, содержащийся между <u> и </u>. Подчеркивание состоит в том, что под текстом, включая пробелы между словами и знаки препинания, проводится сплошная черта. Этот тег признан нежелательным в HTML 4 и XHTML, но популярные броузеры поддерживают его.

Атрибуты dir и lang
Атрибут dir советует броузеру, в каком направлении следует выводить текст в теге физического стиля, а атрибут lang позволяет определить язык, который будет в нем употребляться. [атрибут dir, 3.6.1.1] [атрибут lang, 3.6.1.2]

Атрибуты class, id, style и title
Хотя каждый тег физической разметки имеет свой стиль при выводе, эти установки можно отменить и присвоить тегам новый образ. Этот новый внешний вид может быть применен к тегам физических стилей при помощи атрибута style или атрибута class. [встроенные стили: атрибут style, 8.1.1] [стилевые классы, 8.3]

Можно также присвоить каждому тегу физической разметки свой уникальный идентификатор (id), как и менее строгое название (title), используя соответствующие атрибуты и их значения в виде заключенных в кавычки строк. [атрибут id, 4.1.1.4] [атрибут title, 4.1.1.5]

Атрибуты событий
Как и в случае тегов логической разметки, инициированные пользователем события с мышью и клавиатурой могут происходить как внутри тега физической разметки, так и вокруг него. Большинство подобных событий распознаются броузерами, отвечающими действующим стандартам, и с помощью соответствующих on-атрибутов и их значений вы
можете реагировать на эти события, отображая окно диалога с пользователем или активизируя какое-нибудь мультимедийное событие. [обработчики событий JavaScript, 12.3.3]

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

Посмотрите, как отображает Firefox следующий пример исходного HTML-текста:

Explicitly boldfaced, <i>italicized</i>, or
<tt>teletype-style</tt> text should be used
sparingly.
Otherwise, drink <strike>lots</strike> 1x10<sup>6</sup>
drops of H<sub><small><small>2</small></small></sub>O.

Допустимое содержимое
Любой тег физической разметки может содержать любой элемент, допустимый в тексте, включая обычный текст, якоря, изображения и перевод на новую строку. Кроме того, вы вправе комбинировать теги логи ческой и физической разметки.

Допустимое употребление
Любой тег физической разметки может быть использован в любом месте, где применяются элементы, относящиеся к тексту. На практике Тег Значение Стиль отображения
Содержимое выводится полужирным шрифтом bold
Увеличенный размер шрифта bigger text
(архаизм) Поочередно меняет цвета фона и текста blinking text
<i> Содержимое выводится курсивом italic
<small> Уменьшенный размер шрифта smaller text
<s>, <strike>
(нежелателен)

Зачеркивает текст strike
<sub> Текст нижнего индекса subscript
<sup> Текст верхнего индекса superscript
<tt> Стиль телетайпа (консоль) monospaced
<u> (нежелателен) Подчеркивает текст underlined

Пользуйтесь тегами физической разметки осторожно это означает, что они употребляются везде, кроме сегментов, выделенных тегами <title>, <listing>, <xmp>. Применение тегов физических стилей в заголовках допустимо, но их влияние может быть перекрыто
действием самого заголовка.

Комбинирование физических стилей
Ваши эксперименты с комбинированием физических стилей будут, вероятно, более удачными, чем опыты с логическими стилями. Например, следующий текст все популярные броузеры отобразят жирным курсивом:

<i>Затем она взорвалась!</i>

На практике другие броузеры, возможно, не обратят внимания на такого рода вложенные теги. Стандарты требуют, чтобы броузер «старался» поддерживать всевозможные комбинации стилей, но не определяет, как именно следует эти комбинации обрабатывать.
Хотя большинство броузеров делает удачные попытки следовать требованию стандарта, не рассчитывайте все же, что все комбинации стилей окажутся вам доступны.

Статьи по HTML на эту тему:

Адреса
Блоки цитат
Использование расширенной HTML-модели шрифтов (нежелательно)
Кодирование специальных символов
Точные интервалы и макет

Вернуться в раздел: HTML / 4. Текст