HTML `title` Globales Attribut

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das title globales Attribut enthält Text, der beratende Informationen in Bezug auf das Element darstellt, zu dem es gehört.

Probieren Sie es aus

<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%;
}

Die Hauptnutzung des title-Attributs besteht darin, <iframe>-Elemente für unterstützende Technologien zu kennzeichnen.

Das title-Attribut kann auch verwendet werden, um Bedienelemente in Datentabellen zu kennzeichnen.

Das title-Attribut, wenn es zu <link rel="stylesheet"> hinzugefügt wird, erstellt ein alternatives Stylesheet. Beim Definieren eines alternativen Stylesheets mit <link rel="alternate"> ist das Attribut erforderlich und muss auf eine nicht leere Zeichenfolge gesetzt werden.

Wenn es am Eröffnungstag von <abbr> enthalten ist, muss der title eine vollständige Entfaltung der Abkürzung oder des Akronyms sein. Anstatt title zu verwenden, geben Sie nach Möglichkeit eine Entfaltung der Abkürzung oder des Akronyms im Klartext bei der ersten Verwendung an und markieren Sie die Abkürzung mit <abbr>. Dies ermöglicht es allen Benutzern, zu wissen, welchen Namen oder Begriff die Abkürzung oder das Akronym verkürzt, und liefert einen Hinweis an Benutzeragenten, wie der Inhalt angekündigt werden soll.

Obwohl title verwendet werden kann, um ein programmatisch zugeordnetes Label für ein <input>-Element bereitzustellen, ist dies keine gute Praxis. Verwenden Sie stattdessen ein <label>.

Mehrzeilige Titel

Das title-Attribut kann mehrere Zeilen enthalten. Jedes U+000A LINE FEED (LF)-Zeichen stellt einen Zeilenumbruch dar. Dabei ist etwas Vorsicht geboten, da das Folgende über zwei Zeilen dargestellt wird:

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

Wir können das title-Attribut abfragen und es im leeren <pre>-Element wie folgt anzeigen:

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

Ergebnis

Vererbung des Title-Attributs

Hat ein Element kein title-Attribut, dann erbt es dieses von seinem übergeordneten Knoten, der wiederum von seinem übergeordneten Knoten erben kann, und so weiter.

Wenn dieses Attribut auf eine leere Zeichenfolge gesetzt ist, bedeutet dies, dass die titles seiner Vorfahren nicht relevant sind und nicht im Tooltip für dieses Element verwendet werden sollten.

HTML

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

Ergebnis

Zugänglichkeitsprobleme

Die Verwendung des title-Attributs ist hochproblematisch für:

  • Personen, die ausschließlich Touch-Geräte verwenden
  • Personen, die mit Tastaturen navigieren
  • Personen, die mit unterstützenden Technologien wie Bildschirmlesegeräten oder Vergrößerungsmitteln navigieren
  • Personen mit eingeschränkter Feinmotorik
  • Personen mit kognitiven Bedenken

Dies liegt an der inkonsistenten Browserunterstützung, verstärkt durch das zusätzliche Parsing der vom Browser gerenderten Seite durch assistive Technologien. Wenn ein Tooltip-Effekt gewünscht wird, ist es besser, eine zugänglichere Technik zu verwenden, die mit den oben genannten Browsing-Methoden zugänglich ist.

Spezifikationen

Specification
HTML
# the-title-attribute

Browser-Kompatibilität

Siehe auch