Hola amigo lector, nos encontramos en el tercer post de esta serie titulada “Da tus primeros pasas en HTML5”. En el post anterior entramos en materia dando a conocer lo que son las etiquetas, dichos elementos que son la complete base de la maquetación en HTML.
En esta ocasión trabajaremos con las listas, elementos los cuales tienen un uso top para cubrir las necesidades de los desarrolladores WEB.
Listas en HTML5
El nombre es muy obvio para entender a lo que nos referimos con esta etiqueta. Las listas se definen con una etiqueta principal que conjunta un grupo de elementos, o items.
Para dejar esto un poco mas en claro veremos algunos ejemplos, pero antes cabe mencionar que existen diferentes tipos de listas. Veamos!
Listas Ordenadas (ol).
Las listas ordenadas son definidas por medio de l etiqueta <ol></ol>, cada item de la lista al igual que en cualquier otro tipo de lista estas se definen con la etiqueta <li></li>. Al definir una lista como lista ordenadas las viñetas habituales serán números en orden.
Podremos comenzar de un numero en definitivo sin problema alguno, y esto se lograra con el atributo value definido en el primer item de la lista.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listas en HTML</title>
</head>
<body>
<h3>Hola Mundo!</h3>
<h5>Aquí veras una lista ordenada</h5>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>
</html>
Y esto en pantalla seria lo siguiente:
Listas No Ordenadas (li).
Las listas no ordenadas se definen por medio de las etiquetas <ul></ul>, y al igual que el tipo anterior cada item o elemento dentro de esta lista se define con la etiqueta <li></li> .
Este tipo de lista antepone a cada elemento una viñeta por default. Pero los estilos de estas pueden ser cambiado por medio del atributo type declarado en la etiqueta <li></li> al cual le podemos pasar cualquiera de los valores siguientes: circle, square y disc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listas en HTML</title>
</head>
<body>
<h3>Hola Mundo!</h3>
<h5>Aquí veras una lista no ordenada</h5>
<ul>
<li type="circle">Item 1</li>
<li type="circle">Item 2</li>
<li type="circle">Item 3</li>
<li type="circle">Item 4</li>
<li type="circle">Item 5</li>
</ul>
</body>
</html>
Y esto en pantalla seria lo siguiente:
Listas de Definiciones (dl, dt y dd).
Si lo que queremos es hacer una lista de definiciones utilizaremos estas etiquetas pero definiremos unas por una, para entender su uso.
<dl> (Definition list). Aquí establecemos que dentro de ella ira una definición.
<dt> (Definition term). Aquí colocaremos el termino de lo que queremos definir, o en otras palabras el titulo de la definición.
<dd> (Definition description). Dentro de esta etiqueta ira la definición del termino ya establecido.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listas de definiciones</title>
</head>
<body>
<h3>Hola Mundo!</h3>
<h5>Aquí veras una lista de definiciones</h5>
<dl>
<dt>
<b>Primer termino:</b>
</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, praesentium, earum repellat laboriosam consequatur nihil quasi, delectus error eaque aperiam quas id ex aliquam ea, autem saepe dicta quae sequi.
</dd>
</dl>
<dl>
<dt>
<b>Segundo termino:</b>
</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, praesentium, earum repellat laboriosam consequatur nihil quasi, delectus error eaque aperiam quas id ex aliquam ea, autem saepe dicta quae sequi.
</dd>
</dl>
<dl>
<dt>
<b>Tercer termino:</b>
</dt>
<dd>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, praesentium, earum repellat laboriosam consequatur nihil quasi, delectus error eaque aperiam quas id ex aliquam ea, autem saepe dicta quae sequi.
</dd>
</dl>
</body>
</html>
Y esto en pantalla seria lo siguiente:
Listas anidadas.
Este es un punto mucho más sencillo a tratar debido a que son listas dentro de listas pero es algo importante mencionarlo para poder abrir la mente a que esto es posible. Para ser más claros veamos un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listas de definiciones</title>
</head>
<body>
<h2>Hola Mundo!</h3>
<h3>Aquí veras una lista que contiene listas</h5>
<h4>Lista Contenedora</h4>
<ol>
<li>
<h5>Primer Lista</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
<h5>Segunda Lista</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
<h5>Tercer Lista</h5>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ol>
</body>
</html>
Y esto en pantalla seria lo siguiente:
Creo que has este punto ya podrías crear una maquetación básica bastante decente, aunque faltan unos pequeños temas mas por tocar, espero que esta serie este siendo de mucha utilidad para ti amigo lector.
Cesar Flores