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 <ul> HTML em conjunto com a tag <li>. 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 <ul>. A tag de abertura <ul> indica o início da lista, enquanto a tag de fechamento </ul> sinaliza o final dela. Cada item é inserido entre as tags <li>, 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 <ul> 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
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 <ul> HTML
Insira uma lista não ordenada em HTML na seção <body> da sua página web para que ela seja exibida corretamente. A tag de abertura <ul> e a de fechamento </ul> indicam o início e o fim da lista, enquanto cada item individual é definido por uma tag de abertura <li> e outra de fechamento </li>. A sintaxe básica de uma lista não ordenada em HTML é a seguinte:
<body>
<ul>
<li>Item da lista 1</li>
<li>Item da lista 2</li>
<li>Item da lista 3</li>
<li>…</li>
</ul>
</body>Nesse exemplo, nenhum marcador específico foi definido para a lista. Sendo assim, a página exibirá o marcador HTML padrão.
- Fique online com 99,99% de tempo de atividade e segurança robusta
- Aumente o desempenho com um clique à medida que o tráfego cresce
- Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana
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 <ul> HTML. Para fazer isso, basta incorporar listas HTML não ordenadas adicionais a um elemento <ul> existente. O exemplo a seguir mostra como criar duas listas aninhadas:
<body>
<p><strong>Lista HTML não ordenada:</strong></p>
<ul>
<li>Frutas
<ul>
<li>Maçãs
<ul>
<li>Verde</li>
<li>Gala</li>
<li>Fuji</li>
</ul>
</li>
<li>Laranjas
<ul>
<li>Baía</li>
<li>Sanguínea</li>
<li>Pêra</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>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:
Como personalizar símbolos em uma lista <ul> 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:
<body>
<p><strong>Maçãs</strong></p>
<ul style="list-style-type:circle;">
<li>Verde</li>
<li>Gala</li>
<li>Fuji</li>
</ul>
</body>Para definir estilos e reutilizá-los de forma abrangente, é recomendável fazer uma configuração separada em um arquivo CSS ou na tag <style> dentro da seção <head>. Assim, o conteúdo e suas definições de estilo ficarão separados, facilitando a manutenção do código.