Etiquetas de título en HTML5

17/ago/2016 2

Ya estamos acostumbrados al estándar HTML5 hace años y lo utilizamos tranquilamente en nuestros proyectos web este 2016. Pero, ¿realmente conoces su uso y lo aprovechas? No basta con declarar un nuevo doctype; si no utilizas correctamente sus etiquetas será poco o nada el provecho que le sacarás al estándar.

En este artículo me enfocaré en el uso y reglas recomendadas en HTML5 para las etiquetas HTML para título de contenido, las que van del <h1> al <h6>.

Por mucho tiempo se consideró que una regla en HTML y el SEO era que cada página individual de un sitio debiese tener 1 sólo <h1>. Antes que eso, se utilizaba el logo / marca del sitio para colocar el nombre del sitio envuelto en ese <h1> con alguna técnica de image-replacement del momento.


  <body>
    <div id="header">
      <h1>Mi Sitio</h1>
    </div>
    <div id="content">
      <h2>Mi Título</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
  </body>

Un concepto importante que debemos entender es el de document outline:

El document outline es una estructura de un documento generado por los encabezados, títulos de formularios, títulos de tabs y cualquier otro punto de referencia apropiados para trazar el documento. El user agent puede utilizar esta información para generar por ejemplo, una tabla de contenido, y para tecnologías para asistir a discapacitados a través de dispositivos / browsers de accesibilidad.

Un outline común en HTML4 se muestra a continuación:


  <h1>Mi Sitio</h1>
  <h2>Sobre Mí</h2>
  <p>Lorem ipsum...</p>
  <h3>Mis Gustos</h3>
  <p>Lorem ipsum dolor sit amet...</p>
  <h2>Contáctame</h2>
  <p>...</p>

Lo que genera un outline:

  1. Mi Sitio
    1. Sobre Mí
      1. Mis Gustos
    2. Contáctame

El concepto detrás del document outline en HTML5 sugiere que las etiquetas de título sean entendidas siempre con referencia a las etiquetas de seccionamiento incorporadas en esta versión del estándar. Las etiquetas <section>, <article>, <aside> y <nav>, pueden ayudar a crear una estructura más lógica en el document outline.

Los aspectos más importantes a considerar dentro del document outline en HTML5 para entender realmente cómo aplicar las etiquetas de título son los siguientes:

Sectioning root (sección raíz):
Es un contenedor que provee el scope para las secciones definidas dentro de él. Cada uno tiene un diferente outline y la etiqueta es considerado el superior de todos. Otras son: <blockquote>, <figure>, <td>, <details>, <dialog>, y <fieldset>
Sectioning content (sección de contenido):
Cada sección raíz es dividido en una serie de secciones de contenido, los que son anidables y semánticos. El tipo debe ser elegido y utilizado según la naturaleza del contenido que va a contener: <section>, <article>, <nav> y <aside>
Heading content (contenido encabezado):
Son etiquetas de texto para las secciones de contenido: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>

Finalmente, un ejemplo práctico puede ser considerado el siguiente:


  <h1>Mi Sitio</h1>
  <section>
    <h1>Sobre Mí</h1>
    <p>Lorem ipsum...</p>
    <section>
      <h1>Mis Gustos</h1>
      <p>Lorem ipsum dolor sit amet...</p>
    </section>
  </section>
  <section>
    <h1>Contáctame</h1>
    <p>...</p>
  </section>
  1. Mi Sitio
    1. Sobre Mí
      1. Mis Gustos
    2. Contáctame

Sugerencia:

A continuación se sugiere un uso mental para las etiquetas de título dentro de una estructura de seccionamiento HTML5, el que por supuesto depende mucho del tipo de proyecto web en que estés trabajando:

  • Utiliza una etiqueta <h1> por sección raíz ó sección de contenido.
  • Debería siempre agregarse un <h1> entre la etiqueta <body> y la primera sección de contenido, para identificar el documento completo.
  • Cuando una etiqueta <h1> identifica una sección de contenido, ésta debe estar ubicada inmediatamente al abrir la etiqueta.
  • Dado lo anterior, siempre la segunda etiqueta de título debe ser un <h2> ó menor que la anterior para crear una estructura ordenada en cascada del document outline.
  • La especificación del estándar HTML5 permite que cualquier etiqueta de título sea utilizada para identificar una sección, de la <h1> a la <h6>.

Links:

Comentarios

  1. Darwing [#]

    Gracias por compatir siempre leo tus CSSLab Weekly

  2. Gino [#]

    Muy buen articulo, aparte de la estructura lógica de los títulos ordenados por secciones yo ocupo para los title de las secciones, así me ordeno tambien.
    Saludos,

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab