Criar uma lista de itens ordenada ou não ordenada no HTML

Criar uma lista de itens é uma tarefa básica em HTML que pode ser útil em muitas situações, como para exibir uma lista de tarefas, itens de menu ou simplesmente para organizar informações. Existem dois tipos de listas em HTML: listas ordenadas e listas não ordenadas. Neste artigo, vou mostrar como criar esses dois tipos de listas em HTML.

Lista Não Ordenada

Uma lista não ordenada é criada usando a tag <ul>, que representa uma lista de itens não ordenados. Cada item da lista é representado pela tag <li>. O código a seguir demonstra como criar uma lista não ordenada simples em HTML:

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Este código produzirá uma lista não ordenada que se parece com isso:

• Item
• Item
• Item

Observe que não há números ou letras indicando a ordem dos itens na lista não ordenada.

Lista Ordenada

Uma lista ordenada é criada usando a tag <ol>, que representa uma lista de itens ordenados. Cada item da lista é representado pela tag <li>. O código a seguir demonstra como criar uma lista ordenada simples em HTML:

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Este código produzirá uma lista ordenada que se parece com isso:

1. Item
2. Item
3. Item

Observe que cada item da lista tem um número que indica a ordem em que ele aparece na lista.

Adicional:

Lista de Definição

Uma lista de definição é criada usando a tag <dl>, que representa uma lista de termos e suas definições. Cada termo é representado pela tag <dt>, e cada definição é representada pela tag <dd>. O código a seguir demonstra como criar uma lista de definição simples em HTML:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Este código produzirá uma lista de definição que se parece com isso:

HTML

• HyperText Markup Language

CSS

• Cascading Style Sheets

Observe que cada termo tem a tag <dt> e cada definição tem a tag <dd>.

Conclusão

Criar listas em HTML é uma tarefa simples, mas útil para organizar informações. Com as tags <ul>, <ol>, <li>, <dt> e <dd>, você pode criar listas não ordenadas, listas ordenadas e listas de definição em HTML. Com essas ferramentas, você pode melhorar a estrutura e o design do seu site.

Stefany Repetcki - Dev Front End