Etiquetas de título en HTML5

17/Ago/2016 5522

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. 솔레어카지노 [#]

    This piece of writing is in fact a fastidious one
    it assists new the web viewers, who are wishing in favor of blogging.

  2. betway sports [#]

    Hello every one, here every person is sharing these kinds of familiarity, thus it’s good to read this website,
    and I used to pay a quick visit this web site all the time.

  3. backlink satın al [#]

    It is truly an incredible article. I follow this blog constantly. I find the most accurate information here.

  4. 바카라 사이트 [#]

    Wow, this post is good, my sister is analyzing these kinds
    of things, therefore I am going to convey her.

  5. live casino [#]

    Do you have any video of that? I’d want to find
    out more details.

  6. Different Types of Terpenes Found in Hemp [#]

    I oversee a vape shop website directory https://allvapestores.com аnd ѡe have һad а
    posting from a vape store in tһe UᏚA that ⅼikewise offeгs CBD goods.
    A Calendar m᧐nth later on, PayPal һas contacted use to claim
    thɑt oᥙr account hɑs been restricted and have axked us tо take away PayPal ɑs a payment solution from
    oᥙr vape shop directory. Ꮃe do not offer
    for sale CBD product lines lіke CBD oil. We simply offer interneet marketing ssrvices tο CBD firms.
    I һave checked ߋut Hollanbd & Barrett– tһe UK’s Major Health and wellness
    Retail store аnd if үoᥙ take а ɡood peek, you wilⅼ witness that they supply ɑ pretty
    wide-ranging variety оf CBD ɡoods, pɑrticularly CBD oil
    and tһey aⅼso haрpen to take PayPal aѕ a settlement solution. Іt appears
    tһat PayPal іѕ employing contradictory standards tⲟ mаny Different Types of Terpenes Found in Hemp firms.
    Due to thіs stipulation, I can no lߋnger accept
    PayPal oon my CBD-related website. Ƭhis hass restricted mʏ payment possibilities
    аnd noԝ, I am heavily dependent oon Cryptocurrency payments ɑnd straightforwaard bank transfers.
    Ι haѵе consulted ɑ lawyer from a Magic Cirhle law office iin Ƭhe city off london ɑnd they
    stated that whаt PayPal іs doing iis completely illegal аnd inequitable aas it ought tⲟ bee applying а consistent stanjdard to all firms.
    I am yet tߋ consultt aanother legal representative
    fгom a UЅ law practice in London tto ѕee wһat PayPal’ѕ legal position іs inn tһe United Ꮪtates.
    In the meantime, I wоuld Ьe vеry appreciative if anyone here at csslab.cl сould provide me witһ
    alternative payment processors/merchants tһat ᴡork with CBD companies.

  7. Kiablabs [#]

    buy generic viagra online safely

  8. バカラ [#]

    It’s an awesome piece of writing in support of all the
    web viewers; they will take advantage from it I am sure.

  9. 솔레어카지노 [#]

    Piece of writing writing is also a excitement, if you know after that you can write or else it is complicated to write.

  10. 188bet [#]

    I have been exploring for a little for any high quality articles or blog posts in this sort of area .
    Exploring in Yahoo I finally stumbled upon this web site.

    Reading this info So i am satisfied to convey that I’ve a very good
    uncanny feeling I discovered just what I needed.
    I such a lot without a doubt will make sure to do not put out of your mind this web site and
    give it a look regularly.

  11. スロット 新台 [#]

    Simply want to say your article is as amazing.
    The clarity for your put up is just nice and i can suppose you’re knowledgeable on this subject.
    Fine with your permission allow me to clutch your feed to keep updated with impending post.

    Thank you one million and please keep up the rewarding work.

  12. medicine lyrics [#]

    Hello just wanted to give you a quick heads up.
    The words in your content seem to be running off the screen in Safari.
    I’m not sure if this is a format issue or something to do with
    browser compatibility but I thought I’d post to let you know.

    The design and style look great though! Hope you get the problem
    fixed soon. Thanks

  13. 빅카지노 [#]

    Hello, I read your new stuff like every week. Your story-telling style is
    witty, keep it up!

  14. 안전놀이터주소 [#]

    Hey there! Do you know if they make any plugins to help with Search Engine Optimization?
    I’m trying to get my blog to rank for some targeted
    keywords but I’m not seeing very good gains.
    If you know of any please share. Thank you!

  15. 올인 119 [#]

    This page really has all the information I wanted about
    this subject and didn’t know who to ask.

  16. indian games [#]

    I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to design my own blog and would like to find out where u got this from.
    thank you

  17. 새로워진 롯데 [#]

    Genuinely when someone doesn’t understand after that
    its up to other users that they will assist, so here it takes
    place.

  18. casino bonus [#]

    It’s an remarkable post in support of all the
    internet people; they will take benefit from it I am
    sure.

  19. 카지노사이트 [#]

    What’s up to all, because I am really eager of reading this weblog’s post to
    be updated on a regular basis. It includes good stuff.

  20. Zakblabs [#]

    buy cymbalta

  21. online bet [#]

    I enjoy reading an article that will make men and women think.
    Also, thanks for allowing me to comment!

CSSLab