Краткий курс HTML 5

6. Форматирование

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

<i> — текст, произносимый с другой интонацией или другим голосом (мысли персонажей, названия терминов, идиомы, названия судов и прочее).

<i>Как же весело</i>, подумал он.
Термин <i>релевантность</i> определен выше.

<b> — текст, выделенный в утилитарных целях, без особой важности и не требующий особой интонации (ключевые слова в аннотации, название товара в обзоре, иногда — вводное предложение в статье).

Добавить по вкусу <b>соль</b> и <b>сахар</b>.

<em> — эмфаза, эмфатическое ударение. В следующем примере сперва следует ответ на вопрос «кто?», затем «что?» и наконец восклицание:

<em>Я</em> выбрал это.
Я выбрал <em>это</em>.
<em>Я выбрал это!</em>

<strong> — важный текст, выделенный акцентом.

<strong>Внимание!</strong> Вы входите в опасную зону.

<small> — обозначает все, что принято писать уменьшенным шрифтом (юридические ограничения, авторские права, лицензионные требования и т. д.).

Номер «Люкс» <small>(завтрак включен, без НДС)</small>

Есть также:

<dfn> — термин, впервые определяемый в документе.
<code> — программный код или его фрагмент.
<samp> — результат вывода компьютерной программы или скрипта.
<kbd> — название клавиш или набираемого на клавиатуре текста.
<var> — переменная (математическая или компьютерной программы).
<cite> — цитата или сноска на другой материал.

Перечисленные выше теги являются парными и строчными. <code>, <samp> и <kbd> обычно отображаются браузерами моноширинным шрифтом, <small> — уменьшенным, <strong> и <b> — жирным начертанием, а остальные — наклонным.

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

Короткие цитаты можно выделить строчным тегом <q> (текст отобразится в двойных кавычках). Для длинных предназначен блочный элемент <blockquote>, который отображается с некоторым отступом со всех сторон. У тегов <q> и <blockquote> есть необязательный атрибут cite, значением которого обычно указывают ссылку (URL) на цитируемый источник. Большинство браузеров этот атрибут игнорируют, однако поисковые системы могут учитывать его при анализе страницы.

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

Для отображения верхних и нижних индексов используются теги <sup> и <sub> соответственно. Например, формула E1 = m1c2 выводится таким образом:

E<sub>1</sub> = m<sub>1</sub>c<sup>2</sup>

Обозначить ошибку в тексте можно тегом <del> (по умолчанию он будет перечеркнут), а вставленный текст — тегом <ins> (обозначается подчеркиванием). Несмотря на то, что это строчные теги (не разрывают строки), внутри них допускается размещение блочных элементов.

<del><p>Неверная информация</p></del>
<ins><p>Новая информация</p></ins>

Кроме того, этим тегам можно указать атрибут cite со ссылкой на документ, объясняющий причину удаления/добавления информации, а также datetime c датой редактирования в таком формате: 2010-04-28 14:47 (можно без времени).

Перечеркнуть текст можно также тегом <s>. Но в отличие от <del>, он обозначает не ошибку, а потерявшую актуальностость или устаревшую информацию. В свою очередь тег <u> подчеркивает текст, однако, в отличие от <ins>, назначение его — обратить внимание на некоторую особенность, вроде грамматической ошибки, указать на имя собственное в китайском языке и т. д.

Строчный тег <bdo> предназначен для переопределения направления вывода текста и не может применяться без атрибута dir, однако в отличие от прочих тегов с этим атрибутом, он игнорирует правила Unicode и показывает текст именно так, как вы ему скажете.

<bdo dir="rtl">дерепан модаз тскеТ</bdo>

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

<pre>
   DOS, черной пеленой
   экран заполнил чистый DOS
</pre>

Новые возможности форматирования в HTML 5

Вышеприведенные теги существовали и ранее. HTML 5 же расширяет возможности языка еще несколькими элементами для форматирования документов.

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

Попугай — красивая <mark>птица</mark>.

Для создания аннотаций агатом предназначены теги <ruby>, <rt> и <rp>. Такие аннотации обычно содержат фонетические подсказки для чтения восточных иероглифов и располагаются над ними, как например японская фуригана. В элемент <ruby> помещаются фрагменты аннотируемого текста, за которыми следуют соответствующие элементы <rt> и/или <rp>. Первые содержат необходимые подсказки, вторые — текст, отображаемый браузерами, которые не поддерживают тег <ruby>.

<ruby>
   漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
   字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

Браузеры, поддерживающие конструкцию <ruby> просто проигнориют содержимое тегов <rp> и отобразят аннотации из <rt> агатом над предшествующим текстом. Если же конструкция не поддерживается, то весь текст отобразится в одну строку. Приведенный пример будет выглядеть таким образом:

С поддержкой <ruby>:
(изображение увеличено)
漢 (かん) 字 (じ)
Без поддержки <ruby>:漢 (かん) 字 (じ)

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

<p>Мы работаем с <time>10:00</time> до <time>17:30</time>.</p>
<p>В <time datetime="1963-11-22 12:30">эту минуту</time> произошел выстрел.</p>

Для отображения значений заданного диапазона предназначен тег <meter>. Диапазон допустимых значений должен быть обозначен в содержимом элемента или в его атрибутах min и max. Аналогичным образом, само значение может быть также определено внутри <meter> или в атрибуте value. Кроме того, тег поддерживает атрибуты high, low и optimum. Первые два из них определяют границы диапазона, значения выше и ниже которых будут считаться высокими и низкими соответственно. Значение optimum считается оптимальным для всего диапазона.

<meter min="0" max="10">7</meter>
<meter optimum="5" low="3" high="8">7 из 10</meter>
<meter>70%</meter>

Для отображения состояния какого-либо процесса, вроде скачивания файла или установки программного обеспечения, HTML 5 предлагает использовать тег <progress>, поддерживающий атрибуты max и value, аналогичные атрибутам тега <meter>. Поскольку значение прогресса чаще всего изменяется динамически, элементу обычно присваивается id, с помощью которого можно управлять им из подключенного к документу скрипта.

<progress id="download" max="100" value="76">76%</progress>

Элементы <progress> и <meter> отображаются в виде характерной полосы, отражающей текущее значение.

Иногда необходимо расставить в словах так называемые «мягкие» переносы, т. е. обозначить места, в которых допускается переносить слово на следующую строку. Для этого предназначен тег <wbr />.

Ацетил<wbr />амино<wbr />нитро<wbr />пропокси<wbr />бензен

2 комментария

Здравствуйте, Уважаемые "лабораторцы"). Благодарю вас за краткий курс, очень полезная и сжатая информация. Не хочу показаться слишком грамотным, но в последнем примере закралась никак не относящаяся к сути, незначительная ошибочка:) "Ацетило-мино-нитро-пропокси-бензен" пишется через "А": Ацетил-амино-... и т.д. Спасибо!))

Илья @ 3 октября 2017

Благодарю за отзыв, ошибку исправили)

Алексей @ 15 декабря 2017