Углубленное форматирование текста

В HTML для форматирования текста есть много других элементов, не рассмотренных  в статье Основы редактирования текста в HTML. Элементы, описанные в этой статье, не так часто используются, но все же полезны для понимания (и это все еще будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.

Предварительные требования: Базовое знакомство с HTML , описанное в Начало работы с HTML. Форматирование текста с помощью HTML, описанное в статье Основы редактирования текста в HTML
Задача: Научиться использовать менее известные HTML элементы для продвинутой семантической разметки текста.

Списки описания

В основах HTML-текста мы рассмотрели как пометить привычные типы списков в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, - списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.

Давайте рассмотрим пример набора терминов и определений:

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information

В списках описания используется иная оболочка, чем в других типах списков - <dl>; кроме того, каждый термин завернут в элемент <dt> (термин для описания), и каждое определение завернуто в элемент <dd> (описание определения).

Закончим разметку нашего примера:

<dl>
  <dt>soliloquy</dt>
  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
  <dt>monologue</dt>
  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
</dl>

В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определенные на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения.

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.

Заметьте, что разрешено давать одному элементу несколько описаний:

aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.
In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)

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

Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого места, вы должны обернуть ее внутри элемента <blockquote>, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута cite.

Например, следующая разметка берется из страницы элемента MDN <blockquote>:

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

Чтобы превратить это в цитату блока, мы просто сделаем следующее:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

Утилита по умолчанию для браузера будет отображать это как абзац с отступом, как индикатор, который является цитатой; MDN делает это, но также добавляет некоторый дополнительный стиль:

Элемент HTML <blockquote> Element (или элемент кода блока HTML) указывает, что закрытый текст является расширенной цитатой.

Цитаты внутри основного текста

Встроенные цитаты работают точно так же, за исключением того, что они используют элемент <q>. Например, следующий бит разметки содержит цитату из страницы MDN <q>:

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

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

Элемент quote - <q> - предназначен для коротких цитат, которые не требуют разрывов абзаца.

Цитирование

Содержание атрибута cite полезно, но, к сожалению, браузерам, программам чтения счётчиков и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое цитирования без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент <cite> рядом с (или внутри) элементом цитаты. Это действительно будет означать то, что имя источника цитаты - то есть имя книги или имя человека, которое произвело цитату, - будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <cite> с источником цитаты:

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере quotations.html

Аббревиатуры

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

Давайте рассмотрим несколько примеров:

<p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших Веб-документов.</p>

<p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p>

Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):

Мы используем HTML для структурирования наших веб-документов.

Я думаю, Почт. Грин сделал это на кухне с бензопилой.

Примечание

Существует еще один элемент <acronym>, который в основном делает то же самое, что и <abbr>, но предназначен специально для акронимов (тип аббревитатур). Это, однако, было излишним, - он не поддерживается в браузерах на том же уровне, что <abbr>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <abbr>.

Разметка контактных данных

HTML имеет элемент для разметки контактных данных - <address>. Он просто обертывает ваши контактные данные, например:

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

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

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

Верхний и нижний индекс

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

Приведем пример:

<p>Мой день рождения 25<sup>-го</sup> мая 2001 года.</p>
<p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p>

Результат этого кода выглядит следующим образом:

Мой день рождения 25-го мая 2001 года.

Химическая формула кофеина: C8H10N4O2.

Если x2 равно 9, x должен равняться 3 или -3.

Представление компьютерного кода

Существует несколько элементов для маркировки компьютерного кода с использованием HTML:

  • <code>: Для разметки общих частей компьютерного кода.
  • <pre>: Для сохранения пробелов (как правило, кодовых блоков) - если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице. Если вы поместите текст в теги <pre> </ pre>, то ваши пробелы будут отображаться идентично тому, как вы его видите в текстовом редакторе.
  • <var>: Для конкретной маркировки имен переменных.
  • <kbd>: Для маркировки вывода компьютерной программы. Для маркировки ввода клавиатуры (и других типов), введенного в компьютер.
  • <samp>: Для маркировки вывода компьютерной программы.

Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла other-semantics.html):

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

Разметка времени и даты

HTML также содержит элемент <time> для отметки времени и дат в машиночитаемом формате. Например:

<time datetime="2016-01-20">20 Января 2016</time>

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

  1. 20 Января 2018
  2. 20-ое Января 2016
  3. Январь 20 2018
  4. 20/01/18
  5. 01/20/18
  6. 20 Января следующего месяца
  7. 20e Janvier 2018
  8. 2018年1月20日
  9. И другое...

Но эти разные формы не могут быть легко распознаны компьютерами - что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент <time> позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.

В приведенном выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:

<!-- Стандартная дата -->
<time datetime="2016-01-20">20 Января 2016</time>
<!-- Только год и месяц -->
<time datetime="2016-01">Январь 2016</time>
<!-- Только месяц и день -->
<time datetime="01-20">20 Января</time>
<!-- Только время, часы и минуты -->
<time datetime="19:30">19:30</time>
<!-- Также вы можете отобразить секунды и миллисекунды! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Дата и время -->
<time datetime="2016-01-20T19:30">7.30pm, 20 Января 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Января 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">Четвертая неделя 2016</time>

Заключение

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