В HTML существует масса других текстовых элементов для форматирования, о которых не упоминается в статье Основы редактирования текста в 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>. Внутри этого элемента добавьте атрибут cite с указанием URL-адреса источника.
Пример разметки из страницы MDN для элемента <blockquote>:
<p>The <strong>HTML <code><blockquote></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><blockquote></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><q></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 несет в себе ценную информацию, но, к сожалению, она мало используется браузерами или приложениями считывания. Включить отображение содержимого атрибута 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><blockquote></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><q></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>
По умолчанию браузеры делают текст внутри цитаты курсивом.
Аббревиатуры
Другой популярный элемент, который можно встретить при создании веб-страниц, - это <abbr>, предназначенный для выделения аббревиатур или акронимов. Он позволяет отображать полную расшифровку сокращения через атрибут title.
Приведем несколько примеров:
<p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших Веб-документов.</p> <p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p>
Ниже вы увидите пример их использования (при наведении курсора на сокращение вы получите расшифровку):
Для создания структуры наших веб-страниц мы используем HTML.
Как-то раз, Почт. Грин, возможно, сделал что-то такое на кухне, причём с бензопилой.
Есть также элемент <acronym>, который почти полностью дублирует функцию <abbr>, однако он нацелен именно на акронимы. Из-за своей избыточности <acronym> не поддерживается наравне с <abbr> и является ненужным. Потому лучше использовать только <abbr>.
Разметка контактных данных
HTML предлагает элемент для оформления контактной информации - <address>. Вы просто выделяете свои контактные данные таким образом:
<address> <p>Chris Mills, Manchester, The Grim North, UK</p> </address>
Важно помнить, что <address> предназначен для контактной информации автора HTML-документа, а не любой информации. Например, этот код будет правильным, если автором документа был Крис. Также подходит следующий пример:
<address> <p>Страницу написал <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> позволяет отображать отступы точно так, как они выглядят в редакторе.
- <var>: Для обозначения имён переменных.
- <kbd>: Для обозначения ввода с клавиатуры или других способов взаимодействия с компьютером.
- <samp>: Для отображения вывода компьютерной программы.
Рассмотрим несколько примеров:
<pre><code>var para = document.querySelector('p'); para.onclick = function() { alert('Owww, stop poking me!'); }</code></pre> <p>Вы не должны использовать устаревшие теги, такие как <code><font></code> или <code><center></code>.</p> <p>В приведенном выше примере JavaScript <var>para</var> символизирует элемент абзаца.</p> <p>Выделите весь текст с помощью <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 дата байт 64 байта от 63.245.215.20: icmp_seq=0 ttl=40 время=158.233 мс</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> <!-- Дата и время с учетом часового пояса --> <time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Января 2016 в 8.30pm во Франции</time> <!-- Канонизация указанной недели --> <time datetime="2016-W04">Четвертая неделя 2016</time>
Заключение
Мы завершили наше ознакомление с семантикой текста в HTML. Помните, что в этом курсе приведены не все элементы, доступные для разметки текста в HTML. Мы постарались представить главные, с которыми вы, вероятно, встретитесь в вашей практике, или которые могут быть для вас полезными. В следующем материале мы подробнее изучим элементы HTML, используемые для структурирования разделов HTML-документа.