Etiquetas:
Algunos de los elementos más usados en HTML son los encabezados, párrafos y las listas.
Las etiquetas que se emplean para usar listas son las siguientes:
<ul>
<ol>
<li>
<dl>
Existen diversos tipos de listas, (aproximadamente 5) a continuación se explica como usar listas numeradas o listas no numeradas y listas de descripción.
Listas numeradas
Para escribir una lista numerada u ordenada, dicha lista debe estar englobada entre las etiquetas:
<ol...</ol>. A su vez, cada elemento de la lista deberá estar entre las etiquetas <li>...</li>. Algunos autores recomiendan que cada elemento de la lista se encuentre en una línea nueva. Las listas ordenadas pueden tener los atributos start (permite indicar en dónde se inicia la lista) y type (que permite indicar el tipo de numeración, letras, números romanos). En HTML5 se agregó el atributo reverse (Que permite la numeración sea descendente)
Listas no numeradas
Para escribir una lista no numerada o sin orden, dicha lista debe estar englobada entre las etiquetas:
<ul>...</ul>. A su vez, cada elemento de la lista deberá estar entre las etiquetas <li>...</li>. El resultado es que el navegar inserta caracteres no numéricos (viñetas) antes de cada elemento de la lista.
Listas de descripción
Es acrónimo de description list. Se emplea para definir una lista de términos con 0 o más descripciones de cada término, dicha lista debe estar englobada entre las etiquetas:
<dl>...</dl> Cada término de la lista se define con <dt>...</dt> y cada descripción se define con <dd>...</dd> separándolos con sangría.
Ejemplo de un documento HTML usando listas numeradas, listas no numeradas y listas de descripción.
<html>
<head>
<title>HTML - L. numeradas - L. No numeradas - L. descripción</title>
</head>
<body>
<h2>Listas numeradas</h2>
<ol>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
<li> Elemento 5 </li>
</ol>
<h2>Listas no numeradas</h2>
<ul>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
<li> Elemento 5 </li>
</ul>
<h2> Listas de descripción </h2>
<dl>
<dt> Elemento 1 </dt>
<dd>Descripción 1 del Elemento 1</dd>
<dt> Elemento 2 </dt>
<dd>Descripción 1 del Elemento 2</dd>
<dd>Descripción 2 del Elemento 2</dd>
<dt> Elemento 3 </dt>
</dl>
</h2>
</body>
</html>
No hay comentarios.:
Publicar un comentario