# ul HTML: Como criar uma lista não ordenada em HTML
Uma lista não ordenada em HTML possibilita exibir diferentes conteúdos nas suas páginas em um formato estruturado e sem numeração. Para criar uma lista, você deve usar a tag `
` HTML em conjunto com a tag `
`. Por meio do atributo `style`, é possível definir qual tipo de marcador será exibido ao lado de cada item listado.
## O que é lista não ordenada em HTML e por que ela deve ser criada?
Lista não ordenada em HTML é um tipo de lista é um tipo de lista em que a ordem dos elementos não faz diferença. Essas listas são criadas usando a tag HTML `
`. A tag de abertura `
` indica o início da lista, enquanto a tag de fechamento `
` sinaliza o final dela. Cada item é inserido entre as tags `
`, um padrão usado em listas HTML. Não há limite para o número de itens adicionados a cada lista.
Listas com a tag `
` HTML são perfeitas para estruturar diversos tipos de conteúdo, incluindo:
- **Listas de afazeres**: listas de verificação, listas de compras, listas de tarefas
- **Listas de recursos**: listas de recursos de produtos ou atributos de serviços
- **Listas de links**: coleções de links para sites externos ou para perfis em redes sociais
- **Listas de tags**: listas com as tags mais populares
- **Listas de preços**: exibição de preços de serviços ou de produtos no formato de lista
- **Listas de compromissos**: exibição estruturada dos próximos compromissos agendados
Dica O oposto de uma lista não ordenada em HTML é uma lista ordenada em HTML, caracterizada por apresentar **itens numerados** que seguem uma hierarquia específica.
## Sintaxe e usos da tag `
` HTML
Insira uma lista não ordenada em HTML na seção `` da sua página web para que ela seja exibida corretamente. A tag de abertura `
` e a de fechamento `
` indicam o início e o fim da lista, enquanto cada item individual é definido por uma tag de abertura `
` e outra de fechamento `
`. A sintaxe básica de uma lista não ordenada em HTML é a seguinte:
```html
Item da lista 1
Item da lista 2
Item da lista 3
…
hash_814371fa9a44e2e59ddbb5fc19a26bdc002f92fc
```
Nesse exemplo, nenhum marcador específico foi definido para a lista. Sendo assim, a página exibirá o marcador HTML padrão.
## Como criar uma lista não ordenada aninhada em HTML
Embora listas com estrutura hierárquica geralmente sejam implementadas com listas ordenadas, também é possível criar listas aninhadas com a tag `
` HTML. Para fazer isso, basta incorporar listas HTML não ordenadas adicionais a um elemento `
` existente. O exemplo a seguir mostra como criar duas listas aninhadas:
```html
Lista HTML não ordenada:
Frutas
Maçãs
Verde
Gala
Fuji
Laranjas
Baía
Sanguínea
Pêra
hash_814371fa9a44e2e59ddbb5fc19a26bdc002f92fc
```
A categoria principal “Frutas” é dividida nas subcategorias “Maçãs” e “Laranjas”, que se expandem para conter diferentes variedades de cada. No navegador, a lista será exibida assim:
[](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/lista-nao-ordenada-html-exemplo.png) Três elementos ul HTML diferentes foram usados neste exemplo ## Como personalizar símbolos em uma lista `
` HTML com `list-style-type`
Se você usar a propriedade `list-style-type` em CSS, consegue alterar os símbolos exibidos em uma lista não ordenada em HTML. Essa mudança pode ser feita por meio do atributo HTML `style` ou com o uso de uma folha de estilos externa. Os seguintes símbolos podem ser especificados:
Atributo `list-style-type`
Descrição
`disc`
Círculo com preenchimento. Esse é o padrão de HTML se nenhum atributo `style` for especificado
`circle`
Círculo sem preenchimento
`square`
Quadrado
`none`
Sem símbolo
Usando o exemplo de lista da seção anterior, vamos especificar que os marcadores serão círculos sem preenchimento:
```html
Maçãs
Verde
Gala
Fuji
hash_814371fa9a44e2e59ddbb5fc19a26bdc002f92fc
```
Nota Para definir estilos e reutilizá-los de forma abrangente, é recomendável fazer uma configuração separada em um arquivo CSS ou na tag `