Agrupación y estructura del contenido

Práctica

Esta práctica consistirá en la adición de contenido al documento obtenido en la práctica del tutorial anterior ("La estructura del documento"). Para evitar que los ejemplos se vuelvan demasiado largos, nos enfocaremos en el contenido; esto es, todo lo que se encuentra dentro del elemento body. Así que ten cuidado, porque no verás la sección del encabezado del documento aquí (head), pero sí debería estar presente en tu archivo.

Comenzaremos nuestra práctica creando un simple párrafo, siguiendo la secuencia: etiqueta de apertura, contenido y etiqueta de cierre.

<body>
  <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
  <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
</body>

Hoy desperté decidido a aprender HTML por mi cuenta.

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Hay dos cosas que notar aquí: primero, que hemos agregado el párrafo dentro del cuerpo (body), el lugar indicado para agregar contenido en un documento; y segundo, lo insertamos luego del párrafo declarado anteriormente, simplemente porque tenía sentido.

La siguiente cosa que haremos será crear una muy básica tabla de contenidos para este documento. Ésta estará representada por una lista ordenada y será colocada al comienzo (antes de los párrafos). Comencemos con las etiquetas de apertura y cierre del contenedor de la lista (ol), dejando un espacio en medio para incluir un par de ítems más tarde.

<body>
  <ol>
  
  </ol>
  <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
  <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
</body>

Ahora podemos agregar los ítems a la lista, concluyendo, por ahora, con nuestra tabla de contenidos. Los ítems en listas ordenadas (así como en listas no ordenadas) son insertados con el elemento li, y los pasos son los mismos que antes: etiqueta de apertura, contenido y etiqueta de cierre. Entonces, agreguemos un par de éstos entre las etiquetas de la lista.

<body>
  <ol>
    <li>Me decidí</li>
    <li>Agarrándole la mano</li>
  </ol>
  <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
  <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
</body>
  1. Me decidí
  2. Agarrándole la mano

Hoy desperté decidido a aprender HTML por mi cuenta.

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Esta estructura está suficientemente bien en si misma, pero como somos muy meticulosos, dividiremos este pequeño contenido en secciones. Comenzaremos por establecer las dos siguientes secciones principales: una sección de encabezado (header) que contendrá a la tabla de contenido; y una sección principal (main) que encerrará al contenido central del documento. Más tarde, estableceremos nuevas divisiones.

<body>
  <header>
    <ol>
      <li>Me decidí</li>
      <li>Agarrándole la mano</li>
    </ol>
  </header>
  <main>
    <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
    <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
  </main>
</body>
  1. Me decidí
  2. Agarrándole la mano

Hoy desperté decidido a aprender HTML por mi cuenta.

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

A continuación dividiremos la sección principal (main) de este documento en dos secciones más, cada una conteniendo a uno de los dos párrafos. Esta es una división temática del contenido que contribuirá a la legibilidad del documento. En prácticas subsecuentes verás claramente cómo cada una de estas secciones se corresponde con un ítem en la tabla de contenidos. Por ahora, tenme paciencia y presta mucha atención a la ubicación de las etiquetas de cada sección: la etiqueta de apertura antes de un párrafo; la etiqueta de cierre luego de él.

<body>
  <header>
    <ol>
      <li>Me decidí</li>
      <li>Agarrándole la mano</li>
    </ol>
  </header>
  <main>
    <section>
      <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
    </section>
    <section>
      <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
    </section>
  </main>
</body>
  1. Me decidí
  2. Agarrándole la mano

Hoy desperté decidido a aprender HTML por mi cuenta.

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Por último, agregaremos un encabezado a cada una de estas secciones, con la excepción de la sección principal (main). En este caso, y debido a la estructura de nuestro contenido, agregaremos únicamente encabezados de nivel uno con el elemento h1. Como era de esperarse, estos títulos preceden al contenido de las secciones a las que pertenecen.

<body>
  <header>
    <h1>Tabla de contenidos</h1>
    <ol>
      <li>Me decidí</li>
      <li>Agarrándole la mano</li>
    </ol>
  </header>
  <main>
    <section>
      <h1>Me decidí</h1>
      <p>Hoy desperté decidido a aprender <abbr title="Lenguaje de marcas de hypertexto">HTML</abbr> por mi cuenta.</p>
    </section>
    <section>
      <h1>Agarrándole la mano</h1>
      <p>El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.</p>
    </section>
  </main>
</body>

Tabla de contenidos

  1. Me decidí
  2. Agarrándole la mano

Me decidí

Hoy desperté decidido a aprender HTML por mi cuenta.

Agarrándole la mano

El proceso de aprendizaje de este lenguaje fue complicado, especialmente porque no soy una persona de las computadoras. Sin embargo, me esforcé mucho hasta que las cosas comenzaron a ir sobre ruedas.

Ahora puedes ver, especialmente cuando el documento es representado, cómo la tabla de contenidos lista cada una de las secciones en el documento. Este es un buen uso de los elementos de seccionamiento provistos en HTML5 y una mejora en la legibilidad para los usuarios.

Este tutorial ha presentado la idea de agrupación y seccionamiento de contenido en documentos HTML. Aunque los elementos analizados aquí son solamente una pequeña selección, deberían ser más que suficientes como para prepararte para descubrir otros elementos de agrupación y seccionamiento por tí mismo. No olvides visitar la lists de elementos en HTML5 para este fin.

Próximo tutorial ›

Prev123