Etiquetas de título en HTML5

17/Ago/2016 105

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. erotik [#]

    whoah this blog is excellent i love reading your articles. Keep up the good work! You know, lots of people are looking around for this information, you could aid them greatly. Rhody Giorgi Claudina

  2. Dariusovaft [#]

    Круто, давно искал
    _________________
    играть в казино 888 на деньги

  3. credit card number hdfc bank [#]

    Excellent post. I used to be checking constantly this weblog and I am
    impressed! Extremely useful info particularly the closing part 🙂 I take care of such information much.
    I was looking for this particular info for a long time.
    Thanks and good luck.

  4. itubolawd Bandar Bola Tangkas Online Terpercaya [#]

    Do you mind if I quote a couple of your articles
    as long as I provide credit and sources back to your site?
    My website is in the exact same area of interest as yours and my visitors would truly benefit from a lot
    of the information you provide here. Please let
    me know if this alright with you. Thanks a lot!

  5. book swap [#]

    Oh my goodness! Incredible article dude! Thanks,
    However I am encountering troubles with your RSS.
    I don’t understand the reason why I can’t join it. Is there anybody else getting identical RSS problems?
    Anybody who knows the answer can you kindly respond?
    Thanx!!

Deja tu Comentario

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

CSSLab