La etiqueta HTML <section>

Etiqueta semántica para secciones concretas la página

/ ᐳ html ᐳ La etiqueta HTML <search> ᐳ La etiqueta HTML <section> ᐳ La etiqueta HTML <h1> ... <h6>

Cuando estamos diseñando la estructura de nuestra página, sería conveniente determinar las secciones principales de nuestra web para delimitarlas bien. Para ello, es muy útil el uso de las siguientes etiquetas.

La etiqueta `<section>`

La etiqueta <section> nos permite agrupar una sección genérica de nuestro documento web. Si necesitamos crear una agrupación temática, y no es tan específica para encuadrarse dentro de otras etiquetas semánticas de sección, como por ejemplo <article>, la etiqueta <section> suele ser una buena opción. Una forma fácil de saber si es una sección, es cuando pensamos en dicha agrupación y colocamos un encabeza para identificarla:

<body>
  <section>
    <h1>Información</h1>
    <p>...</p>
  </section>
  <section>
    <h1>Descarga</h1>
    <p>...</p>
  </section>
  <section>
    <h1>Contacto</h1>
    <p>...</p>
  </section>
</body>

Varios ejemplos que podrían encajar en la definición de una sección:

✅ Cada una de las secciones de una página web.
✅ Cada capítulo de un documento.
✅ Cada una de las pestañas o tabs de un cuadro de diálogo.
✅ Cada una de las secciones numeradas de un documento.

Ten en cuenta que una sección no se debe elegir simplemente para dar formato visual. En ese caso, un elemento <div> es más que suficiente.

La etiqueta `<main>`

La etiqueta <main> es una etiqueta de agrupación general que debe utilizarse para representar el contenido dominante y principal del documento. De forma habitual, esta etiqueta suele ser elemento hijo de etiquetas como <body>, <div>, <form> o webcomponents.

Veamos un ejemplo de uso:

<div class="page">
  <header>
    <h1>Manz.dev</h1>
  </header>
  <nav>
    <a href="/posts/">Archivo de posts</a>
    <a href="/comments/">Comentarios</a>
    <a href="/streams/">Streams anteriores</a>
  </nav>
  <main>
    <h2>Contenido</h2>
    <p>Contenido principal...</p>
  </main>
  <footer>
    <p>Escrito por ManzDev</p>
  </footer>
</div>

Observa que la etiqueta <div> con clase page tiene 4 hijos: la cabecera <header>, la zona de navegación <nav>, la etiqueta <main> con el contenido principal y la etiqueta <footer> con la información de pie de página.

El atributo `hidden`

En principio, la etiqueta <main> sólo debería aparecer una vez por página, sin embargo, puede darse la posibilidad de que aparezca varias veces en un mismo documento si todas contienen el atributo hidden, salvo una. El atributo hidden es un atributo global que se puede utilizar en cualquier etiqueta, sin embargo, en esta etiqueta es bastante frecuente usarlo si tenemos la necesidad de incluir múltiples etiquetas <main>.

Ampliemos el ejemplo anterior, en este caso incluyendo las 3 secciones bajo la etiqueta <main>, donde la primera de ellas está «visible» y el resto tienen el atributo hidden:

<div class="page">
  <header>
    <h1>Manz.dev</h1>
  </header>
  <nav>
    <a href="/posts/">Archivo de posts</a>
    <a href="/comments/">Comentarios</a>
    <a href="/streams/">Streams anteriores</a>
  </nav>
  <main>
    <h2>Archivo de posts</h2>
    <p>Contenido principal...</p>
  </main>
  <main hidden>
    <h2>Comentarios</h2>
    <p>Contenido principal...</p>
  </main>
  <main hidden>
    <h2>Streams anteriores</h2>
    <p>Contenido principal...</p>
  </main>
  <footer>
    <p>Escrito por ManzDev</p>
  </footer>
</div>

De esta forma, podemos simular un documento donde cada etiqueta <main> es una sección principal, donde todas estarán ocultas porque no tienen el foco principal, y que podremos ir accediendo a cada una de ellas, si las vamos gestionando desde Javascript.

La etiqueta `<aside>`

Se podría decir que la etiqueta <aside> es el opuesto a la etiqueta <main>. Mientras la última es una etiqueta que engloba y agrupa el contenido principal de un documento, la etiqueta <aside> permite agrupar contenido que no es considerado el principal de un documento, es decir, el contenido secundario o que no tiene relación directa con el tema principal del documento.

Ampliemos el ejemplo anterior:

<div class="page">
  <header>
    <h1>Manz.dev</h1>
  </header>
  <aside>
    <nav>
      <a href="/posts/">Archivo de posts</a>
      <a href="/comments/">Comentarios</a>
      <a href="/streams/">Streams anteriores</a>
    </nav>
  </aside>
  <aside>
    <h2>Anuncios</h2>
    <p>...</p>
  </aside>
  <main>
    <h2>Contenido</h2>
    <p>Contenido principal...</p>
  </main>
  <footer>
    <p>Escrito por ManzDev</p>
  </footer>
</div>