Listas em HTML

Um efeito muito utilizado em qualquer documento é a caracterização de listas. Em HTML/XHTML, é possível utilizar dois tipos de listas: listas ordenadas e as não ordenadas. Neste post veja listas em HTML.

Listas não ordenadas são determinadas pela tag UL. São marcadas com caracteres simbólicos como círculos, quadrados e discos:

 <ul>
    <li>Nintendo Switch</li>
    <li>Playstation 4</li>
    <li>X Box One</li>
 </ul>

• Nintendo Switch
• Playstation 4
• X Box One

Listas ordenadas são determinadas pela tag OL. Listas ordenadas são marcadas com caracteres como números, letras e algarismos romanos.

Assim como a lista não ordenada, todo item da lista fica enclausurado na tag LI:

<ol>
  <li>Nintendo</li>
  <li>Sony</li>
  <li>Microsoft</li>
<ol>

1. Nintendo
2. Sony
3. Microsoft

A diferença é que não precisamos nos preocupar com a sequência, pois isso o próprio browser se encarrega de cuidar.

Tanto a tag OL quanto a tag UL são aninháveis, ou seja, uma pode existir dentro da outra.

Lista de definição

Listas de definição são usadas para marcar termos e definições. Também podem ser usadas para fazer corresponder entre si, quaisquer itens que tenham um relacionamento direto uns com os outros (conjuntos de nomes/valores):

 <dl>
    <dt>NES</dt>
    <dd>Videogame de 8 bits</dd>
    <dt>SuperNES</dt>
    <dd>Videogame de 16 bits</dd>
    <dt>Playstation</dt>
    <dd>Videogame de 32 bits</dd>
    <dt>N64</dt>
    <dd>Videogame de 64 bits</dd>
 </dl>

NES

Videogame de 8 bits

SuperNES

Videogame de 16 bits

Playstation

Videogame de 32 bits

N64

Videogame de 64 bits

Listas aninhadas

As listas aninhadas combinam as listas ordenadas com as listas não ordenadas para criar estruturas mais complexas:

 <ul>
    <li>
       Nintendo
       <ul>
          <li>
             Nintendo 64
              <ul>
                 <li>Super Mario 64</li>
                 <li>Zelda: Ocarina of Time</li>
                 <li>Starfox 64</li>
              </ul>
          </li>          
          <li>
            Wii
              <ul>
                <li> Super Mario Galaxy</li>
                <li> Legend of Zelda: Twilight Princess</li>
                <li>Mario Kart Wii</li>
              </ul>
          </li>   
      </ul> 
   </li>
 </ul> 

• Nintendo
  • Nintendo 64
    • Super Mario 64
    • Zelda: Ocarina of Time
    • Starfox 64
  • Wii
    • Super Mario Galaxy
    • Legend of Zelda: Twilight Princess
    • Mario Kart Wii

Links em HTML

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: html | listas