Мы рассмотрели большинство, но определённо не все, 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> ) была включена в спецификацию для отображения открывающих и закрывающих скобок в браузерах, не поддерживающих отображение <ruby> . Если браузер поддерживает <ruby> (а это есть во всех популярных браузерах), содержимое элементов <rp> не отображается. Текстовый элемент Ruby ( <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> являются пустыми, то есть не могут иметь дочерних узлов – ни вложенных элементов, ни текста. Поскольку ни у одного из них нет «внутренних» элементов, где можно хранить контент, у них нет закрывающего тега.
Проверьте свое понимание
Проверьте свои знания встроенного текста.
Какой элемент следует использовать для отображения примера кода?
<data><code><kbd> Для чего используется элемент <ruby> ?