HTML - Listas não ordenadas

João E. -

Criando uma Lista Não Ordenada

Para criar uma lista não ordenada em HTML, use a tag <ul>, que significa "unordered list" (lista não ordenada). A tag <ul> é um contêiner para itens de lista, representados pela tag <li>. Cada tag <li> representa um único item na lista.

Exemplo: Lista Não Ordenada Básica em HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Quando exibido em um navegador web, este código mostrará uma lista com marcadores contendo três itens:

  • Item 1
  • Item 2
  • Item 3

O estilo padrão de marcador para listas não ordenadas é um disco sólido, mas você pode alterar o estilo do marcador usando CSS, o que abordaremos na próxima seção.

As tags <li> devem ser filhas diretas da tag <ul>. Você não pode ter outros elementos ou texto diretamente dentro da tag <ul> sem envolvê-los em tags <li>.

Você pode adicionar quantos itens de lista forem necessários dentro da tag <ul>. Cada tag <li> criará um novo marcador e uma nova linha para o item de lista correspondente.

Estilizando Listas Não Ordenadas

Por padrão, as listas não ordenadas em HTML são exibidas com marcadores de disco sólido. No entanto, você pode alterar a aparência desses marcadores usando CSS para combinar com o design do seu site ou para melhorar o visual da lista.

Para mudar o estilo do marcador de uma lista não ordenada, use a propriedade list-style-type no CSS. Esta propriedade aceita diversos valores que determinam a forma ou o estilo dos marcadores. Alguns valores comumente usados são:

Valor Descrição
disc O marcador padrão de disco sólido
circle Um marcador de círculo vazio
square Um marcador de quadrado sólido
none Remove os marcadores

Exemplo: Mudar o estilo do marcador de uma lista não ordenada usando CSS

<html>
<head>
  <style>
    ul.circle {
      list-style-type: circle;
    }
    ul.square {
      list-style-type: square;
    }
    ul.none {
      list-style-type: none;
    }
  </style>
</head>
<body>
  <ul class="circle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <ul class="square">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <ul class="none">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

Além de mudar o estilo do marcador, você também pode personalizar a cor e o tamanho dos marcadores usando CSS. Para alterar a cor, use a propriedade color nos elementos <li> ou no próprio elemento <ul>. Para alterar o tamanho, você pode usar a propriedade font-size nos elementos <li>.

Exemplo: Alterando a cor e o tamanho dos marcadores

<html>
<head>
  <style>
    ul {
      color: blue;
    }
    li {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

Neste exemplo, os marcadores serão exibidos na cor azul, e os itens da lista terão um tamanho de fonte de 20 pixels.

Lembre-se de que você pode direcionar listas não ordenadas ou itens de lista específicos usando classes ou IDs CSS para aplicar estilos diferentes a diferentes listas na mesma página.

Ao usar CSS para estilizar suas listas não ordenadas, você pode deixá-las com uma aparência agradável, adequadas ao design do seu site e melhorar a experiência do usuário.

Aninhamento de Listas Não Ordenadas

Em HTML, você pode criar listas não ordenadas aninhadas colocando um elemento <ul> dentro de um elemento <li> de outra lista não ordenada. Isso permite criar uma hierarquia de listas e itens de sublistas.

Ao aninhar listas não ordenadas, é importante pensar sobre o recuo e a hierarquia dos itens da lista. Cada lista aninhada deve ser recuada para mostrar que é uma sublista do item da lista pai. Isso ajuda a tornar a estrutura da lista clara e fácil de entender.

Exemplo de Lista Não Ordenada Aninhada

<ul>
  <li>Frutas
    <ul>
      <li>Maçãs</li>
      <li>Bananas</li>
      <li>Laranjas</li>
    </ul>
  </li>
  <li>Legumes
    <ul>
      <li>Cenouras</li>
      <li>Brócolis</li>
      <li>Espinafre</li>
    </ul>
  </li>
  <li>Laticínios
    <ul>
      <li>Leite</li>
      <li>Queijo</li>
      <li>Iogurte</li>
    </ul>
  </li>
</ul>

Temos uma lista não ordenada principal com três itens: Frutas, Legumes e Laticínios. Cada um desses itens contém uma lista não ordenada aninhada com itens mais específicos relacionados à categoria pai.

Quando renderizada em um navegador web, esta lista aninhada se parecerá com:

  • Frutas
    • Maçãs
    • Bananas
    • Laranjas
  • Legumes
    • Cenouras
    • Brócolis
    • Espinafre
  • Laticínios
    • Leite
    • Queijo
    • Iogurte

Observe como os itens da sublista são recuados para mostrar que pertencem ao item da lista pai. Isso torna clara a hierarquia da lista e ajuda os usuários a entenderem a relação entre as categorias principais e seus subitens.

Você pode aninhar listas não ordenadas tão profundamente quanto necessário, mas geralmente é melhor manter o aninhamento em um nível razoável para evitar tornar a lista muito complexa ou difícil de seguir. Se você se encontrar aninhando listas com mais de 2 ou 3 níveis de profundidade, considere se pode haver uma maneira melhor de organizar a informação.

Ao estilizar listas não ordenadas aninhadas com CSS, você pode direcionar as sublistas separadamente da lista principal. Por exemplo, você poderia usar um estilo de marcador ou cor diferente para sublistas para ajudá-las a se destacar ou criar uma hierarquia visual.

Listas não ordenadas aninhadas são uma ferramenta útil para organizar e apresentar informações de maneira clara e estruturada. Usando recuo e hierarquia, você pode tornar listas complexas mais fáceis de entender e seguir.

Considerações de Acessibilidade

Ao criar listas não ordenadas em HTML, é importante ter em mente a acessibilidade. Isso significa garantir que suas listas sejam fáceis de entender e navegar para todos os usuários, incluindo aqueles que usam tecnologias assistivas como leitores de tela.

Um aspecto fundamental para criar listas não ordenadas acessíveis é usar itens de lista significativos. Cada elemento <li> deve conter texto claro e conciso que transmita o propósito ou conteúdo daquele item da lista. Evite usar itens de lista vazios ou itens que contenham apenas imagens ou ícones sem alternativas de texto.

Exemplo: Lista Não Ordenada Básica

<ul>
  <li>Início</li>
  <li>Sobre Nós</li>
  <li>Produtos</li>
  <li>Contato</li>
</ul>

Cada item da lista contém uma única palavra descritiva que indica claramente o propósito daquele item na lista, o que é útil para usuários que dependem de leitores de tela para navegar na página.

Outra consideração importante é manter a estrutura de suas listas não ordenadas simples e clara. Use um único elemento <ul> para conter todos os itens da lista e certifique-se de que cada elemento <li> seja um filho direto do <ul>. Evite aninhar outros elementos ou conteúdo dentro dos elementos <li>, a menos que seja necessário para o significado ou estrutura da lista.

Exemplo: Lista Não Ordenada Aninhada

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
</ul>

Este exemplo mostra uma estrutura de lista simples com três itens principais, onde o terceiro item contém uma sublista aninhada. A estrutura é clara e fácil de seguir, mesmo para usuários que não podem ver o layout visual da lista.

É melhor evitar muito aninhamento de listas não ordenadas. Embora seja aceitável usar listas aninhadas para mostrar relações hierárquicas ou organizar informações complexas, muito aninhamento pode tornar a lista difícil de seguir e entender, especialmente para usuários que dependem de tecnologias assistivas.

Como regra geral, tente limitar o aninhamento a não mais que 2 ou 3 níveis de profundidade. Se você perceber que precisa de mais do que isso, considere se pode haver uma maneira melhor de organizar ou apresentar as informações, como dividi-las em múltiplas listas ou usar cabeçalhos e parágrafos.

Exemplos e Usos

Listas não ordenadas são usadas em muitos lugares em sites e conteúdos digitais. Aqui estão algumas maneiras como as listas não ordenadas ajudam:

Listas de Recursos

Ao mostrar os recursos ou benefícios de um produto, serviço ou conceito, as listas não ordenadas são ótimas para apresentar as informações em um formato conciso e fácil de ler.

Exemplo: Lista de Recursos Principais

<h3>Recursos Principais:</h3>
<ul>
  <li>Design responsivo</li>
  <li>Fácil personalização</li>
  <li>Amigável para SEO</li>
  <li>Suporte 24/7</li>
</ul>

Esta lista não ordenada mostra os recursos principais de um produto ou serviço, facilitando para os leitores entenderem rapidamente os pontos principais.

Listas com Marcadores em Artigos

Ao escrever artigos, posts de blog ou qualquer forma de conteúdo, o uso de marcadores pode ajudar a quebrar parágrafos longos e tornar as informações mais fáceis de ler e entender para os leitores.

Exemplo: Dicas de Estratégia de Mídias Sociais

<p>Para criar uma boa estratégia de mídias sociais, considere o seguinte:</p>
<ul>
  <li>Defina seu público-alvo</li>
  <li>Estabeleça metas e objetivos claros</li>
  <li>Escolha as plataformas de mídia social adequadas</li>
  <li>Crie conteúdo envolvente e relevante</li>
  <li>Monitore e analise seu desempenho</li>
</ul>

Ao usar uma lista não ordenada, os principais pontos são claramente separados e fáceis de ler, tornando o conteúdo mais envolvente e acionável para o leitor.

Lembre-se de manter os itens da lista curtos, relevantes e fáceis de entender. Use texto significativo dentro dos elementos <li> e considere usar CSS para estilizar os marcadores e alterar a aparência de suas listas não ordenadas para combinar com o design e a identidade visual do seu site.