Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li> HTML, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”.
Así podemos hacer que la lista esté definida por puntos negros (li type=»disc»), por puntos con el fondo blanco (li type=»circle») o por cuadrados (li type=»square»). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.
Vamos con un pequeño ejemplo en código:
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
Cuyo resultado visual será el que veremos a continuación:
Esto es un tipo de punto.
Este es otro.
Y este es otro diferente.
Listas ordenadas: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente:
<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>
Y el resultado será el siguiente:
- Este será el número 20.
- Este será el 21.
- Este será el 22. Y así sucesivamente.
Listas de definiciones: <dl>, <dt> y <dd>
Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:
La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una definición.
La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entendernos mejor, dentro de <dt> iría el título de la definición.
La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta irá la definición.
Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas para facilitar su diferenciación.
Aquí podemos ver un ejemplo de código de dos listado de definición:
<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd>
</dl>
Cuyo resultado será el siguiente:
- Aquí va el término que definiremos
- Y aquí dentro irá la definición propiamente dicha.
- Aquí va la segunda definición
- Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.
Helí Anticona dice
Simple pero muy didáctico. Gracias
Alberto dice
Simple, sencillo y didáctico. Excelente presentación.
mateo dice
Muchas gracias.
hoteles en cali dice
Gracias no tenia muy claro las diferencias 😉
JNG Jabones Naturales Glub dice
Gracias, excelente!!
GABRIEL GONZALO CRUZ PORTILLO dice
Excelente 👍
Palen dice
Contenido muy didáctico y entretenido.
SEBASTIAN CAMILO OLAYA dice
Gracias.
Kenny dice
Está muy buena la explicación. Continuen compartiendo conocimiento para el desarrollo tecnológico!!!!
Gracias
elver galarga dice
Gracias
Anonimo dice
Gracias me ayudo mucho con un problema que tenía en mi blog
Katherine dice
Super la explicacion!! ojala todas las explicaciones fueran de esta manera, simple y practica
Angel dice
MUY INTERESANTE
Maite dice
Muchas Gracias por la explicación. Me ha sido muy util.
Catalina dice
Como se sacan las viñetas a una lista desordenada?
José dice
Gracias
manu dice
te falto el type=»none» cuando no queres dejar ninguna figura en tu lista
Mariona dice
Ojo! la etiqueta <dl> encapsula todos los pares término-definicion (<dt> y <dd>), y no cada par de forma individual.
El siguiente código de ejemplo:
<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd>
</dl>
En realidad, debería ser así:
<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
<dt>Aquí va la segunda definición</dt>
<dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd>
</dl>