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. download betway app [#]

    At this moment I am going to do my breakfast, after having my breakfast coming over again to read other news.

  2. www.fun888asia.com web sex “the hound” ทำไมไม่หันมาคุยกันดี ๆ [#]

    Great post however , I was wanting to know if you could write a litte more on this subject?
    I’d be very thankful if you could elaborate a little bit more.

    Bless you!

  3. Construindo Corpos [#]

    Hello colleagues, nice article and good arguments commented at this
    place, I am genuinely enjoying by these.

  4. mos last summer 3d 애니메이션 vn 6 jenny039_s red lingerie [#]

    Fantastic blog! Do you have any suggestions for aspiring writers?
    I’m hoping to start my own website soon but I’m a little lost on everything.
    Would you propose starting with a free platform like WordPress
    or go for a paid option? There are so many choices out there that I’m
    totally confused .. Any suggestions? Cheers!

  5. slack download mac [#]

    Informative article, totally what I needed.

  6. money online [#]

    Quality articles is the key to attract the visitors to visit the web site, that’s what this web site is providing.

  7. software center [#]

    Excellent pieces. Keep posting such kind of info on your page.
    Im really impressed by your site.
    Hello there, You have performed a fantastic job.
    I’ll certainly digg it and in my view recommend to my friends.
    I’m sure they’ll be benefited from this site.

  8. 넷마블 바카라 [#]

    Hi there superb website! Does running a blog like this take a massive amount
    work? I’ve virtually no understanding of coding however I
    was hoping to start my own blog in the near future.
    Anyway, if you have any suggestions or tips for new blog owners please
    share. I understand this is off topic but I simply
    had to ask. Appreciate it!

  9. binance p & l ongororo yaenda [#]

    I simply could not leave your website prior to suggesting that I extremely enjoyed the usual information a person supply to your guests?
    Is gonna be again incessantly to check out new posts

  10. Booblabs [#]

    stromectol for sale

  11. click here [#]

    Genuinely no matter if someone doesn’t be
    aware of after that its up to other people that they will help, so here
    it happens.

  12. 우리카지노 [#]

    Howdy! Quick question that’s completely off topic. Do you know
    how to make your site mobile friendly? My web site looks weird when browsing
    from my iphone4. I’m trying to find a theme
    or plugin that might be able to resolve this
    problem. If you have any suggestions, please share.
    Many thanks!

  13. Sueblabs [#]

    stromectol where to buy

  14. trục tiếp keno [#]

    This site really has all of the info I wanted about this subject and didn’t know who to ask.

  15. 旅 カジ [#]

    I don’t even know the way I finished up right here,
    however I thought this submit used to be great. I don’t know who you are however
    definitely you’re going to a famous blogger for those who are not
    already. Cheers!

  16. forex best selling scalping robot [#]

    After looking into a few of the blog articles on your web page, I seriously like your way of blogging.
    I bookmarked it to my bookmark webpage list and will be checking back in the near future.
    Please check out my web site as well and let me know your opinion.

  17. fiesta grocery store [#]

    I am sure this piece of writing has touched all the internet users, its really really fastidious article on building up new website.

  18. ouran host club [#]

    Hurrah! After all I got a blog from where I know how to genuinely get valuable facts
    concerning my study and knowledge.

  19. banging booty outside the club pt2에 대한 리뷰 보기 [#]

    I have been exploring for a little bit for any high-quality articles or
    weblog posts in this sort of space . Exploring in Yahoo I eventually stumbled
    upon this web site. Studying this info So i am happy to
    convey that I’ve an incredibly good uncanny feeling I came upon just what I
    needed. I most indubitably will make certain to
    do not disregard this site and provides it a glance on a constant basis.

  20. Jackblabs [#]

    prozac 60 mg purchase

  21. drive by exploit [#]

    Great blog! Do you have any suggestions for aspiring writers?
    I’m hoping to start my own site soon but I’m a little lost on everything.
    Would you recommend starting with a free platform like WordPress or go for a paid option? There are so
    many options out there that I’m totally overwhelmed ..
    Any tips? Bless you!

  22. 빅카지노 [#]

    It’s an amazing article for all the online users; they will obtain benefit from it
    I am sure.

  23. Booblabs [#]

    buy cialis on line without prescription

  24. партофтани бинс [#]

    I’m really enjoying the design and layout
    of your website. It’s a very easy on the eyes which makes it
    much more pleasant for me to come here and visit more often. Did you hire
    out a designer to create your theme? Fantastic work!

  25. Integration [#]

    Heya i’m for the first time here. I found this board and I find It
    really useful & it helped me out a lot. I hope
    to give something back and aid others like you helped me.

  26. オンラインカジノ [#]

    I don’t even know how I ended up here, but I thought this post
    was great. I don’t know who you are but certainly you are going to a famous blogger if you aren’t already 😉
    Cheers!

  27. ベット 365 とは [#]

    Hi there, i read your blog occasionally and i own a similar one and i was just wondering if you get
    a lot of spam comments? If so how do you stop it, any plugin or anything you can recommend?
    I get so much lately it’s driving me crazy so any support is very much appreciated.

  28. tifa 벽 시장의 새로운 신부 chobixpho [#]

    Yes! Finally something about 요즘 많이 즐겨요.

  29. prednisoneforgout [#]

    prednisone over the counter prednisone indications

  30. whatisprovigil [#]

    provigil half life https://provigilmodafinill.com/

  31. カジ旅 [#]

    Hi there! Would you mind if I share your blog
    with my facebook group? There’s a lot of folks that I think would really enjoy
    your content. Please let me know. Many thanks

  32. 007카지노 [#]

    I’m not that much of a online reader to be honest but your sites
    really nice, keep it up! I’ll go ahead and bookmark your site to
    come back in the future. All the best

  33. leather backpack purse [#]

    I every time used to read article in news papers but now as I am a user of internet therefore from
    now I am using net for content, thanks to web.

  34. cialis alternative [#]

    generic cialis cialis tablets

  35. haitian restaurant brooklyn [#]

    Hi! I know this is kind of off topic but I was wondering
    which blog platform are you using for this website?
    I’m getting sick and tired of WordPress because I’ve had
    issues 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.

  36. GaloInvake [#]

    zithromax powder online

  37. stromectol [#]

    Accustomed Dope Far this product
    https://ivermectinsts.com ivermectin tablets for humans
    https://ivermectinsts.com ivermectin tablets
    https://stromectolivermect.com ivermectin for sale
    https://ivermectinst.com ivermectin tablets for sale
    https://ivermectinst.com ivermectin tablets for humans

  38. binance p & l lub laij zauv [#]

    Ahaa, its pleasant discussion about this piece of writing here at this website, I have read all that, so at this time me also commenting
    at this place.

  39. Www.Mornd.Com [#]

    Howdy! This is my first comment here so I just wanted to give a quick shout out and tell you I truly enjoy reading your posts.
    Can you suggest any other blogs/websites/forums that cover the same topics?
    Thanks a lot!

  40. 푸틴은 여름을 보내고 있다 [#]

    I am really impressed with your writing skills and also with the layout on your blog.
    Is this a paid theme or did you modify it yourself?
    Anyway keep up the nice quality writing, it is rare to see a great blog like this one
    today.

  41. Sueblabs [#]

    ivermectin lotion cost

  42. Evablabs [#]

    where can i buy generic viagra online

  43. slot games [#]

    Greetings! Very useful advice within this article!

    It’s the little changes that produce the biggest changes.
    Thanks a lot for sharing!

  44. オンラインカジノ おすすめ [#]

    Hello just wanted to give you a brief heads up and let you know a few of
    the pictures aren’t loading properly. I’m not sure why but I think
    its a linking issue. I’ve tried it in two different browsers and both show the same
    outcome.

  45. ジパングカジノ 評判 [#]

    When someone writes an article he/she keeps the image of a user in his/her mind that how a user can know it.

    So that’s why this piece of writing is amazing. Thanks!

  46. Annablabs [#]

    cialis online mastercard

  47. 드퀘11 그로타 카지노 코인 벌기 [#]

    I have to thank you for the efforts you’ve put in writing this site.
    I’m hoping to view the same high-grade content from you later on as well.
    In fact, your creative writing abilities has
    inspired me to get my own, personal blog now 😉

  48. music dictation software [#]

    What’s up, I log on to your new stuff like every week.
    Your humoristic style is awesome, keep doing what you’re doing!

  49. 코인카지노 [#]

    Thanks for finally talking about > Etiquetas de título en HTML5 |
    CSSLab | Laboratorio de ideas web < Liked it!

  50. online slots [#]

    Howdy! Would you mind if I share your blog with my zynga group?
    There’s a lot of folks that I think would really enjoy your content.
    Please let me know. Cheers

CSSLab