En HTML, los elementos "ul", "ol", "li", "dl", "dt" y "dd", permiten representar listas ordenadas (ordered lists), listas desordenadas (unordered lists) y listas de descripción de términos (description lists).
Lista desordenada - Elementos "ul" y "li"
EJEMPLO Para que en un navegador se muestre la siguiente lista desordenada de colores:
Se puede hacer uso de los elementos "ul" y "li" del siguiente modo ("lista-desordenada.html"):
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de lista desordenada</title>
</head>
<body>
<p>Lista desordenada de colores:</p>
<ul>
<li>Rojo</li>
<li>Amarillo</li>
<li>Verde</li>
<li>Blanco</li>
<li>Naranja</li>
</ul>
</body>
</html>
Obsérvese que, cada color está contenido en un elemento "li", y todos ellos se escriben dentro del elemento "ul".
Lista ordenada - Elementos "ol" y "li"
EJEMPLO Si se quiere visualizar una lista ordenada como la siguiente:
Para ello, se pueden utilizar los elementos "ol" y "li" ("lista-ordenada.html"):
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de lista ordenada</title>
</head>
<body>
<p>Lista de 5 animales ordenados de mayor a menor tamaño:</p>
<ol>
<li>Elefante</li>
<li>Cebra</li>
<li>Oveja</li>
<li>Gato</li>
<li>Ratón</li>
</ol>
</body>
</html>
En una lista ordenada, los elementos están ubicados de forma que, si se cambiasen de lugar, cambiaría también el significado de la lista.
Lista de descripción de términos - Elementos "dl", "dt" y "dd"
EJEMPLO Para mostrar un glosario de siglas:
Se puede escribir el siguiente código ("lista-de-descripcion-de-terminos.html"):
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de lista de descripción de términos</title>
</head>
<body>
<p>Glosario de siglas:</p>
<hr>
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>W3C</dt>
<dd>World Wide Web Consortium</dd>
</dl>
</body>
</html>
Fíjese que, el elemento "dl" alberga a los grupos "término-descripción" (elemento "dt" - elemento "dd").
No hay comentarios:
Publicar un comentario