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
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 <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>
html

Nesse exemplo, nenhum marcador específico foi definido para a lista. Sendo assim, a página exibirá o marcador HTML padrão.

Hospedagem que se adapta às suas ambições
  • 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>
html

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:

Imagem: Exemplo de lista não ordenada em HTML
Três elementos ul HTML diferentes foram usados neste exemplo

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>
html
Nota

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.

Este artigo foi útil?
Ir para o menu principal