files/de/web/html/global_attributes/title/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

---
title: title
slug: Web/HTML/Globale_Attribute/title
tags:
  - Globales Attribut
  - HTML
  - Referenz
  - Referenzen
translation_of: Web/HTML/Global_attributes/title
---
<p>{{HTMLSidebar("Global_attributes")}}</p>

<p>Der <strong>title</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globales Attribut</a> beinhaltet einen Text mit Informationen über das Element zu welchem es gehört. Diese Informationen werden dem Benutzer üblicherweise (aber nicht nur) als Tooltip angezeigt. Hier sind einige typische Beispiele für dieses Attribut:</p>

<ul>
 <li>Link: Der Titel oder die Beschreibung des verlinkten Dokuments</li>
 <li>Media Elemente, (z.B.: ein Bild): eine Beschreibung oder Quellenangabe</li>
 <li>Paragraph: eine Fusszeile oder ein Kommentar über den Paragraphen</li>
 <li>Zitate: Informationen über den Autor, usw.</li>
</ul>

<p>Wenn dieses Attribut weggelassen wird, ist das <code>title</code> Attribut des nächsten Vorgängers des Elements gültig (und kann somit als Tooltip für das Element verwendet werden). Wenn das Attribut als leerer String gesetzt wird, wird das <code>title</code> Attribut des Vorgängers explizit außer Kraft gesetzt (und sollte nicht als Tooltip für das Element verwendet werden).</p>

<p>Zusätzliche Semantics sind für die <code>title</code> Attribute der {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} und {{ HTMLElement("menuitem") }} Elemente definiert.</p>

<p>Das <code>title</code> Attribut darf Mehrzeilig sein. Jede eingefügte  <code>U+000A LINE FEED</code> (<code>LF</code>) repräsentiert eine solche newline. Aber Achtung! Dies bedeutet, dass:</p>

<pre class="brush: html">&lt;p&gt;Newlines in title should be taken into account,like this &lt;abbr title="This is a
multiline title"&gt;example&lt;/abbr&gt;.&lt;/p&gt;
</pre>

<p>einen zweizeiligen Titel definiert.</p>

<h2 id="Bedenken_bezüglich_des_barrierefreien_Internet">Bedenken bezüglich des barrierefreien Internet</h2>

<p>Die Nutzung des <code>title</code> Attributs ist sehr problematisch für:</p>

<ul>
 <li>Menschen, die nur Berührungsgeräte benutzen</li>
 <li>Menschen, die das Internet nur mit dem Keyboard navigieren</li>
 <li>Menschen, die mit unterstützenden Technologien wie einem Bildschirmleser auf das Internet zugreifen</li>
 <li>Menschen mit Beeinträchtigungen in der Feinmotorik</li>
 <li>Menschen mit kognitiven Bedenken</li>
</ul>

<p>Dies kann besonders auf inkonsistenten Browser Support zurückgeführt werden. Dies ist des Weiteren ein Problem, da unterstützende Technologien zu mehr Komplexität beim Browser-Rendering der Seite führen. Falls ein Tooltip Effekt gewollt sein sollte, ist es besser eine der folgenden Browsermethoden zu benutzen.</p>

<p> </p>

<ul>
 <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li>
 <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li>
 <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips &amp; Toggletips - Inclusive Components</a></li>
</ul>

<p> </p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>Multi-line support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatGeckoDesktop(12)}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>Multi-line support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(12)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
 <li>{{domxref("HTMLElement.title")}} welches dieses Attribut reflektiert</li>
</ul>