HTML do básico ao avançado parte 7

Gunnar CorreaGunnar Correa27/02/2015 às 02:10:29 - 7.048 acessos

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


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

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

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 ordenada html hyper text tutorial web site página documento ul ol li atributos

Compartilhe


Gunnar Correa

Gunnar Correa

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



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários