Creación de listas en HTML

En una gran cantidad de documentos HTML, puede ser necesario la utilización de listas para su correcta estructura y visualización, HTML dispone de varios tipos de lista que veremos a continuación.

Listas no ordenadas

Las listas no ordenadas son aquellas que no siguen ningún orden concreto, para añadir una lista no ordenada se abre la lista con las etiquetas <ul> de apertura y cierre.

<ul></ul>

Seguidamente en su interior se añaden tantos elementos de lista como se deseen con las etiquetas <li>. A las listas no ordenadas se les puede añadir el atributo type, cuyos valores pueden ser, disc, circle, square y none, este último elimina cualquier marca de la lista, el resto añaden distintas marcas a las listas no ordenadas. Observa el ejemplo para ver los tipos de marcas de las listas no ordenadas, si no se añade el atributo type, por defecto utiliza la marca disc.

<ul>
   <li type="disc">Elemento de lista</li>
   <li type="circle">Elemento de lista</li>
   <li type="square">Elemento de lista</li>
   <li type="none">Elemento de lista</li>
</ul>

Listas ordenadas

Las listas ordenadas son aquellas que siguen un orden numérico, para añadir una lista no ordenada se abre la lista con las etiquetas <ol> de apertura y cierre.

Como en el caso anterior, en su interior se añaden tantos elementos de lista como se deseen con las etiquetas <li>, por defecto la lista comienza por el numero 1, pero si queremos comenzar o añadi nuestros propios valores, utilizaremos el atributo value y añadiremos el valor numérico que deseemos, teniendo en cuenta que los siguientes elementos de la lista predecidos de un atributo value y su valor, seguirán el orden del ultimo numero añadido.

<ol>
   <li>Elemento de lista 1</li>
   <li value="10">Elemento de lista</li>
   <li>Elemento de lista</li>
   <li value="25">Elemento de lista</li>
   <li>Elemento de lista</li>
</ol>

Listas de definiciones

Como su nombre indica, las listas de definiciones nos permiten añadir términos y definirlos, para crear una lista de definición, añadiremos la etiqueta <dl>, esta indica que dentro de ella va a ir una lista de definiciones.

<dl></dl>

A continuación le siguen las etiquetas <dt>, donde le indicaremos el término a definir y debajo de estas las etiquetas <dd>, que definen el termino escrito en las etiquetas <dt>. Dentro de una lista de definiciones ueden haber tantos términos y definiciones como sean necesarios.

<dl>
   <dt>Término 1 a definir</dt>
   <dd>Definición del término 1</dd>
   <dt>Término 2 a definir</dt>
   <dd>Definición del término 2</dd>
</dl>

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.