Текст: сокращения, цитаты и код

Основы определения текста с помощью абзацев (а также выделения и переносов строк) и заголовков были рассмотрены в Уроке по HTML для начинающих .

И по той же причине, по которой мы используем p и h1, h2 и т.д., существует ряд других тегов, которые мы также должны использовать для специального представления других типов текста, таких как сокращения, цитаты и компьютерный код.

Сокращения

Элемент abbr используется для разметки аббревиатуры, сокращённой формы слова или фразы.

Расширенная фраза, которую представляет аббревиатура, может быть определена в значении атрибута title. Это необязательно, но рекомендуется.

<p>Этот сайт посвящён<abbr title="Языку гипертекстовой разметки">HTML</abbr> и <abbr title="Каскадным таблицам стилей">CSS</abbr>.</p>

 

Цитаты blockquote и q

Теги blockquote и q используются для цитат.

Тег blockquote обычно используется для отдельных, часто многострочных цитат, тогда как q используется для более коротких, построчных цитат.

Если источник цитаты можно найти в Интернете, cite атрибут может использоваться для указания на её происхождение.

<p>Итак, я спросил Боба о цитатах в Интернете, и он сказал:<q>«Я знаю о цитатах столько же, сколько о любителях голубей»</q>. К счастью, я нашёл FoxyForex, и там было написано:</p>
<blockquote cite="http://www.htmldog.com/guides/html/intermediate/text/">
    <p>для цитат используются blockquote и q. blockquote обычно используется для отдельных, часто многострочных цитат, тогда как q используется для более коротких встроенных цитат.</p>
</blockquote>

Блочные цитаты очень хорошо работают с элементами HTML5 figure и figcaption, обеспечивая приятный семантический способ группировки цитаты с цитатой:

<figure>
    <blockquote>[Большая старая цитата об эволюции]</blockquote>
    <figcaption> Чарльз Дарвин</figcaption>
</figure>

Но давайте не будем увлекаться этим здесь ─ подробнее смотрите Статью о секционировании.

Цитаты cite

Просто чтобы сделать вещи приятными и запутанными, помимо атрибута cite, существует также тег cite. Его можно использовать для определения названия произведения, например книги.

<p>Согласно<cite>Библии</cite>, через шесть дней Бог сказал: <q> «к черту все это, я вздремну».</q>.</p>

Код

Тег code используется для представления любой формы компьютерного кода. Кроме того, var может использоваться для переменных (которые могут быть переменной в чём угодно, не только в коде ─ это может быть переменная в уравнении, например), samp для вывода образца и kbd (клавиатура) для ввода пользователем.

<p>Если вы добавите строку<code><var>givevaderachuckle</var> = true;</code> в программу<code>destroy_planet</code> а затем введёте <kbd>ilovejabba</kbd> в консоль, большой плохой зеленый лазер Звезды смерти будет травить <samp>Любителя слизняков!</samp> на поверхности планеты.</p>

Предварительно отформатированный текст

Тег pre ─ это предварительно отформатированный текст, необычный для HTML-тегов тем, что он обращает внимание на каждый символ в нём, включая пробел, в то время как другие элементы, например, игнорируют последовательный пробел или разрыв строки.

Чаще всего тег pre используется для блоков кода, где могут иметь значение интервалы, например, отступы.

<pre><code>
&lt;div id="intro"&gt;
    &lt;h1&gt;Some heading&lt;/h1&gt;
    &lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

В качестве примера на этом сайте широко используются pre и code. Блоки кода, подобные приведённому выше, являются элементами code внутри элементов pre. Встроенные ссылки на теги и свойства — это просто элементы code, часто внутри элементов a для ссылки на справочный раздел.

Страницы в тему:

Добавить комментарий