Вверх A A A
Октябрь 2018
Нед Пн Вт Ср Чт Пт Сб Вс
40
1
2
3
4
5
6
7
41
8
9
10
11
12
13
14
42
15
16
17
18
19
20
21
43
22
23
24
25
26
27
28
44
29
30
31
45

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

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

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

<small> — второстепенные комментарии, уменьшенный текст.
<i> — акцентированный текст, наклонное начертание.
<b> — акцентированный текст, жирное начертание.
<em> — более акцентированный текст, наклонное начертание.
<strong> — более акцентированный текст, жирное начертание.
<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 (можно без времени).

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

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

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

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

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

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

Тег <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

<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>

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

Файл скачан на <progress id="download">76%</progress>.

Отображение и поведение тегов <time>, <meter> и <progress> не определяется стандартом и отдается на усмотрение браузеру. По умолчанию они не выделяются графически, но могут быть использованы при машинном анализе документа.

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

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


1024

Эта статья находится в разделах:

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

Свернуть