<ul>
A tag <ul> é um elemento HTML que representa uma lista não ordenada.
Este elemento tem como característica criar listas não ordenadas no HTML, ou seja, ao invés de apresentar uma lista com numeração a lista será apresentada com marcadores.
Como utilizar a tag <ul>?
Para criar uma lista não ordenada deve ser utilizada a tag <ul> junto com a tag <li>.
A tag <li> é definida como os itens a serem criados na lista, ou seja, deve ser utilizado uma <li> para cada item criado na lista.
<ul>: na prática
// Lista não ordenada com três itens:
<ul>
<li>Café</li>
<li>Suco</li>
<li>Leite</li>
</ul>
Sintaxe
<ul>
<li>item da lista…</li>
</ul>
<ul>: substituindo atributos por CSS
O elemento <ul> possui dois atributos globais:
- compact -> anteriormente utilizado para aumentar ou diminuir o espaçamento entre os itens da lista;
- type -> anteriormente utilizado para definir o tipo de marcador da lista.
Entretanto, por recomendação da documentação oficial, esses atributos não devem mais ser utilizados.
Com essa mudança a nova recomendação foi utilizar o CSS para fazer as mudanças nas listas. Para isso foi estabelecido o uso de duas propriedades CSS:
- line-height -> propriedade CSS utilizada para substituir o atributo compact. Define o espaçamento entre as linhas (itens) da lista;
- list-style-type -> propriedade CSS utilizada para substituir o atributo type. Define o tipo de marcador que vai aparecer na lista.
Exemplos de uso da tag <ul>
Exemplo 1
No Código 1 demonstramos um exemplo simples de uma lista não ordenada.
<ul>
<li>primeiro item</li>
<li>segundo item</li>
<li>terceiro item</li>
</ul>
Exemplo 2
No Código 2 demonstramos um exemplo de uma lista não ordenada aninhada.
<ul>
<li>Uniforme</li>
<li>Livros
<ul>
<li>Matemática</li>
<li>Português
<ul>
<li>Gramática</li>
<li>Literatura</li>
<li>Ortografia</li>
</ul>
</li>
<li>História</li>
</ul>
</li>
<li>Material Escolar</li>
</ul>
Note que neste exemplo foram criadas listas dentro de outra lista, fazendo assim elas ficarem aninhadas.
Exemplo 3
Nos Códigos 3 e 4 demonstramos três listas não ordenadas, cada uma com um tipo diferente de marcador.
<h1>Listas com diferentes tipos de marcadores com o uso do CSS</h1>
<ul class="primeiraLista">
<li>Refrigerante</li>
<li>Café</li>
<li>Leite</li>
</ul>
<ul class="segundaLista">
<li>Refrigerante</li>
<li>Café</li>
<li>Leite</li>
</ul>
<ul class="terceiraLista">
<li>Refrigerante</li>
<li>Café</li>
<li>Leite</li>
</ul>
.primeiraLista {
list-style-type: circle;
}
.segundaLista {
list-style-type: disc;
}
.terceiraLista {
list-style-type: square;
}
Note que no exemplo acima foi criado um código CSS e nele foi inserido (através das classes correspondentes ao elemento <ul>) a propriedade list-style-type para definir o tipo de marcador que cada lista terá:
- Para a primeira lista foi definido o marcador em estilo de círculo;
- Para a segunda lista foi definido o marcador em estilo de disco;
- E para a terceira lista foi definido o marcado em estilo de quadrado.
Exemplo 4
Nos Códigos 5 e 6 demonstraremos duas listas não ordenadas que terão a altura das suas linhas (itens) modificadas com o uso do CSS.
<h1>Modificando a altura das linhas (itens) de uma lista com o CSS</h1>
<p>Lista com a altura das linhas (itens) aumentada:</p>
<ul class="primeiraLista">
<li>Refrigerante</li>
<li>Café</li>
<li>Leite</li>
</ul>
<p>Lista com a altura das linhas (itens) reduzida:</p>
<ul class="segundaLista">
<li>Refrigerante</li>
<li>Café</li>
<li>Leite</li>
</ul>
.primeiraLista {
line-height: 180%;
}
.segundaLista {
line-height: 80%;
}
Note que no exemplo acima foi criado um código CSS e nele utilizamos a propriedade line-height para definir as mudanças na altura das linhas das duas listas:
- Na primeira lista a altura das linhas foi
definida como:
- line-height: 180%
- Na segunda lista a altura das linhas foi
definida como:
- line-height: 80%
Compatibilidade com navegadores
A tag <ul> é suportada em todos os navegadores apresentados na tabela abaixo:
| <ul> | Chrome | Mozilla Firefox | Edge / IE | Opera | Safari |
| Sim | Sim | Sim | Sim | Sim |
