Краткий курс 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