Agrupación y estructura del contenido

Este tutorial abarcará el uso y las propiedades de algunos elementos básicos diseñados para dar formato y estructura al contenido en documentos HTML.

Agrupación básica del contenido

Entre las muchas formas que provee HTML para agrupar el contenido en un documento, aquí hablaremos acerca de dos de las más básicas y regularmente utilizadas: párrafos y listas.

Párrafos

La idea de párrafo ha sido tomada prestada por HTML de formas previas de escribir documentos, de modo que no estaremos agregando nada nuevo al decir que un párrafo es un grupo de una o más oraciones que forman una unidad y soportan una idea central. Con esta definición en mente tenemos de alguna manera claro qué debemos poner dentro de un párrafo. Lo único que nos resta por conocer es que el elemento p es el responsable de marcar un párrafo en HTML.

Habiendo dicho esto, comencemos con nuestro primer ejemplo. Aquí crearemos un simple párrafo, siguiendo la secuencia: etiqueta de apertura, contenido y etiqueta de cierre.

<p>Tengo esa nostalgia de domingo por llover...</p>

Tengo esa nostalgia de domingo por llover...

Declarar un párrafo es un proceso muy simple y como este no es el primer párrafo que insertamos en estos tutoriales, podemos decir que estamos listos para proceder al con el próximo tema.

Listas

HTML provee mecanismos para incluir tres tipos diferentes de lista en un documento. Éstos son: listas ordenadas (ol), listas no ordenadas (ul) y listas de descripciones (dl).

Listas ordenadas y no ordenadas

La estructura de las listas ordenadas y no ordenadas es básicamente la misma, y consiste de un contenedor con ítems. La única cosa que cambia en estos dos tipos de lista es el elemento contenedor, que es ol para listas ordenadas y ul para listas no ordenadas. Los ítems, a propósito, son insertados con el elemento li.

Pero estos dos tipos de lista no solo difieren en los elementos que utilizan. Semánticamente hablando, las listas ordenadas le dan importancia al orden en que los ítems son declarados, mientras que para las listas no ordenadas el orden es irrelevante. En el siguiente ejemplo crearemos dos listas, una ordenada y la otra no ordenada.

<p>Recursos:</p>
<ul>
  <li>Revistas viejas</li>
  <li>Hoja blanca</li>
  <li>Tijeras</li>
  <li>Pegamento</li>
  <li>Lápiz</li>
</ul>
<p>Procedimiento:</p>
<ol>
  <li>Corta figuras de las revistas que creas que identifican tu imagen del mundo.</li>
  <li>Pégalas en el papel con pegamento, dejando espacio al pie para escribir lo que piensas.</li>
  <li>Haz una descripción acerca de las imágenes y de cómo éstas representan tu imagen del mundo.</li>
</ol>

Recursos:

  • Revistas viejas
  • Hoja blanca
  • Tijeras
  • Pegamento
  • Lápiz

Procedimiento:

  1. Corta figuras de las revistas que creas que identifican tu imagen del mundo.
  2. Pégalas en el papel con pegamento, dejando espacio al pie para escribir lo que piensas.
  3. Haz una descripción acerca de las imágenes y de cómo éstas representan tu imagen del mundo.

Listas de descripciones

Una lista de descripciones, previamente conocida como lista de definiciones, es una estructura que consiste de nombres y valores, que normalmente guardan algún tipo de relación. La asociación de nombres y valores en las listas de descripciones es arbitraria y puede consistir de un nombre estando asociado a uno o más valores y viceversa. Dicha asociación depende exclusivamente del orden y la posición de los ítems, estando los valores siempre asociados al último nombre que los precede.

En versiones previas del estándar, este tipo de lista era conocida como lista de definiciones. HTML5, debido al extendido uso que los autores hacían de ésta para asociar pares nombre/valor de todo tipo, ha cambiado su nombre y propósito al más general lista de descripciones.

En el ejemplo siguiente tenemos un pequeño glosario de arte donde cada término tiene una definición que le corresponde. En esta estructura, el término "miniatura" recive dos definiciones, mientras que los términos "mito" y "leyenda" comparten ambos la misma definición.

<dl>
  <dt>Mural</dt>
  <dd>Pintura de grandes dimensiones sobre una pared.</dd>
  <dt>Medio</dt>
  <dd>Material usado por artistas que habitualmente implica la técnica para su utilización.</dd>
  <dt>Miniatura</dt>
  <dd>Una pintura pequeña ejecutada con gran detalle.</dd>
  <dd>Retrato pequeño, fotografía o letra decorativa en un manuscrito ilustrado.</dd>
  <dt>Mito</dt>
  <dt>Leyenda</dt>
  <dd>Historia tradicional que explica aspectos del mundo natural o ideas sociales y culturales.</dd>
</dl>
Mural
Pintura de grandes dimensiones sobre una pared.
Medio
Material usado por artistas que habitualmente implica la técnica para su utilización.
Miniatura
Una pintura pequeña ejecutada con gran detalle.
Retrato pequeño, fotografía o letra decorativa en un manuscrito ilustrado.
Mito
Leyenda
Historia tradicional que explica aspectos del mundo natural o ideas sociales y culturales.

Listas anidadas

Las listas de HTML pueden ser anidadas en múltiples configuraciones. La idea de las listas anidadas puede ser resumida en dos reglas: cualquier ítem de listas ordenadas o no ordenadas (li) puede contener una lista; y cualquier valor de una lista de descripciones (dd) puede contener una lista. Con este esquema puedes hacer casi cualquier tipo de combinación.

En el siguiente ejemplo crearemos una lista ordenada con dos ítems, donde el primero de estos ítems contendrá una lista no ordenada. Presta mucha atención a las etiquetas de apertura y cierre del ítem que contiene a la lista.

<ol>
  <li>Recoje los siguientes ítems:
    <ul>
      <li>Llave</li>
      <li>Martillo</li>
      <li>Tijeras</li>
    </ul>
  </li>
  <li>Procede al siguiente cuarto.</li>
</ol>
  1. Recoje los siguientes ítems:
    • Llave
    • Martillo
    • Tijeras
  2. Procede al siguiente cuarto.

Y antes de cambiar de tema, reformaremos el primer ejemplo de listas. La idea será crear una lista de descripciones principal con dos nombres ("recursos" y "procedimiento") y sus valores correspondientes que son, a su vez, listas.

<dl>
  <dt>Recursos</dt>
  <dd>
    <ul>
      <li>Revistas viejas</li>
      <li>Hoja blanca</li>
      <li>Tijeras</li>
      <li>Pegamento</li>
      <li>Lápiz</li>
    </ul>
  </dd>
  <dt>Procedimiento</dt>
  <dd>
    <ol>
      <li>Corta figuras de las revistas que creas que identifican tu imagen del mundo.</li>
      <li>Pégalas en el papel con pegamento, dejando espacio al pie para escribir lo que piensas.</li>
      <li>Haz una descripción acerca de las imágenes y de cómo éstas representan tu imagen del mundo.</li>
    </ol>
  </dd>
</dl>
Recursos
  • Revistas viejas
  • Hoja blanca
  • Tijeras
  • Pegamento
  • Lápiz
Procedimiento
  1. Corta figuras de las revistas que creas que identifican tu imagen del mundo.
  2. Pégalas en el papel con pegamento, dejando espacio al pie para escribir lo que piensas.
  3. Haz una descripción acerca de las imágenes y de cómo éstas representan tu imagen del mundo.

123Próx