Другие элементы инлайн-текста

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

Мы рассмотрели большинство, но, безусловно, не все элементы 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>, определяющий строчный текст, который должен отображаться как subscript исключительно по типографским причинам. Надстрочные и подстрочные знаки - это числа, цифры, символы или другие обозначения, которые меньше обычной строки текста и располагаются соответственно немного выше или ниже строки.

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

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

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

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

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

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

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

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

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

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

Подчеркивание текста

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

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

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

<i>

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

MLW использует элемент <span> для странного текста в нижней части обзора мастерской Тости МакТостфейса. Элемент <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 означает "горизонтальное правило". Хотя браузеры обычно отображают горизонтальную линию, этот элемент имеет семантическое значение. По умолчанию role - это separator.

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

Например, в биографии Hal текст записан в байт-коде, причем каждый байт отделен пробелом. Байт-код не содержит пробелов. Чтобы длинная строка байт-кода разрывалась только между байтами, если нужно обернуть строку, мы включаем элемент <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> являются элементами void, то есть они не могут иметь дочерних узлов - ни вложенных элементов, ни текста. Поскольку ни один из этих элементов не имеет "внутренностей", где может храниться содержимое, у них нет тега конца.

Источник: Other inline text elements

Комментарии