HTML <ul> Tag
Exemplo
Uma lista HTML não ordenada:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A <ul>tag define uma lista não ordenada (com marcadores).
Use a <ul>tag junto com a tag <li> para criar listas não ordenadas.
Dica: Use CSS para estilizar listas .
Dica: Para listas ordenadas, use a tag <ol> .
Suporte ao navegador
| Element | |||||
|---|---|---|---|---|---|
| <ul> | Yes | Yes | Yes | Yes | Yes |
Atributos Globais
A <ul>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <ul>tag também suporta os atributos de evento em HTML .
Mais exemplos
Exemplo
Defina os diferentes tipos de estilo de lista (com CSS):
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemplo
Expanda e reduza a altura da linha em listas (com CSS):
<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul
style="line-height:80%">
<li>Coffee</li>
<li>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 Ul
Tutorial de CSS: listas de estilo
Configurações padrão de CSS
A maioria dos navegadores exibirá o <ul>elemento com os seguintes valores padrão:
Exemplo
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}