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 Juli 2015.
Das title-globale Attribut enthält Text, der beratende Informationen zu dem 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 Hauptverwendung 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 erzeugt, wenn es zu <link rel="stylesheet"> hinzugefügt wird, ein alternatives Stylesheet. Bei der Definition eines alternativen Stylesheets mit <link rel="alternate"> ist das Attribut erforderlich und muss auf einen nicht leeren String gesetzt werden.
Wenn es im <abbr>-Öffnungstag enthalten ist, muss das 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 verwenden <abbr>, um die Abkürzung zu kennzeichnen. Dadurch wissen alle Benutzer, welches Wort oder welcher Begriff durch die Abkürzung oder das Akronym abgekürzt wird, während ein Hinweis an Benutzeragenten gegeben wird, wie der Inhalt angekündigt werden soll.
Während 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. Einige Vorsichtsmaßnahmen sind zu treffen, da dies bedeutet, dass das Folgende über zwei Zeilen gerendert 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 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 Titel-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 ist, bedeutet dies, dass die title seiner 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 hochproblematisch für:
- Personen, die nur Touch-Geräte verwenden
- Personen, die mit Tastaturen navigieren
- Personen, die mit unterstützender Technologie wie Bildschirmlesegeräten oder Vergrößerungen navigieren
- Personen mit Beeinträchtigungen der feinmotorischen Kontrolle
- Personen mit kognitiven Bedenken
Dies liegt an der inkonsistenten Unterstützung durch Browser, verstärkt durch das zusätzliche Parsing der browsergerenderten Seite durch unterstützende Technologien. Wenn ein Tooltip-Effekt gewünscht wird, ist es besser, eine zugänglichere Technik zu verwenden, die mit den oben genannten Browser-Methoden zugänglich ist.
Spezifikationen
| Specification |
|---|
| HTML # the-title-attribute |
Browser-Kompatibilität
Siehe auch
- Alle globalen Attribute.
HTMLElement.title, das dieses Attribut widerspiegelt.