1.11.5. Семантика уровня текста

HTML-элементы для текстового содержимого

1. Элемент <a>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое; если элемент имеет атрибут href — интерактивное содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 1. Атрибуты элемента <a>
Атрибут Описание, принимаемое значение
href Задает адрес гиперссылки.
target Устанавливает контекст просмотра по умолчанию для навигации по гиперссылкам.
download Определяет, скачивать ли ресурс вместо навигации по нему.
rel Устанавливает отношение этого документа (или подраздела / темы) к целевому ресурсу.
rev Устанавливает обратную связь отношения ресурса назначения с этим документом (или подразделом / темой).
hreflang Описывает язык связанного ресурса.
type Добавляет подсказку для типа ссылочного ресурса.
referrerpolicy Устанавливает политику реферера для выборок, инициируемых элементом.

Если элемент <a> имеет атрибут href, то он представляет гиперссылку или якорь, помеченные его содержимым, в противном случае он представляет место для заполнения, где могла быть размещена ссылка.

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

<aside class="advertising">
    <h2>Викиум</h2>
    <a href="https://ad.example.com/?adid=1929&pubid=1422">
        <section>
            <h3>Тренажеры для мозга</h3>
            <p>Какая функция мозга у тебя сильнее?</p>
        </section>
    </a>
</aside>

2. Элемент <em>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

3. Элемент <strong>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

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

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

<p>Добро пожаловать в Реми, систему напоминаний. </p>
<p>Ваши задачи на сегодня:</p>
<ul>
  <li><p><strong>Выключите духовку.</strong></p></li>
  <li><p>Выбросьте мусор.</p></li>
  <li><p>Займитесь стиркой.</p></li>
</ul>

4. Элемент <small>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

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

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

5. Элемент <s>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты

6. Элемент <cite>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты
Применяется для выделения цитат, названий произведений, сносок на другие документы.

7. Тег <q>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты Для тега доступен атрибут cite.
Используется для выделения коротких цитат. Браузерами заключается в кавычки.

8. Тег <dfn>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибутыДля тега доступен атрибут title.
Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.

9. Тег <abbr>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты
Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.

10. Элемент <ruby>

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

11. Элемент <rb>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.
Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.

12. Элемент <rt>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.

13. Элемент <rtc>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.

14. Элемент <rp>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

15. Элемент <data>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

16. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

17. Тег <code>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты
Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.

18. Тег <var>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты
Выделяет имена переменных, отображая курсивом.

19. Тег <samp>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты
Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом.

20. Тег <kbd>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты
Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом.

21. Тег <sub> <sup>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты
Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.

22. Тег <i>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты
Отображает шрифт курсивом.

23. Тег <b>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <b> представляет собой диапазон текста, на который обращено внимание без передачи какой-либо дополнительной важности.

Элемент <b> следует использовать в качестве крайней меры, если другой элемент не является более подходящим. В частности, заголовки должны использовать элементы от <h1> до <h6>, ударение на ударение должно использовать элемент em, важность должна быть обозначена сильным элементом, а текст, отмеченный или выделенный, должен использовать элемент mark.

24. Элемент <u>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

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

В большинстве случаев другой элемент, вероятно, будет более подходящим: для выделения ударения следует использовать элемент em; для маркировки ключевых слов или фраз следует использовать либо элемент <b>, либо элемент <mark>, в зависимости от контекста; для маркировки названий книг следует использовать элемент цитирования; для маркировки текста явными текстовыми аннотациями следует использовать элемент <ruby>; для технических терминов, таксономического обозначения, транслитерации, идеи или для обозначения названий судов в западных текстах следует использовать элемент i.

25. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для тега доступны ‎глобальные атрибуты.

Элемент <mark> представляет собой фрагмент текста в документе, помеченный или выделенный для справочных целей:

  • привлечение внимания к определенной части цитаты,
  • выделение части цитируемого текста, которая изначально не была выделена,
  • выделение частей документа, которые соответствуют какой-либо строке поиска.
<p>I also have some <mark>kitten</mark>s who are visiting me these days. They’re really cute. I think they like my garden! Maybe I should adopt a <mark>kitten</mark>.</p>

Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

26. Элемент <bdi>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для тега доступны ‎глобальные атрибуты.

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

27. Тег <bdo>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <bdo> управляет форматированием направленности текста для своих дочерних элементов. Это позволяет переопределить двунаправленный алгоритм Unicode, явно указав переопределение направления. Для этого необходимо указать атрибут dir со значением ltr, чтобы указать переопределение слева направо, и со значением rtl, чтобы указать переопределение справа налево.

28. Элемент <span>

Категории контента: потоковое содержимое, текстовое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <span> сам по себе ничего не значит, но может быть полезен при использовании вместе с глобальными атрибутами, например, class, lang или dir. Он представляет свои дочерние элементы.

В этом примере фрагмент кода размечается с использованием элементов span и атрибутов class, чтобы его ключевые слова и идентификаторы можно было кодировать цветом из CSS:

<pre>
<code class="lang-c">
    <span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> < 256; <span class="ident">j</span>++) {
    <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> << 17);
    <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
    <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
  }</code>
</pre>

29. Тег <br>

Категории контента: потоковое содержимое, текстовое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: отсутствует закрывающий тег.

Для элемента доступны ‎глобальные атрибуты.

Элемент <br> представляет разрыв строки. Элементы <br> должны использоваться только для разрывов строк, которые фактически являются частью содержимого, как в стихах или адресах, например:

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

Элементы <br> не должны использоваться для разделения тематических групп в абзаце, приведенный ниже пример является неверным:

<p>
    <label>Name: <input name="name"></label><br>
    <label>Address: <input name="address"></label>
</p>

30. Элемент <wbr>

Категории контента: потоковое содержимое, текстовое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается текстовое содержимое.

Пропуск тегов: отсутствует закрывающий тег.

Элемент <wbr> представляет возможность разрыва длинной строки, чтобы текст можно было переносить в удобочитаемом виде.

Для тега доступны ‎глобальные атрибуты.

<pre>...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
...</pre>

По материалам Text-level semantics

Поделиться: