Другие встроенные текстовые элементы

Мы рассмотрели большинство, но, безусловно, не все элементы HTML. Одна область, которую мы не обсуждали, — это встроенные текстовые элементы. Вопреки распространенному мнению, HTML изначально предназначался для обмена документами, а не видеороликами с котиками. Существует множество элементов, которые обеспечивают текстовую семантику для документации.

Существует модуль, посвященный ссылкам и элементу <a> . Остальные элементы кратко описаны здесь.

Примеры кода и техническое письмо

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

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

Элемент <data> связывает заданный фрагмент контента с машиночитаемым переводом. Атрибут value элемента предоставляет машиночитаемый перевод содержимого элемента. Если содержимое элемента <data> связано со временем или датой, вместо него следует использовать элемент <time> , представляющий определенный период времени.

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

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

При предоставлении инструкций, предполагающих взаимодействие с клавиатурой, можно использовать элемент <kbd> . Он представляет собой текстовый ввод пользователя с клавиатуры, голосовой ввод или любое другое устройство ввода текста.

Элемент <var> можно использовать для математических выражений или переменных программирования. Большинство браузеров отображают текстовое содержимое курсивом, используя окружающий шрифт. Если вы часто пишете математические выражения, рассмотрите возможность использования MathML — языка математической разметки на основе XML для описания математических обозначений.

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

Используйте <del> для обозначения удаленного текста. При желании укажите cite на ресурс, объясняющий изменение, и атрибут datetime с датой или датой и временем в машиночитаемом формате. Элемент зачеркнутого текста <s> можно использовать для обозначения того, что контент больше не актуален, но фактически не удален из документа.

Элемент <ins> является противоположностью элемента <del> . Этот элемент используется для обозначения добавленного или «вставленного» текста, при желании включающего атрибуты cite или datetime .

Определения и языковая поддержка

При использовании сокращений или акронимов всегда указывайте полную версию термина в виде простого текста при первом использовании. Затем вводите сокращенное представление термина между открывающим и закрывающим тегами <abbr> . Тег <abbr> необходим только при первом упоминании, когда определяется сокращение или акроним. Атрибут title не является обязательным и не полезен.

Исключением из этого правила является случай, когда термин хорошо известен читателю, например, HTML и CSS, рассматриваемые в этой серии.

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

Если определяемый термин не принадлежит к тому же языку, что и окружающий текст, обязательно укажите атрибут lang для идентификации языка.

При написании текстов на языках с разной направленностью HTML предоставляет элемент <bdi> для обработки потенциально двунаправленного текста в отрыве от окружающего текста. Этот элемент интернационализации особенно полезен, когда контент с неизвестной направленностью динамически вставляется на страницу. Элемент <bdo> переопределяет текущую направленность текста, отображая текст в другом направлении. W3C предлагает введение в алгоритмы двунаправленного отображения .

Некоторые наборы символов содержат небольшие аннотации, расположенные над или справа от символов, предоставляющие информацию о произношении. Элемент <ruby> — это контейнер, используемый для размещения этих аннотаций, которые облегчают чтение письменных языков, таких как корейский, китайский и японский. Ruby также может использоваться для иврита, арабского и вьетнамского языков.

В спецификацию были включены скобки <rp> ( <rp> ), которые используются для открытия и закрытия скобок в браузерах, не поддерживающих отображение <ruby> . Когда браузеры поддерживают <ruby> , а это делают все браузеры с поддержкой стандартного отображения, содержимое элементов <rp> не отображается. Текстовый элемент <rt> ( <rt> ) содержит сами аннотации. Оба элемента вложены в <ruby> .

Обратите внимание, что скобки не отображаются, если ваш браузер поддерживает тег <ruby> .

Выделить текст

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

• Используйте элемент <em> для выделения или акцентирования фрагмента контента. Элемент <em> может быть вложенным, при этом каждый уровень вложенности указывает на большую степень акцентирования. Этот элемент имеет семантическое значение и может использоваться для информирования аудио-агентов, таких как программы чтения с экрана, Alexa и Siri, о необходимости выделения.
• Используйте элемент <mark> для идентификации или выделения текста, имеющего отношение к делу, например, для выделения (или «пометки») вхождения поисковых запросов в результатах поиска. Это позволяет быстро идентифицировать помеченный контент без добавления акцента или придания ему большей значимости.
• Элемент <strong> указывает на то, что текст имеет важное значение. Браузеры обычно отображают контент с более жирным шрифтом.
• Элемент <cite> , описанный в разделе «Основы работы с текстом» , используется для обозначения названий книг, статей или других творческих работ, а также сокращенных ссылок или метаданных цитирования, например, номера ISBN книги.

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

<i>

Элементы <i> можно использовать для технических терминов, иностранных слов (с атрибутом lang указывающим язык), мыслей или названий кораблей. Этот элемент используется для того, чтобы выделить встроенный контент из окружающего текста по определенной причине, например, для идиоматических выражений, технических терминов и таксономических обозначений.

Этот элемент не следует использовать для выделения текста курсивом.

MLW использует элемент <span> для странного текста внизу обзора мастер-класса Toasty McToastface. Элемент <span> представляет собой универсальный встроенный контейнер, не имеющий семантики и ничего не представляющий. Это также было бы уместным использованием <i> .

По умолчанию элемент <i> отображается курсивом. В этом примере мы задали font-style: normal поскольку используемые символы недоступны в курсивном варианте.

<u>

Элемент <u> предназначен для контента с нетекстовыми аннотациями. Например, вы можете захотеть отметить заведомо орфографические ошибки. По умолчанию контент подчеркнут, но это можно изменить с помощью CSS, например, добавив красную волнистую линию подчеркивания, имитирующую индикаторы грамматических ошибок в текстовых редакторах.

<p>I always spell <u>licence</u> wrong</p>

<b>

Элемент <b> можно использовать для привлечения внимания к тексту, который в остальном не важен. Этот элемент не передает никакой специальной семантической информации и должен использоваться только тогда, когда ни один из других элементов в этом разделе не подходит для этой цели. Пример не приводится, так как я не смог придумать подходящий вариант использования; настолько «крайней мерой» является использование этого элемента.

Пространство

Когда вам нужны переносы строк, например, при написании стихов или адреса, для добавления символа перевода строки используется самозакрывающийся элемент переноса строки <br> .

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Чтобы создать разделитель или тематическую преграду между разделами, не связанными напрямую с основной темой, например, между главами книги или между монологом на 5000 слов и рецептом, который ищут ваши пользователи, добавьте элемент <hr> . HR означает «горизонтальная линия». Хотя браузеры обычно отображают горизонтальную линию, этот элемент имеет семантическое значение. Его роль по умолчанию — separator .

В HTML также есть элемент, позволяющий разбивать слова на части. Самозакрывающийся элемент <wbr> подсказывает браузеру, что если слово может выйти за пределы своего контейнера, то это место, где браузер может при желании разбить строку. Это часто используется для разрыва слов в длинных URL-адресах. При этом дефис не добавляется.

Например, в биографии Хэла есть текст, записанный в байт-коде, где каждый байт отделен пробелом. В байт-коде пробелов нет. Чтобы длинная строка байт-кода прерывалась только между байтами, если необходимо перенести строку, мы добавляем элемент <wbr> при каждой возможности разрыва строки:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

Элементы <br> , <hr> и <wbr> являются пустыми элементами, то есть они не могут иметь дочерних узлов — ни вложенных элементов, ни текста. Поскольку ни один из них не имеет "внутренней части", где может храниться контент, у них нет закрывающего тега.

Проверьте свое понимание

Проверьте свои знания о встроенном тексте.