HTML do básico ao avançado parte 7

Conheça e aprenda a utilizar os modelos de listas disponíveis no HTML, além de mesclar essas estruturas.

HTML5: O guia definitivo

Listas ordenadas são muito utilizadas, nos tempos atuais ela é usada para substituir as tabelas, pois não se usa mais tabelas para exibir algo em linha, esta responsabilidade cabe às listas.

Existem listas ordenadas e não ordenadas, ambas são fácil de entender.

Vamos começar com lista ordenada, abaixo segue nosso código:

<ol>
	<li>Mouse</li>
	<li>Teclado</li>
	<li>Caixa multim&iacute;dia</li>
	<li>Monitor</li>
	<li>Estabilizador</li>
</ol>

Nosso resultado será:

Ele enumera cada item de nossa lista, onde:

  • ol - (Ordered List) Lista ordenada
  • li - Item de lista

Agora vamos ver as listas não ordenadas, ela é praticamente a mesma coisa que ordenada o que muda é que ao invés de usar <ol>, vamos usar <ul>.

Veja o código e sua utilização abaixo.

<ul>
     <li>Processador</li>
     <li>Memoria</li>
     <li>HD</li>
     <li>Cooler</li>
     <li>Placa mãe</li>
</ul>

Podemos incluir novas sequências de listas dentro de outras listas, isso é muito comum na utilização de menus de navegação Dropdown.

<ul>
    <li>Processador</li>
    <li>Memoria</li>
    <li>HD</li>
    <li>Cooler</li>
    <li>
       <ul>
           <li>Cabo Sata</li>
           <li>Fonte de alimentação</li>
           <li>Bateria</li>
           <li>Cabo IDE</li>
        </ul>
     </li>
</ul>