Etiquetas de título en HTML5

17/Ago/2016 2385

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

    erectile solutions that work at walmart https://www.pharmaceptica.com/

  2. best delta 8 gummies [#]

    It is the best time to make some plans for the long run and it’s time to be happy.
    I’ve learn this publish and if I could I wish to counsel you few interesting things
    or tips. Perhaps you can write subsequent articles regarding this
    article. I want to learn more issues approximately it!

    Look at my page; best delta 8 gummies

  3. flos skygarden 90 cm [#]

    Good day! I know this is kinda off topic but
    I was wondering which blog platform are you using for this site?

    I’m getting fed up of WordPress because I’ve had problems with hackers
    and I’m looking at options for another platform. I would be fantastic if you could point me
    in the direction of a good platform.

  4. Kartell Bourgie Lamp Cost [#]

    I do not know whether it’s just me or if everyone else experiencing problems with your blog.
    It seems like some of the written text within your posts are running
    off the screen. Can someone else please provide feedback and let
    me know if this is happening to them too? This may
    be a issue with my internet browser because I’ve had this happen before.
    Thanks

  5. ph 5 lampe kobber [#]

    Great post. I was checking constantly this blog and I’m impressed!
    Very useful information specifically the last part 🙂 I care for such information much.
    I was seeking this particular information for a very long time.

    Thank you and best of luck.

  6. louis poulsen ph 5 Kobber [#]

    I like it when folks get together and share opinions.
    Great blog, keep it up!

  7. imitatie skygarden lamp [#]

    I quite like reading an article that can make men and women think.
    Also, thank you for allowing for me to comment!

  8. louis poulsen ph 5 valaisin [#]

    Thanks very interesting blog!

  9. Ph Lamp Where To Buy [#]

    Really no matter if someone doesn’t know after that its up to other visitors that they will
    assist, so here it happens.

  10. sky garden replica light 60cm [#]

    Excellent post. Keep writing such kind of info on your blog.
    Im really impressed by it.
    Hey there, You have done a fantastic job.
    I’ll definitely digg it and in my opinion suggest to my
    friends. I am confident they’ll be benefited from this web site.

  11. Home Lighting Mila [#]

    I loved as much as you’ll receive carried out right here.
    The sketch is tasteful, your authored material stylish. nonetheless, you command get got an impatience over that
    you wish be delivering the following. unwell unquestionably come
    more formerly again as exactly the same nearly a lot often inside case you shield this increase.

  12. 007카지노 [#]

    Hi there colleagues, its wonderful post concerning educationand completely defined, keep it up all the time.

  13. Loredophertarry [#]

    https://genisotretinoin.com/ accutane online https://genisotretinoin.com/ – buy accutane online accutane cost

  14. kelaGyncclieria [#]

    https://tadalafilka.com/ tadalafil medication https://tadalafiloz.com/ – prescription tadalafil online tadalafil

  15. kelaGyncclieria [#]

    hydroxychloroquine coronavirus https://chloroquinehydro.com/ – chloroquine prophylaxis buy chloroquine singapore

  16. kelaGyncclieria [#]

    side effects of plaquenil https://hydro-chloroquine.com/ – plaquinol trump hydroxychloroquine

  17. Google Sıralama Yükseltme [#]

    Google sıralama yükseltme hizmeti ile %100 garantili SEO hizmeti edinin!

  18. Defattaithaccug [#]

    buy chloroquine https://canadachloroquine.com/ – what is hydroxychloroquine clorochina

  19. 더킹카지노 [#]

    Hello every one, here every one is sharing these kinds
    of know-how, thus it’s good to read this web site,
    and I used to pay a visit this blog every day.

  20. website [#]

    Aw, this was a really nice post. Taking a few minutes and actual effort to make a really
    good article… but what can I say… I hesitate a lot and
    don’t manage to get nearly anything done.

  21. สมัคร fun88 [#]

    I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it
    for you? Plz reply as I’m looking to create my own blog and
    would like to know where u got this from. cheers

  22. kelaGyncclieria [#]

    aralen medication https://chloroquine500mg.com/ – clonopine meaning aralen retail price

  23. pharmacepticacom [#]

    sildenafil buy nz https://www.pharmaceptica.com/

  24. kelaGyncclieria [#]

    where to buy chloroquine https://hydroxychloroqui.com/ – hydroxychloroquine for sale buy hydroxychloroquine

Deja tu Comentario

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

CSSLab