Artigo original: HTML List – How to Use Bullet Points, Ordered, and Unordered Lists

Listar itens em uma página da web é uma tarefa comum que você terá que fazer como desenvolvedor para a web. Você pode ter que listar os itens do carrinho de compras, a ordem dos alunos com base em suas notas, os cães com o latido mais alto e assim por diante.

Portanto, você precisa conhecer as diferentes maneiras de listar itens usando HTML. Embora você possa pensar que é algo simples de aprender, é importante. Também é um dos recursos mais usados do HTML no desenvolvimento para a web.

Neste artigo, você aprenderá tudo sobre elementos de listagem do HTML, suas propriedades, estilo e como realmente usá-los para criar listas organizadas. Espero que você ache útil.

Como criar listas em HTML

Em HTML, podemos listar itens de maneira ordenada ou não ordenada.

Uma lista ordenada usa números ou algum tipo de notação que indica uma série de itens.

Por exemplo, uma lista ordenada pode começar com o número 1 e continuar com 2, 3, 4 e assim por diante. Sua lista ordenada também pode começar com a letra A e continuar com B, C, D e assim por diante.

Aqui está um exemplo de uma lista ordenada com os nomes e notas de alunos.

Por outro lado, temos as listas não ordenadas, como as listas de tarefas, por exemplo. Aqui, vemos que gosto tanto de programar que até esqueci do meu café da manhã 🤓.

Existe mais um tipo de lista, chamado de lista de descrições, o qual veremos mais adiante.

Vamos, agora, entrar em mais detalhes sobre a criação de cada tipo de lista em HTML.

Como criar uma lista ordenada em HTML

Em HTML, podemos criar uma lista ordenada usando a tag <ol>. O ol na tag vem do inglês ordered list, que em português quer dizer lista ordenada. Dentro de cada um dos elementos ordenados da lista que fica entre as tags <ol> e </ol>, temos que definir os itens da lista. Podemos definir os itens da lista usando as tags <li> e </li>.

Aqui está a estrutura HTML completa para uma lista ordenada:

<ol>
  <li>Comer</li>
  <li>Programar</li>
  <li>Dormir</li>
</ol>

O resultado da lista ordenada acima seria:

Assim, temos a lista de elementos ordenada, com um número começando por um 1 e aumentando de 1 em 1 – para 2 e 3. Dê uma olhada neste CodePen e veja se consegue alterar a lista e brincar um pouco com ela usando ol e li.

Tipos de listas ordenadas em HTML

Caso você não queira ordenar sua lista por números, pode ordená-la usando o alfabeto, como A, B, C ou a, b, c, por exemplo. Você pode fazer isso especificando o valor do atributo type da tag <ol>.

Você pode ordenar a lista usando as letras A, B, C passando A como o valor do tipo.

<ol type="A">
  <li>Comer</li>
  <li>Programar</li>
  <li>Dormir</li>
</ol>

O resultado terá esta aparência:

Da mesma maneira, você pode usar letras minúsculas, como a para o valor de type para listar os elementos com a, b, c e assim por diante.

<ol type="a">
  <li>Comer</li>
  <li>Programar</li>
  <li>Dormir</li>
</ol>

Este é o resultado:

Se quiser usar os numerais romanos, use o valor I para ter uma lista ordenada por eles:

<ol type="I">
  <li>Comer</li>
  <li>Programar</li>
  <li>Dormir</li>
</ol>

O resultado terá esta aparência:

Aqui vai mais um CodePen para você experimentar com os tipos:

Como usar o atributo start em listas no HTML

O elemento <ol> tem um atributo interessante chamado start. Você pode especificar um valor para ele para iniciar a lista ordenada a partir de um número específico.

Digamos que você queira começar a lista com o número 30 em vez de 1. Você pode especificar o número 30 como o valor do atributo start assim:

<ol start="30">
  <li>Trinta</li>
  <li>Trinta e um</li>
  <li>Trinta e dois</li>
</ol>

O resultado terá esta a aparência:

Fique à vontade para experimentar com o atributo start usando este CodePen:

Aliás, eu compartilhei as mesmas dicas no Twitter recentemente. Você pode encontrar algumas discussões interessantes por lá, também:

Como criar uma lista não ordenada no HTML

Passemos às listas não ordenadas. Usamos a tag <ul> para criar uma lista não ordenada. Como de costume, precisamos usar as tags <li> e </li> entre as tags <ul> e <ul/> para criar os itens da lista.

Os itens da lista (li) dentro da lista não ordenada (ul) vêm com o estilo padrão de marcadores (em inglês, bullet points) – portanto, cada um dos itens da lista é precedido por um ponto preto.

Vamos criar uma lista dos meus recursos favoritos on-line para aprender sobre desenvolvimento para a web:

Meus recursos favoritos para desenvolvimento para a web
<div>
  <ul>
    <li>freeCodeCamp</li>
    <li>CSS-Tricks</li>
    <li>Traversy Media</li>
  </ul>
</div>

Esta será a aparência:

Você pode ver os marcadores para cada um dos itens da lista acima. É possível personalizar isso – e já veremos como.

Antes disso, porém, fique à vontade para usar este CodePen, mudá-lo como quiser e testar.

Como usar os marcadores com links em listas no HTML

Podemos usar os links (tag de âncora <a>) nos itens de lista (tag <li>) para vincular cada um dos itens a uma página qualquer da web, interna ou externa.

Aqui está um exemplo que mostra como vincular cada um dos recursos de programação da web aos seus respectivos sites:

My Favorite Web Development Learning Sites
<div>
  <ul>
    <li>
      <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>
    </li>
    <li>
      <a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a>
    </li>
    <li>
      <a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a>
    </li>
  </ul>
</div>

Esta será a aparência:

Você pode usar o CodePen abaixo para tentar fazer o mesmo. Fique à vontade para modificá-lo como quiser:

Tipos de lista não ordenada em HTML

Como discutimos brevemente, podemos personalizar o estilo de marcador de uma lista não ordenada, que veremos em ação agora. Podemos fazer isso usando a propriedade de estilo CSS chamada list-style.

Há quatro valores principais da propriedade list-style que nos ajudam com essa personalização:

Use o CodePen acima para testar as diversas opções de list-style.

Você sabia que também existe uma lista de descrições?

Existe mais um tipo de lista no HTML, que, no entanto, não é usada com frequência. É chamada de lista de descrição.

Podemos definir uma lista de descrição usando a tag <dl>. Dentro das tags <dl> e </dl>, precisamos definir um termo de descrição usando a tag <dt>. O termo, geralmente, é um pequeno texto sobre algo. Em seguida, podemos definir o descritor da descrição para falar sobre o termo ainda mais, usando a tag <dd>.

Muita coisa para absorver? Vamos ver como funciona com um exemplo de código.

Vamos supor que queremos descrever algumas informações sobre programação, fofoca e sono em nossa página da web. Podemos primeiro definir uma tag <dl>. Agora definimos três pares de tags <dt> e <dd> para descrever programar, fofoca e sono, respectivamente.

<dl>
  <dt>Programar</dt>
  <dd>Atividade que deixa você feliz, mesmo quando dorme.</dd>
  <dt>Fofocar</dt>
  <dd>Não dá para viver sem.</dd>
  <dt>Dormir</dt>
  <dd>Minha atividade favorita.</dd>
</dl>

Esta será a aparência:

Experimente este CodePen para brincar um pouco mais com as listas de descrição:

Você pode estar se perguntando o motivo de não utilizarmos muito esse tipo de lista? Bem, é possível criar essa estrutura usando a lista não ordenada (ul), itens de lista (li) e estilos no CSS.

Se você considerar a semântica do HTML, é preciso dar um espaço para as listas de descrição em suas páginas sempre que perceber que há um bom caso de uso para ela.

Como criar um cabeçalho de página com elementos de lista no HTML

Estamos quase no final deste tutorial. Sinto, porém, que ele está incompleto sem pelo menos um exemplo de caso de uso das listas e tags do HTML. Meu favorito é listar os itens no cabeçalho de uma página da web.

Vamos criar um cabeçalho muito básico com um logotipo e três links: Página inicial, Produtos e Sobre nós. Primeiro, criaremos a estrutura do HTML, assim:

<nav>
  <span class="logo">Logotipo</span>
  
  <ul>
    <li><a href="#/home">Página inicial</a></li>
    <li><a href="#/products">Produtos</a></li>
    <li><a href="#/about">Sobre nós</a></li>
  </ul>  
</nav>

Aqui, pegamos uma lista não ordenada com três itens de lista para definir os links da Página inicial, de Produtos e de Sobre nós. Você também notará um elemento span com o texto Logotipo, que indica que é um logotipo. Podemos usar uma imagem adequada lá, com base em nossas necessidades posteriormente.

Até agora, o cabeçalho deve ter esta aparência:

Não era bem isso que queríamos. Vamos, então, escrever algumas regras e propriedades do CSS para fazer com que pareça um cabeçalho de página (ou algo próximo a isso).

nav{
  background-color: #273032;
  color: #FFF;
  padding: 10px;
  display: flex;
}

.logo {
  background-color: blue
}

ul {
  margin: 0px;
}

li {
  list-style: none;
  display: inline;
  margin-right: 0.2rem;
}

a {
  color: pink;
}

Bem melhor. Agora, está mais próximo de parecer um cabeçalho de página realista.

Novamente, use este CodePen para fazer alterações e experimentar com o cabeçalho.

Antes de terminar...

Por enquanto, é só. Espero que este artigo tenha sido útil e que ele o auxilie a entender listas em HTML mais claramente.

Entre em contato. Você poderá encontrar o autor no Twitter (@tapasadhikary). Siga-o à vontade. Ele também tem um canal no YouTube (em inglês), onde compartilha seus conhecimentos. Confira-o também.

Outros artigos úteis (do blog do autor, em inglês):

• 10 dicas das DevTools que ajudam com o CSS e com o design de UX
• 10 fatos triviais mas muito importantes sobre o HTML que você precisa saber
• 10 recursos úteis do HTML5  que você pode não estar usando