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.

Publicado em

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á:

Lista ordenada HTML 5
Lista ordenada HTML 5

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>

Usando lista não ordenada no HTML
Usando lista não ordenada no HTML

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>

Lista dentro de lista no HTML
Lista dentro de lista no HTML

Gunnar Correa
Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. Fundador da SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção