Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

В 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, довольно близки к этому соглашению, но также вносят некоторые изменения.

монолог
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.)

Активное обучение: разметка набора определений

Пришло время попробовать свои силы в списках описания: добавьте элементы в исходный текст в поле «Ввод», чтобы он отображался как список описания в поле «Вывод». Вы можете попробовать использовать свои собственные термины и описания, если хотите.

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Reset. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Show solution, чтобы увидеть правильный ответ.

Цитаты

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

Активное обучение: кто это сказал?

Время для другого активного примера обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:

  1. Заверните средний абзац в blockquote, который включает атрибут cite.
  2. Заверните часть третьего абзаца во встроенную цитату, которая включает атрибут cite.
  3. Включите элемент <cite> для каждой ссылки.

Источники цитирования, которые вам потребуются:

  • http://www.brainyquote.com/quotes/authors/c/confucius.html for the Confucius quote
  • http://www.affirmationsforpositivethinking.com/index.htm for "The Need To Eliminate Negative Self Talk".

Если Вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Reset. Если упражнение вызывает у Вас затруднения, то нажмите кнопку Show solution, чтобы увидеть правильный ответ.

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

Другой довольно общий элемент, который вы будете часто встречать в Интернете, - это <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>

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

  • 20 Января 2018
  • 20-ое Января 2016
  • Январь 20 2018
  • 20/01/18
  • 01/20/18
  • 20 Января следующего месяца
  • 20e Janvier 2018
  • 2018年1月20日
  • И другое...

Но эти разные формы не могут быть легко распознаны компьютерами - что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент <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 element reference (поле семантики текста Inline text semantics станет отличным местом для начала). В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.

 

 

В этой статье

Перевод: Глеб Ткаченко ( instagramm: @gleb.sc )

Метки документа и участники

Внесли вклад в эту страницу: s.g.matinyan, Dzhabarovm, xap, Chugou9, slychai85, glebsc, pythonmag, FeruzOripov
Обновлялась последний раз: s.g.matinyan,