files/pt-br/web/html/element/li/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
165
166
167
168
169
170
171
172
173
174
175
176
177

---
title: <li>
slug: Web/HTML/Element/li
tags:
  - Elementos
  - Guía
  - HTML
  - Indentação
  - Referencia
  - listagem <li>
  - menu+HTML
translation_of: Web/HTML/Element/li
---
<h2 id="Resumo"><span style="font-size: 1.628em;">Resumo</span></h2>

<p>O <strong><em>elemento</em></strong> <strong><em>HTML</em> <code style="font-style: normal;">&lt;li&gt;</code></strong>  (ou a Lista dos Itens de um elemento HTML) é usado para representar um item que faz parte de uma lista. Este item deve estar contido em um elemento pai: uma lista ordenada<code> </code>({{HTMLElement("ol")}}),<code> </code>uma lista desordenada<code> </code>({{HTMLElement("ul")}})<code>, </code>ou um menu<code> </code>({{HTMLElement("menu")}})<code> </code>e representa uma única entidade dessa lista. Em menus e listas desordenadas a relação de itens é exibida, normalmente, usando pontos de marcação (as bolinhas). Em listas ordenadas eles são, comumente, mostrados com algum <span class="short_text" id="result_box" lang="pt"><span>contador</span> <span>ascendente - como um número, ou letra - à sua esquerda.</span></span></p>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo </a></dfn><span class="short_text" id="result_box" lang="pt"><span>Nenhuma</span></span>.</li>
 <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flutuantes</a>.</li>
 <li><dfn>Omissão de etiquetas (<em>tags</em>)</dfn> <span id="result_box" lang="pt"><span>A</span> <span>etiqueta de fim</span> <span>pode</span> <span>ser</span> <span>omitida se esta for </span><span>imediatamente</span></span><span lang="pt"> <span>seguida</span> <span>por um outro</span> <span>elemento</span></span><code> </code>{{HTMLElement("li")}}<code>, </code>ou se <span class="short_text" id="result_box" lang="pt"><span>não houver</span> <span>mais conteúdo</span> <span>no seu</span> <span>elemento pai.</span></span></li>
 <li><dfn>Elementos pai permitidos</dfn> Um elemento<code> </code>{{HTMLElement("ul")}},<code> </code>{{HTMLElement("ol")}}<code>, </code>ou<code> </code>{{HTMLElement("menu")}}. Embora seja um uso incomum, o obsoleto<code> </code>{{HTMLElement("dir")}}<code> pode</code> <code>ser</code> <code>pai, </code>também.</li>
 <li><dfn>Interface DOM</dfn> {{domxref("HTMLLIElement")}}</li>
</ul>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd><span id="result_box" lang="pt"><span>Este atributo de</span></span><span lang="pt"><span> número inteiro</span> <span>indica o valor</span> <span>ordinal</span> <span>atual</span></span> do item na lista, definido pelo elemento<code> </code>{{HTMLElement("ol")}}.<code> </code>O único valor possível para este atributo é um número, ainda que a lista seja exibida com algarismos romanos, ou letras. A lista de itens que virá em seguida continuará a ser numerada a partir desta posição. O atributo <strong>value</strong> não tem significado para listas desordenadas<code> </code>({{HTMLElement("ul")}}),<code> </code>nem para menus<code> </code>({{HTMLElement("menu")}}).
 <div class="note"><strong>Nota</strong>: Este atributo, abandonado na HTML4, foi reintroduzido na HTML5.</div>

 <div class="note">
 <p><strong>Nota:</strong> Antes de<code> </code>{{Gecko("9.0")}},<code> </code>os valores negativos eram, incorretamente, convertidos a 0. A partir de<code> </code>{{Gecko("9.0")}}<code> </code>todos os valores inteiros são analisados corretamente.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
 <dd><span id="result_box" lang="pt"><span>A característica deste</span> <span>atributo é</span> <span>indicar o tipo</span> <span>de numeração</span></span>:
 <ul>
  <li><code>a</code>: letras minúsculas</li>
  <li><code>A</code>: letras maiúsculas</li>
  <li><code>i</code>: algarismos romanos minúsculos</li>
  <li><code>I</code>: algarismos romanos maiúsculos</li>
  <li><code>1</code>: números</li>
 </ul>
 <span id="result_box" lang="pt"><span>Este tipo</span> <span>substitui</span> <span>o utilizado pelo</span> <span>seu elemento pai</span></span><code> </code>{{HTMLElement("ol")}},<code> </code>qualquer que seja.

 <div class="note"><strong>Nota de utilização:</strong> Este atributo <span class="short_text" id="result_box" lang="pt"><span>foi preterido. Em seu lugar</span></span><span class="short_text" lang="pt"><span> use a propriedade </span></span>CSS<code> </code>{{cssxref("list-style-type")}}.</div>
 </dd>
</dl>

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: html">&lt;ol&gt;
    &lt;li&gt;primeiro item&lt;/li&gt;
    &lt;li&gt;segundo item&lt;/li&gt;
    &lt;li&gt;terceiro item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>A saída HTML acima será:</p>

<ol>
 <li>primeiro item</li>
 <li>segundo item</li>
 <li>terceiro item</li>
</ol>

<pre class="brush: html">&lt;ul&gt;
    &lt;li&gt;primeiro item&lt;/li&gt;
    &lt;li&gt;segundo item&lt;/li&gt;
    &lt;li&gt;terceiro item&lt;/li&gt;
&lt;/ul&gt;</pre>

<ul>
 <li>primeiro item</li>
 <li>segundo item</li>
 <li>terceiro item</li>
</ul>

<p>Para exemplos mais detalhados veja as páginas<code> </code><a href="/en-US/docs/Web/HTML/Element/ol#Examples">&lt;ol&gt;</a><code> </code>e<code> </code><a href="/en-US/docs/Web/HTML/Element/ul#Examples">&lt;ul&gt;</a>.</p>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Observação</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th><span class="short_text" id="result_box" lang="pt"><span>Recurso</span></span></th>
   <th>  Chrome</th>
   <th>  Firefox (Gecko)</th>
   <th>   Internet Explorer</th>
   <th>   Opera</th>
   <th>   Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</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><span class="short_text" id="result_box" lang="pt"><span>Recurso</span></span></th>
   <th>  Android</th>
   <th>Firefox Móvel (Gecko)</th>
   <th>IE Móvel</th>
   <th>Opera Móvel</th>
   <th>Safari Móvel</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também:</h2>

<ul>
 <li>Outros elementos HTML parentes:<code> </code>{{HTMLElement("ul")}},<code> </code>{{HTMLElement("li")}},<code> </code>{{HTMLElement("menu")}}<code> </code>e o obsoleto<code> </code>{{HTMLElement("dir")}};</li>
 <li>Propriedades CSS que podem ser úteis, especialmente para dar um charme ao elemento<code> &lt;li&gt;</code>:
  <ul>
   <li>a propriedade<code> </code>{{cssxref("list-style")}},<code> </code><span class="short_text" id="result_box" lang="pt"><span>para escolher</span> <span>a maneira como os</span> posicionamentos <span>serão exibidos</span></span>,</li>
   <li><a href="/Web/Guide/CSS/Counters">contadores CSS</a> <span class="short_text" id="result_box" lang="pt"><span>para controlar</span> <span>listas aninhadas</span> <span>complexas</span></span>,</li>
   <li>a propriedade<code> </code>{{cssxref("margin")}},<code> </code>para controlar a indentação dos itens da lista.</li>
  </ul>
 </li>
</ul>

<div>{{HTMLRef}}</div>