Listas em HTML

Olá pessoal, hoje vamos conhecer como utilizar listas e suas variadas formas.

Lista não ordenada

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Lista Ordenada

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Lista ordenada, iniciando a partir do número 6:

<ol start="6">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Lista ordenada invertida, iniciando a partir do número 15:

<ol reversed start="15">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Lista ordenada utilizando ordem alfabética e em caixa baixa:

<ol type="a">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Lista ordenada utilizando ordem alfabética e em caixa alta:

<ol type="A">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Lista ordenada utilizando sistema numérico romano e em caixa baixa:

<ol type="i">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Lista ordenada utilizando sistema numérico romano e em caixa alta:

<ol type="I">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Lista dentro de outra lista:

Podemos utilizar listas dentro de outra lista, independente se é ordenada ou não.

<ul>
  <li>item</li>
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

Lista de definição

<dl>
  <dt>Café</dt>
  <dd>Bebida quente</dd>
  <dt>Cerveja</dt>
  <dd>Bebida Alcoólica</dd>
</dl>

Pronto pessoal, conhecemos as listas em HTML, valeu 😎✌!