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

Мы рассмотрели большинство, но определенно не все элементы 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> ; если только этот термин не хорошо известен читателю, например «HTML» и «CSS» в этой серии. Только в этом первом случае, когда определяется аббревиатура или акроним, <abbr> необходим. Атрибут title не является необходимым и полезным.

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

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

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

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

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

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

Выделение текста

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

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

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

<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> являются пустыми элементами, то есть у них не может быть дочерних узлов — ни вложенных элементов, ни текста. Поскольку ни у одного из них нет «внутренностей», где можно было бы хранить контент, у них нет закрывающего тега.

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

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