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
|
---
title: <i>
slug: Web/HTML/Element/i
tags:
- i
translation_of: Web/HTML/Element/i
---
<p>O <strong>elemento HTML <code><i></code> </strong> representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo "itálico".</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdo de fluxo (flow content)</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo com texto (phrasing content)</a>, conteúdo palpável (palpable content).</td>
</tr>
<tr>
<th scope="row">Conteúdo permitido</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo com texto (phrasing content)</a>.</td>
</tr>
<tr>
<th scope="row">Omissão de tag</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Pais permitidos</th>
<td>Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo com texto (phrasing content)</a>.</td>
</tr>
<tr>
<th scope="row">ARIA roles permitidos</th>
<td>Qualquer um.</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Esse elemento inclui apenas <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>
<h2 id="Exemplo">Exemplo</h2>
<pre class="brush: html"><p>A expressão em latim <i class="latin">Veni, vidi, vici</i> é frequentemente
mencionada na música, na arte e na literatura.</p>
</pre>
<h3 id="Resultado">Resultado</h3>
<p>A expressão em latim <em>Veni, vidi, vici</em> é frequentemente mencionada na música, na arte e na literatura.</p>
<h2 id="Notas">Notas</h2>
<p>Nas primeiras versões das especificações HTML, a tag <code><i></code> era usada apenas para apresentar textos em itálico, assim como a tag <code><b></code> tag era usada para mostrar textos em negrito. Isso não é mais verdade, já que, atualmente, essas tags definem a semântica, e não mais aparência tipográfica.<code> A tag <i></code> pode representar uma parte do texto com uma diferença semântica, na qual a representação tipográfica padrão é no tipo itálico. Isso significa que os navegadores continuarão a apresentar o conteúdo em itálico, mas, de acordo com o que é definido, isso não é mais requerido.</p>
<p>Use esse elemento somente quando não existir mais nenhum outro elemento com semântica apropriada. Por exemplo:</p>
<ul>
<li>Use {{HTMLElement("em")}} para indicar ênfase ou estresse.</li>
<li>Use {{HTMLElement("strong")}} para indicar importância.</li>
<li>Use {{HTMLElement("mark")}} para indicar relevância.</li>
<li>Use {{HTMLElement("cite")}} para citar o nome de um trabalho, tal como um livro, jogo ou música.</li>
<li>Use {{HTMLElement("dfn")}} para m<span class="short_text" id="result_box" lang="pt"><span>arcar a instância de definição de um termo</span></span> .</li>
</ul>
<p>Uma boa ideia é usar o atributo <strong>class</strong> para identificar porque esse elemento está sendo usado. Com isso, caso a apresentação precise ser alterada com o tempo, isso pode ser feito de forma seletiva utilizando as folhas de estilo.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '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">Compatibilidade com navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</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>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>{{HTMLRef}}</p>
<h2 id="Ver_também">Ver também</h2>
<ul>
<li>{{HTMLElement("em")}}</li>
</ul>
|
