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
|
---
title: <i>
slug: Web/HTML/Element/i
tags:
- HTML
- Textformatierung
- semantisch
- tag
translation_of: Web/HTML/Element/i
---
<h2 id="Zusammenfassung">Zusammenfassung</h2>
<p>Das <strong>HTML-Element <code><i></code> </strong>hebt einen Teil vom Rest eines Textes ab um ein Beispiel, einen Fachbegriff, einen Ausdruck aus einer Fremdsprache oder die Gedanken einer fiktionalen Figur deutlicher vom Rest abzugrenzen. Das Element stellt diese Inhalte dann <em>kursiv</em> dar.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">I</a>nhaltliche Kategorien</th>
<td>
<p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließtexte</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Ausdruckstext,</a> greifbarer/offensichtlicher Inhalt</p>
</td>
</tr>
<tr>
<th scope="row">Zugelassener Inhalt</th>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Phrasing_content/">ausdrückender Inhalt</a></td>
</tr>
<tr>
<th scope="row">Unterdrückte Tags</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Erlaubte elterliche Elemente</th>
<td>
<p>Sämtliche Elemente mit <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">ausdrückendem Inhalt</a>.<br>
<br>
(Textform!)</p>
</td>
</tr>
<tr>
<th scope="row">DOM-Schnittstelle</th>
<td>{{domxref("HTMLElement")}} Seit Gecko 1.9.2 (Firefox 4) inklusive unterstützt Firefox die {{domxref("HTMLSpanElement")}}-Schnittstelle für dieses Element.</td>
</tr>
</tbody>
</table>
<h2 id="Attribute">Attribute</h2>
<p>Dieses Element unterstützt nur die <a href="/en-US/docs/Web/HTML/Global_attributes">Globalen Attribute</a>.</p>
<h2 id="Beispiel">Beispiel</h2>
<pre class="brush: html"><p>Der lateinische Ausdruck <i>Veni, vidi, vici</i> wird häufig in Musik, Kunst und Literatur verwendet.</p>
</pre>
<h3 id="Result" name="Result">Ergebnis</h3>
<p>Der lateinische Ausdruck <em>Veni, vidi, vici</em> wird häufig in Kunst, Musik und Literatur verwendet. </p>
<h2 id="Notizen">Notizen</h2>
<p>In früheren Versionen der HTML-Spezifikation war der <code><i></code>-Tag nur ein Element um den angezeigten Text zu formatieren, ähnlich wie der <code><b>-T</code>ag für die Darstellung von fettem Text verwendet wird.</p>
<p>Diese Funktion wurde zunehmend unüblicher: Heute werden <code><i></code>-Tags häufiger für semantische Abgrenzungen als für Textformatierungen verwendet. Trotzdem stellen die Browser den Text kursiv dar, auch wenn diese Funktion per Definiton nicht mehr erwünscht ist.</p>
<p>Wir empfehlen, dieses Element nur zu verwenden, wenn kein anderes passenderes Element gefunden werden kann. Zum Beispiel:</p>
<ul>
<li>Benutzen Sie das Element {{HTMLElement("em")}}, um Betonungen darszustellen.</li>
<li>Benutzen Sie das Element {{HTMLElement("strong")}}, um einen Textabschnitt als wichtig darzustellen.</li>
<li>Benutzen Sie das Element {{HTMLElement("mark")}}, um Relevanz darzustellen.</li>
<li>Um ein kreatives Werk (ein Buch, ein Bühnenwerk oder ein Musikstück) kennzuzeichnen, wird das Element "{{HTMLElement("cite")}}" verwendet.</li>
<li>Verwenden Sie das Element {{HTMLElement("dfn")}}, um definierende Instanzen kennzuzeichnen.</li>
</ul>
<p>Eine gute Idee ist es auch, das <strong>class</strong>-Attribut zu verwenden, um zu definieren, warum und wie das Element verwendet wird.</p>
<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '<i>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '<i>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funktion</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>grundlegend</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Funktion</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>grundlegend</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>{{HTMLRef}}</p>
|
