Заголовок

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

Попробуйте

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

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

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

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

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

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

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

HTML

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 a 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

html

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

Результат

Вопросы доступности

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

Пользователей, использующих только сенсорные устройства
Пользователей, которые работают с клавиатурой
Пользователей, работающих с вспомогательными технологиями, такими как программы чтения с экрана или увеличители
Пользователей с нарушениями мелкой моторики
Пользователей с когнитивными проблемами

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

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

Спецификация
Стандарт HTML # the-title-attribute

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`title`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4
`multi-line_titles`	≤64	12	≤58	51	≤11	64	58	47	≤11	9.0	64

См. также

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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title