title
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
-globale Attribut enthält Text, der beratende Informationen in Bezug auf das Element darstellt, zu dem es gehört.
Probieren Sie es aus
Die Hauptnutzung des title
-Attributs besteht darin, <iframe>
-Elemente für unterstützende Technologien zu kennzeichnen.
Das title
-Attribut kann auch verwendet werden, um Steuerelemente 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 im öffnenden <abbr>
Tag enthalten ist, muss das title
eine vollständige Erweiterung der Abkürzung oder des Akronyms sein. Anstatt title
zu verwenden, wenn möglich, geben Sie eine Erweiterung der Abkürzung oder des Akronyms in Klartext bei der ersten Verwendung an und verwenden das <abbr>
, um die Abkürzung zu markieren. Dies ermöglicht es allen Benutzern, zu wissen, welchen Namen oder Begriff die Abkürzung oder das Akronym verkürzt, während es den Benutzeragenten einen Hinweis gibt, wie der Inhalt angekündigt werden soll.
Obwohl title
verwendet werden kann, um eine programmatisch zugeordnete Kennzeichnung 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. Es ist Vorsicht geboten, da dies bedeutet, dass das Folgende über zwei Zeilen hinweg dargestellt wird:
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:
const span = document.querySelector("span");
const output = document.querySelector("#output");
output.textContent = span.title;
Ergebnis
Vererbung des Title-Attributs
Wenn ein Element kein title
-Attribut hat, erbt es dieses von seinem übergeordneten Knoten, der es wiederum von seinem übergeordneten Knoten erben kann, und so weiter.
Wenn dieses Attribut auf den leeren String gesetzt wird, bedeutet das, dass die title
s der Vorfahren irrelevant sind und nicht im Tooltip für dieses Element verwendet werden sollten.
HTML
<div title="CoolTip">
<p>Hovering here will show "CoolTip".</p>
<p title="">Hovering here will show nothing.</p>
</div>
Ergebnis
Zugänglichkeitsbedenken
Die Verwendung des title
-Attributs ist hoch problematisch für:
- Personen, die ausschließlich Touch-Geräte verwenden
- Personen, die mit Tastaturen navigieren
- Personen, die mit unterstützender Technologie wie Bildschirmlesegeräten oder Vergrößerern navigieren
- Personen mit beeinträchtigter Feinmotorik
- Personen mit kognitiven Bedenken
Dies liegt an der inkonsistenten Browser-Unterstützung, die durch das zusätzliche Parsen der von Browsern gerenderten Seite durch unterstützende Technologien erschwert wird. Wenn ein Tooltip-Effekt erwünscht ist, ist es besser, eine zugänglichere Technik zu verwenden, die mit den oben genannten Browsing-Methoden zugänglich ist.
Spezifikationen
Specification |
---|
HTML Standard # the-title-attribute |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Alle globalen Attribute.
HTMLElement.title
, das dieses Attribut widerspiegelt.