HTML <li> Tag
Exemplo
Uma lista HTML ordenada (<ol>) e uma não ordenada (<ul>):
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A <li>tag define um item de lista.
A <li>tag é usada dentro de listas ordenadas ( <ol> ), listas não ordenadas ( <ul> ) e em listas de menus ( <menu> ).
Em <ul> e <menu>, os itens da lista geralmente serão exibidos com marcadores.
Em <ol>, os itens da lista geralmente serão exibidos com números ou letras.
Dica: Use CSS para estilizar listas .
Suporte ao navegador
| Element | |||||
|---|---|---|---|---|---|
| <li> | Yes | Yes | Yes | Yes | Yes |
Atributos
| Attribute | Value | Description |
|---|---|---|
| value | number | Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number |
Atributos Globais
A <li>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <li>tag também suporta os atributos de evento em HTML .
Mais exemplos
Exemplo
Uso do atributo value em uma lista ordenada:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Exemplo
Defina diferentes tipos de estilo de lista (com CSS):
<ol>
<li>Coffee</li>
<li
style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li
style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>
Exemplo
Crie uma lista dentro de uma lista (uma lista aninhada):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Exemplo
Crie uma lista aninhada mais complexa:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Páginas relacionadas
Tutorial HTML: Listas HTML
Referência HTML DOM: objeto Li
Tutorial de CSS: listas de estilo
Configurações padrão de CSS
A maioria dos navegadores exibirá o <li>elemento com os seguintes valores padrão:
li {
display: list-item;
}