Treinamento HTML

Listas no HTML

Lista não ordenada

As listas não ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens não importa

Exemplo incorreto



      <ul>

        <p>Banana</p>

        <p>Morango</p>

        <p>Limão</p>

      </ul>

Exemplo prático

Banana

Morango

Limão

Exemplo correto


            
      <ul>
            
        <li>Banana</li>
            
        <li>Morango</li>
            
        <li>Limão</li>
            
      </ul>

Exemplo prático

Banana
Morango
Limão

Lista ordenada

As listas ordenadas são listas em que a ordem dos itens é importante.

Exemplo incorreto



        <div>

          <li>Primeiro item</li>

          <li>Segundo item</li>

          <li>Terceiro item</li>

        </div>

Exemplo prático

Primeiro item

Segundo item

Terceiro item

Exemplo correto



        <ol>

          <li>Primeiro item</li>

          <li>Segundo item</li>

          <li>Terceiro item</li>

        </ol>

Exemplo prático

Primeiro item
Segundo item
Terceiro item

Lista de definição

O elemento HTML Definition List (<dl>) engloba uma lista de pares de termos e descrições

Exemplo incorreto



      <ul>

        <dt>Firefox</dt>

        <dd>Um navegador gratuito, de código aberto, multiplataforma

          desenvolvido pela Mozilla Corporation e centenas de voluntários.

        </dd>

      </ul>

Exemplo prático

Firefox

Um navegador gratuito, de código aberto, multiplataforma desenvolvido pela Mozilla Corporation e centenas de voluntários.

Exemplo correto


            
        <dl>
            
          <dt>Firefox</dt>
            
          <dd>Um navegador gratuito, de código aberto, multiplataforma
            
            desenvolvido pela Mozilla Corporation e centenas de voluntários.</dd>
            

            
          <dt>Chrome</dt>
            
          <dd>O Google Chrome é um navegador de internet desenvolvido pela Google. Foi lançado pela primeira vez em
            
            setembro de 2008</dd>
            

            
          <dt>Brave</dt>
            
          <dd>Brave é um navegador web livre e de código aberto desenvolvido pela Brave Software Inc., e baseado no
            
            navegador web Chromium. O navegador bloqueia anúncios e rastreadores de sites.</dd>
            
        </dl>

Exemplo prático

Lista de navegadores web:

Firefox: Um navegador gratuito, de código aberto, multiplataforma desenvolvido pela Mozilla Corporation e centenas de voluntários.
Chrome: O Google Chrome é um navegador de internet desenvolvido pela Google. Foi lançado pela primeira vez em setembro de 2008
Brave: Brave é um navegador web livre e de código aberto desenvolvido pela Brave Software Inc., e baseado no navegador web Chromium. O navegador bloqueia anúncios e rastreadores de sites.

← Retornar para página principal