Etiquetas de secciones

<< Comentarios en HTML Etiquetas de texto >>

5. Etiquetas de secciones 

En versiones anteriores a HTML5, era habitual crear una página web utilizando las etiquetas <div> para agrupar secciones, hoy en día, se sigue haciendo. Con HTML5, se introducen una serie de etiquetas semánticas de agrupación que funcionan como los divs empleados en versiones previas pero añadiendo un significado dada la información que contienen. Estas etiquetas son:

  • encabezado visual de la página (Logo, título): <header>
  • menú de navegación: <nav>
  • contenido principal: <main>, con varias subsecciones (además de la barra lateral) representadas por los elementos <article>, <section> y <div>.
  • barra lateral: <aside>; a menudo colocada dentro de <main>.
  • pie de página/sección: <footer>
  • Búsqueda de contenido: <search>
  • Información de contacto/autor: <address>
  • Los encabezados de título: del h1 al h6, de mayor a menor importancia <h1>

En ocasiones, cuando queremos ocultar un elemento empleamos el display: none de CSS, sin embargo, lo correcto sería darle sentido semánticamente, de tal forma que podemos utilizar el atributo hidden para indicar que esa información que tiene ese contenedor no la queremos mostrar.

5.1. Elementos de diseño HTML

El típico diseño utilizando elementos HTML5 de una página web es el siguiente:

5.2. Encabezado <header>

Esta sección representa un grupo de contenido introductorio. Si este es “hijo” directo del <body> se convertirá en el encabezado principal de nuestra web, pero si es hijo de un elemento <article> o de un elemento <section>, entonces simplemente será el encabezado particular de cada sección. Es importante que no lo confundamos con títulos o encabezados y mucho menos con el <head>. Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <title>Página con secciones html5</title>
</head>
<body>
     <header>
          <img src="img/logo.png" alt="logo de la web">
          <h1>Titulo principal de nuestra web</h1>
     </header>
     ...
</body>
</html>

5.3. Menú <nav>

El elemento <nav> contiene la funcionalidad de navegación principal de la página. Los enlaces secundarios, etc. no entrarán en la navegación.

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <title>Página con secciones html5</title>
</head>
<body>
     <header>
          <img src="img/logo.png" alt="logo de la web">
          <h1>Titulo principal de nuestra web</h1>
     </header>
     <nav>
          <a href="#">Home</a>
          <a href="ventas.html">Ventas</a>
          <a href="sobrenosotros.html">About us</a>
     </nav>
     ...
</body>
</html>

5.4. Contenido principal <main>

Este elemento encierra el contenido particular a esta página. Utilizaremos una sola vez la etiqueta <main> para cada página, y lo pondremos directamente dentro del <body>. Es mejor que no lo anidemos en otros elementos.

Este elemento es muy importante, ya que en el caso de utilizar navegadores de voz, el navegador puede ir directamente al contenido principal, saltando toda la información previa.

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <title>Página con secciones html5</title>
</head>
<body>
     <header>
          <img src="img/logo.png" alt="logo de la web">
          <h1>Titulo principal de nuestra web</h1>
     </header>
     <nav>
          <a href="#">Home</a>
          <a href="ventas.html">Ventas</a>
          <a href="sobrenosotros.html">About us</a>
     </nav>
     <main>
          ...
     </main>

     ...
</body>
</html>

5.5. Elemento <article>

Este elemento encuadra un bloque de contenido que tiene sentido por sí mismo aparte del resto de la página (por ejemplo la entrada en un blog). Cada una de las entradas del blog estarían dentro de la etiqueta <article>

5.6. Elemento <section>

Es parecido al elemento <article> pero nos permite agrupar secciones genéricas, es decir, si vamos a crear una agrupación temática pero no es tan específica como para ponerla con los <article>, pasamos a usar <section>. Se considera una buena práctica comenzar cada una de estas secciones con un título de encabezado (<h1>, <h2>, ...), pudiendo dividir los artículos (<article>) en distintas secciones (<section>) o también secciones en distintos artículos dependiendo del contexto.

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <title>Página con secciones html5</title>
</head>
<body>
     <header>
          <img src="img/logo.png" alt="logo de la web">
          <h1>Titulo principal de nuestra web</h1>
     </header>
     <nav>
          <a href="#">Home</a>
          <a href="ventas.html">Ventas</a>
          <a href="sobrenosotros.html">About us</a>
     </nav>
     <main>
          <section>
               <h2>Venta de bicis </h2>
               <article>
                    <!-- Ventas de bicis -->
               </article>
          </section>
          <section>
               <h2>Venta de componentes</h2>
               <article>
                    <!-- Ventas de componentes -->
               </article>
          </section>
     </main>
     ...
</body>
</html>

5.7. Barra lateral <aside>

El elemento <aside> incluye contenido que no está directamente relacionado con el contenido principal, pero que puede aportar información adicional relacionada indirectamente con él (resúmenes, biografías del autor, enlaces relacionados, etc.)

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <title>Página con secciones html5</title>
</head>
<body>
     <header>
          <img src="img/logo.png" alt="logo de la web">
          <h1>Titulo principal de nuestra web</h1>
     </header>
     <nav>
          <a href="#">Home</a>
          <a href="ventas.html">Ventas</a>
          <a href="sobrenosotros.html">About us</a>
     </nav>
     <main>
          <section>
               <h2>Venta de bicis</h2>
               <article>
                    <!-- Ventas de bicis -->
               </article>
          </section>
          <section>
               <h2>Venta de componentes</h2>
               <article>
                    <!-- Ventas de componentes -->
               </article>
          </section>
     </main>
     <aside>
          <!-- Anuncios a patrocinadores -->
     </aside>
     ...
</body>
</html>

5.8. Pie de página <footer>

Este elemento representa un grupo de contenido al final de una página, como el autor, dirección de contacto, licencia, condiciones de uso, etc. Este elemento puede estar incluido también en <article>, <section>, <nav> y <aside> entonces se entiende que es el pie de página del elemento que lo contiene.

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <title>Página con secciones html5</title>
</head>
<body>
     <header>
          <img src="img/logo.png" alt="logo de la web">
          <h1>Titulo principal de nuestra web</h1>
     </header>
     <nav>
          <a href="#">Home</a>
          <a href="ventas.html">Ventas</a>
          <a href="sobrenosotros.html">About us</a>
     </nav>
     <main>
          <section>
               <h2>Venta de bicis</h2>
               <article>
                    <!-- Ventas de bicis -->
               </article>
          </section>
          <section>
               <h2>Venta de componentes</h2>
               <article>
                    <!-- Ventas de componentes -->
               </article>
          </section>
     </main>
     <aside>
          <!-- Anuncios a patrocinadores -->
     </aside>
     <footer>
          <p>Creado por: <a href="mailto:XXXX@gmail.com">Rosa Medina</a></p>
     </footer>
</body>
</html>

5.9. Búsqueda de contenido <search>

Esta etiqueta representa una agrupación de elementos destinados a realizar búsquedas o filtros. Por ejemplo, un formulario de búsqueda global de internet.

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <title>Página con secciones html5</title>
</head>
<body>     
     <main>
          <search>
             <form action="https://www.google.com/search">
                    <label><input type="search" name="search" autocomplete="off"></label>
                    <input type="submit" value="Buscar">
             </form>
          </search>
     </main>
</body>
</html>

5.10. Información contacto/autor <address>

Este elemento encierra la información de contacto de una persona, como puede ser el creador de un artículo o comentario en nuestro blog

<!DOCTYPE html>
<html lang="es">
<head>
     <meta charset="UTF-8">
     <title>Página con secciones html5</title>
</head>
<body>     
     <main>
           ...
          <footer>
             <address>
                    Contacta con Rosa escribiendo a: <span>XXXX@gmail.com</span>
             <address>
          </footer>
     </main>
</body>
</html>

5.11. Los encabezados de título <h1>

La mayor parte del texto estructurado está compuesto por encabezados y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc. El encabezado nos va a permitir destacar un titular del resto del texto.

Cada sección tiene que estar delimitada por un elemento encabezado:

<h1>La historia de mi perra Lola</h1>

Hay seis elementos de encabezado: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Cada elemento representa un nivel de contenido diferente en el documento, <h1> representa el título principal, <h2> el subtítulo, <h3> representa el subtítulo del subtítulo y así sucesivamente. Es decir, <h1> es el encabezado de mayor importancia y <h6> es el de menor. 

Por ejemplo, en esta historia <h1> representa el título de la historia principal, <h2> representa el título de cada capítulo, y <h3> representa las diferentes secciones del capítulo y así sucesivamente.

<h1>La historia de mi perra Lola</h1>
<h2>Capítulo 1: Buscamos un perro</h2>
<p>Era una noche oscura, se había ido la luz tras la 
fuerte tormenta...</p>
<h2>Capítulo 2: Contactamos con los dueños</h2>
<p>Paqui tenía puesto en FB una manada de perros.</p>
<h3>La hija de Paqui</h3>
<p>La hija de Paqui me facilitó el teléfono....</p>

Como podemos observar el <h1> es el más grande y por tanto más importante y a medida que hemos incrementado, los títulos han sido más pequeños.

<< Comentarios en HTML Etiquetas de texto >>