Etiquetas Contenedoras de HTML

En HTML existen ciertas semánticas cuyo objetivo es el de definir lo que contienen en su interior. Habitualmente nos referimos a estas etiquetas como etiquetas contenedoras o container tags, ya que, salvo que agreguemos nosotros estilos o algún tipo de interacción con ellas, los navegadores no les otorgan ningún estilo o funcionalidad por defecto. En su interior pueden contener un conjunto de otras etiquetas no específicas. Algunos ejemplos de estas etiquetas son las etiquetas nav, article, section, o div.

Al principio podría resultar complicado saber cómo o dónde utilizar estas etiquetas, así que vamos a ver una por una aquellas que más se utilizan.

Etiqueta nav

La etiqueta nav suele contener la definición de un menú de navegación en su interior. Es habitual incluir una lista en su interior, que puede ser tanto ordenada ol, como no ordenada ul. A continuación tienes un pequeño ejemplo de un menú:

<nav>
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/Empresa">Empresa</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ol>
</nav>

Etiqueta article

Esta etiqueta puede identificar tanto al contenido principal de una página, como por ejemplo este artículo, como a ciertos contenidos secundarios a los que es posible acceder mediante algún enlace, como la lista de artículos de un blog.

Aquí tienes un ejemplo de la definición de la etiqueta article como contenido principal de una página:

<article>
  <h1>Título del blog</h1>
  <p>Aquí va el contenido del blog</p>
</article>

Dentro de un artículo es de esperar que aparezca un encabezado h1 como título principal y varias etiquetas h2-hx que indiquen las secciones en las que se divide.

Aquí tienes también un ejemplo de la definición de varias etiquetas article como una lista de artículos de una página:

<article>
  <h2>Cómo aprender HTML</h2>
    <a href="/articulos/html">Leer más</a>
</article>
<article>
  <h2>Cómo aprender JavaScript</h2>
  <a href="/articulos/javascript">Leer más</a>
</article>

Etiqueta section

La etiqueta section representa una porción o sección del documento. Al igual que ocurría con la etiqueta article, cada sección puede contener una etiqueta h1 y varias etiquetas h2-hx que indiquen las secciones en las que se divide. Eso sí, no es recomendable colocar más de una etiqueta h1 en una página.

Esta etiqueta resulta útil si quieres dividir en varias secciones un artículo que es excesivamente largo. Sin embargo, no suele utilizarse para dividir elementos que no contienen información bien definida, en cuyo caso tendrías que usar la etiqueta div. A continuación tienes un ejemplo:

<section>
  <h2>Una sección cualquiera</h2>
  <p>Texto de la sección</p>
  <img src="/img/mi-imagen.png" />
</section>

Etiqueta div

La etiqueta div es la más utilizada a la hora de definir contenedores genéricos, pudiendo utilizarse independientemente de la información de la página. También es habitual utilizar esta etiqueta como mero contenedor cuando se quieren aplicar ciertos estilos a ciertos elementos de la página, por lo que es habitual usar el atributo class con este elemento. Si las otras etiquetas no son las más adecuadas para un elemento que quieres definir, lo más seguro es que debas definirlo con la etiqueta div. Aquí tienes un ejemplo:

<div>
  <p>Cualquier cosa</p>
</div>

Etiqueta header

Esta etiqueta se utiliza para definir la cabecera de una página o artículo. Por ejemplo, es habitual definir barras de navegación dentro de la sección header. También puede contener etiquetas h1-Hx en su interior, así como un texto de introducción como referencia al contenido de la página. Aquí tienes un ejemplo:

<header>
  <h1>Título de la página</h1>
</header>

También es habitual incluir la etiqueta header como parte de un artículo:

<article>
  <header>
    <h1>Título de la página</h1>
  </header>
</article>

Es importante que no confundas  la etiqueta header con la etiqueta head, puesto que esta última se utiliza para definir ciertos metadatos de la página, antes del body.

Etiqueta footer

Esta etiqueta es lo opuesto a la etiqueta header, puesto que la etiqueta footer se suele utilizar para definir el pié de un artículo, que puede contener cosas como enlaces de interés o información acerca de su autor, entre otras cosas:

<article>
  <footer>
    <span>Pié del artículo</span>
  </footer>
</article>

Etiqueta main

Si la etiqueta header se utilizaba para definir la cabecera de un artículo y la etiqueta footer para definir el pié, el cometido de la etiqueta main es el de definir el contenido principal de una página o artículo. A continuación tienes un ejemplo:

<main>
  <span>Cuerpo del artículo o de la página</span>
</main>

Etiqueta aside

La etiqueta aside se utiliza para definir algún tipo de contenido relacionado con la página o artículo definido en el interior de la etiqueta main. Por ejemplo, podrías agregar una lista de artículos o de etiquetas relacionadas con la página, entre otras cosas. Otro ejemplo son los widgets que existen en las típicas sidebars de las páginas creadas con WordPress, que suelen agregar ciertos contenidos o funcionalidades a la página. Esta etiqueta separa a los elementos que contiene en su interior del flujo semántico de la página. Por ejemplo, a continuación definimos un formulario de contacto:

<main>
  <p>Aquí va algo de texto</p>
</main>
<aside>
  <form action="/contacto">
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre">
    <label for="mensaje">Mensaje</label>
    <textarea name="mensaje"></textarea>
    <input type="submit" value="Enviar mensaje">
  </form>
</aside>

y esto ha sido todo.

---