Lista não-ordenadas em HTML

Como adicionar uma lista não-ordenada no documento HTML?

Para criar uma lista não-ordenada, utilize o elemento <ul>. Cada item da lista é representado pelo elemento <li>:

<ul>
    <li>Limpar estantes</li>
    <li>Arrumar armário</li>
    <li>Organizar livros</li>
</ul>

Alterando o estilo do marcador:

Você pode personalizar os marcadores da lista utilizando o atributo CSS list-style-type. Veja abaixo os valores disponíveis:

A seguir, temos 3 exemplos de listas não-ordenadas com estilos diferentes:

Marcador círculo (circle):

<ul style="list-style-type:circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Marcador quadrado (square):

<ul style="list-style-type:square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Marcador removido (none):

<ul style="list-style-type:none">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Definindo um marcador customizado:

Você pode criar seus próprios marcadores usando CSS. No exemplo abaixo, cada item recebe o símbolo "⚜" antes do texto:

ul {
    list-style: none;
    padding-left: 1ch;
}
li:before {
    content: '⚜';
    padding-right: 1ch;
}

<ul>
    <li>Limpar</li>
    <li>Arrumar</li>
    <li>Organizar</li>
</ul>

Resultado:

• Limpar
• Arrumar
• Organizar

Listas não-ordenadas aninhadas:

Você pode criar listas aninhadas adicionando uma nova <ul> dentro de um <li>:

<ul>
    <li>Suco</li>
    <li>Chá
        <ul>
            <li>Chá preto</li>
            <li>Chá verde</li>
        </ul>
    </li>
    <li>Leite</li>
</ul>