Listas

A veces necesitamos presentar en nuestros documentos algún tipo de índice o menú, o destacar los términos importantes de un tema. El Html tiene algunas etiquetas concebidas para la creación de listas que nos pueden facilitar esto.

Listas ordenadas

Este tipo de listas muestran una serie de elementos ordenados en una secuencia.
Dichos elementos han de estar contenidos entre las etiquetas <ol> y </ol> (de ordered list).

- Atributos de <ol>


Listas no ordenadas

Son listas en las que cada elemento, en vez de ir precedido de un indicador de secuencia, lleva una viñeta o 'topo'.
Los elementos de estas listas han de estar contenidos entre las etiquetas <ul> y </ul> (de unordered list).

- Atributos de <ul>

Elementos de lista
Tanto en las listas ordenadas como en las no ordenadas cada elemento se define por las etiquetas <li> y </li>, entre las que se ha de poner la información correspondiente a ese elemento.
La etiqueta <li> admite también el atributo type="tipo", como las etiquetas <ol> y <ul>, pero solo para ese elemento concreto.

Ejemplos:



<ol>


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li>Tercer elemento</li>


</ol>





<ol type="1" start="4">


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li>Tercer elemento</li>


</ol>





<ol type="A">


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li type="1">Tercer elemento</li>


</ol>





<ol type="a" start="8">


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li type="I">Tercer elemento</li>


</ol>





<ol type="I" start="8">


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li>Tercer elemento</li>


</ol>





<ol type="i">


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li>Tercer elemento</li>


</ol>






<ul>


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li>Tercer elemento</li>


</ul>





<ul type="disc">


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li type="circle">Tercer elemento</li>


</ul>





<ul type="circle">


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li type="circle">Tercer elemento</li>


</ul>





<ul type="square">


 <li>Primer elemento</li>


 <li>Segundo elemento</li>


 <li type="circle">Tercer elemento</li>


</ul>






<ul>


 <li>Primer elemento</li>


  <ul>


   <li>Primer subelemento</li>


   <li>Segundo subelemento</li>


   <li>Tercer subelemento</li>


    <ol>


     <li>Primer sub-subelemento</li>


     <li>Segundo sub-subelemento</li>


     <li><a href="http://www.google.es">


      Tercer sub-subelemento</a>


      <table border="1"><tr>


       <td>celda 1-1</td>


       <td>celda 1-2</td>


      </tr><tr>


       <td>celda 2-1</td>


       <td>celda 2-2</td>


      </tr></table>


     </li>


    </ol>


  </ul>


 <li>Segundo elemento</li>


 <li>Tercer elemento</li>


</ul>



Como podemos ver en este último ejemplo, las listas pueden anidarse, y también pueden contener otros elementos Html como enlaces, tablas, parrafos, etc.

También podemos observar que cuando se anidan listas no ordenadas y no se especifica el tipo de viñeta, la viñeta aparece distinta según la profundidad del anidamiento de cada lista.

Los anuncios de Google pueden grabar cookies. Si sigue navegando por este sitio ACEPTA LAS COOKIES. Más información: Google