---
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="/pt-BR/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="Browser_compatibility">Compatibilidade com 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>