title глобальный атрибут HTML

title глобальный атрибут содержит текст с дополнительной информацией об элементе, к которому он относится.

Попробуйте

<p>
  Use the <code>title</code> attribute on an <code>iframe</code> to clearly
  identify the content of the <code>iframe</code> to screen readers.
</p>

<iframe
  title="Wikipedia page for the HTML language"
  src="https://en.m.wikipedia.org/wiki/HTML"></iframe>
<iframe
  title="Wikipedia page for the CSS language"
  src="https://en.m.wikipedia.org/wiki/CSS"></iframe>

iframe {
  height: 200px;
  margin-bottom: 24px;
  width: 100%;
}

Основное применение атрибута title — обозначение элементов <iframe> для вспомогательных технологий.

Атрибут title также можно использовать для обозначения элементов управления в таблицах данных.

Атрибут title, добавленный к элементу <link rel="stylesheet">, создаёт альтернативную таблицу стилей. При создании альтернативной таблицы стилей с помощью <link rel="alternate"> этот атрибут обязателен и должен содержать непустую строку.

Если атрибут указан в открывающем теге <abbr>, значение title должно содержать полную расшифровку сокращения или аббревиатуры. По возможности вместо использования title при первом упоминании следует привести расшифровку сокращения или аббревиатуры обычным текстом, используя <abbr> для разметки сокращения. Это позволит всем пользователям понять, какое имя или термин сокращает аббревиатура, а также подскажет пользовательским агентам, как озвучивать содержимое.

Хотя title можно использовать для программного связывания метки с элементом <input>, так делать не рекомендуется. Вместо этого используйте элемент <label>.

Многострочные заголовки

Атрибут title может содержать несколько строк. Каждый символ U+000A LINE FEED (LF) обозначает разрыв строки. Следует учитывать, что в результате следующий текст отображается в две строки:

HTML

<p>
  Newlines in <code>title</code> should be taken into account. This
  <span
    title="This is a
multiline title">
    example span
  </span>
  has a title attribute with a newline.
</p>
<hr />
<pre id="output"></pre>

JavaScript

Мы можем получить значение атрибута title и отобразить его в пустом элементе <pre> следующим образом:

const span = document.querySelector("span");
const output = document.querySelector("#output");
output.textContent = span.title;

Результат

Наследование атрибута title

Если у элемента нет атрибута title, он наследует его от родительского узла, который, в свою очередь, может наследовать его от своего родителя, и так далее.

Если для этого атрибута задана пустая строка, это означает, что значения title его предков не имеют значения и не должны использоваться в подсказке для этого элемента.

HTML

<div title="CoolTip">
  <p>Hovering here will show "CoolTip".</p>
  <p title="">Hovering here will show nothing.</p>
</div>

Результат

Проблемы доступности

Использование атрибута title создаёт серьёзные проблемы для:

• Людей, использующих устройства с сенсорным экраном
• Людей, перемещающихся по странице с помощью клавиатуры
• Людей, использующих вспомогательные технологии, например программы экранного доступа или экранные лупы
• Людей с нарушениями мелкой моторики
• Людей с когнитивными нарушениями

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

• 3.2.5.1. Атрибут title | W3C HTML 5.2: 3. Семантика, структура и API HTML-документов
• Использование атрибута title в HTML — обновлённая версия | Vispero
• Всплывающие подсказки и переключатели подсказок — Inclusive Components
• Испытания и сложности атрибута title — 24 Accessibility

Спецификации

Совместимость с браузерами

См. также

• Все глобальные атрибуты.
• HTMLElement.title, отражающее этот атрибут.