Agrupación de etiquetas
10.1. Elemento <div>10.2. Listas

<< Tablas Formularios >>

En HTML disponemos de dos tipos de elementos: elementos en bloque y elementos en línea. Un elemento en bloque es aquel que incorpora un salto de línea antes y después del mismo, mientras que un elemento en línea se colocará a continuación del elemento anterior, sin introducir ningún salto de línea.

Ejemplo de elementos en línea: <span>, <a>, <img>, <code>, etc. Por otro lado, algunos de los elementos en bloque son: <div>, <p>, <h1>, <li>, etc.

10.1. Elemento <div>

El elemento <div> se puede utilizar como un contenedor para agrupar otros elementos HTML. Este elemento no tienen ningún significado especial, salvo que, por tratarse de un elemento a nivel de bloque, el navegador mostrará un salto de línea antes y después de él, pero semánticamente no aporta nada al documento.

Cuando se utiliza con CSS, el elemento <div> se puede utilizar para establecer atributos de estilo para grandes bloques de contenido. Otro uso común del elemento <div> es para el diseño del documento. Sustituyendo al anterior método, que utilizaban tablas para definir el diseño de la página.

<div class="container">
     <h1>Título de mi web</h1>
     <p>Elementos de una página web</p>
     <p>...</p>
</div>

El elemento <span> puede utilizarse como un contenedor para texto. Al igual que <div>, no tiene ningún significado especial. Cuando se utiliza junto con CSS, se puede utilizar para establecer los atributos de estilo a partes del texto.

10.2. Listas

Las listas están en todos los aspectos de nuestra vida, desde lista de la compra, lista de tareas, etc. Debemos distinguir entre tres tipos de listas:

10.2.1. Listas no ordenadas <ul>

Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Por ejemplo, la lista de una compra. Cada lista desordenada comienza con un elemento <ul> (unordered list) que delimita todos los elementos de la lista, y cada uno de los artículos de la lista está delimitado con un elemento <li> (list item).

<ul>
     <li>leche</li>
     <li>huevos</li>
     <li>pan</li>
     <li>chocolate</li>
</ul>

10.2.2. Listas ordenadas <ol>

Las listas ordenadas son aquellas en las que el orden de los elementos sí importa. Por ejemplo, las instrucciones para seguir la ruta para llegar al instituto.

La estructura del marcado es la misma que para las listas ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta <ol> (ordered list), en lugar de <ul>.

<ol>
     <li>Conduce hasta el final de la calle</li>
     <li>Gira a la derecha</li>
     <li>Sigue derecho por las dos primeras glorietas</li>
     <li>Gira a la izquierda en la tercer glorieta</li>
     <li>El instituto está a tu derecha, 300 metros más adelante</li>
</ol>

Podemos personalizar la lista con los siguientes atributos:

  • type: indica el tipo de viñeta o marcador que se utiliza en la lista: 1 (enteros), A (letras mayúsculas), a (letras minúsculas), I (números romanos en mayúsculas), i (números romanos en minúscula)
  • start: se utiliza para determinar el valor inicial, debe ser un número entero válido.
  • reversed: es un atributo booleano (verdadero o falso). Indica que la lista es descendente (…, c, b, a) mientras que si se omite indica que la lista es ascendente (a, b, c, …)

Si no indicamos ninguno de estos tres atributos se crea una lista ordenada de números enteros empezando desde el 1.

<ol reversed start="6" type="A">
     <li>Coffee</li>
     <li>Tea</li>
     <li>Milk</li>
</ol>

Además de estos atributos que le podemos dar a la lista, podemos modificar el valor de un determinado ítem de la lista (el valor del número de la lista), para ello utilizamos el atributo value.

10.2.3. Listas anidadas

Las listas se pueden anidar, es decir, podemos incluir una lista dentro de otra y cada una tendrá su propia numeración o viñeta. Para anidarlas, crearemos otra lista (con <ol> o <ul>) dentro de una etiqueta <li>, y cerraremos </li> después de cerrar previamente la definición de la sublista. Ejemplo:

<ol>
     <li> Opción 1 </li>
     <li> Opción 2 <!-- La etiqueta de cierre no va aquí -->
          <ul>
               <li> Opción 2A </li>
               <li> Opción 2B </li>
               <li> Opción 2C </li>
          </ul>
     </li> <!-- Aquí está la etiqueta de cierre -->
     <li> Opción 3 </li> 
     <li> Opción 4 </li>
</ol>

10.2.4. Listas de descripción: etiquetas <dl>, <dt> y <dd>

Son listas donde se asocian términos con descripciones o valores, por ejemplo, glosarios, listas de vocabulario, listas de metadatos o listas de preguntas y respuestas, no es adecuado para representar diálogos.

Para representar o definir estas listas utilizamos el elemento <dl>,donde cada término está envuelto en un elemento <dt>(término de descripción) y cada descripción está envuelta en un elemento <dd>(definición de descripción). Se puede asociar un término con múltiples descripciones y viceversa. El navegador muestra el contenido del texto <dd> con una sangría.

<dl>
     <dt>Coffee</dt>
     <dd>Black hot drink</dd>
     <dt>Milk</dt>
     <dd>White cold drink</dd>
</dl>

<< Tablas Formularios >>