[SOLUCIONADO] Etiquetas h1, h2, h3, h4 y h5

[guille_delfino]

Buenas a todos,

Quisiera saber si alguien puede explicarme el uso correcto de las etiquetas h en html5.

He buscado info al respecto pero hay muchas disparidad en los datos, algunos dicen una cosa y otros dicen otra, aparentemente no todos saben utilizar correctamente esta etiqueta.

Si por ejemplo tengo una sección llamada SERVICIOS y dentro de ella describo los tipos de servicio, reparación, instalación, configuración, etc,.

SERVICIOS sería h1 y reparación, instalación, configuración, etc. sería h2 ?

Y que sucede con los textos que explicativos que detallan cada servicio ? Esos sería h3 o no llevan etiqueta h ?

Si alguien puede iluminarme al respecto o brindarme algún link se lo agradecería.

Desde ya muchas gracias !

[webosiris]

antes que nada una aclaración de vocabulario, es elementos, no etiquetas. Etiquetas son las partes individuales del elemento, por ejemplo <h1> es la etiqueta de apertura y </h1> la etiqueta de clausura del elemento H1

HTML5 funciona algo diferente a como lo hacía HTML4 en este tipo de temas. HTML5 se basa en que hay ciertos elementos que crean secciones en el outline. Puedes ver el outline de un documento en http://gsnedders.html5.org/outliner/

Hay elementos que crean secciones de forma explícita (como section, article, nav, aside) y elementos que las crean de forma implícita (los elementos H) salvo que sucedan ciertas condiciones (como ser el primer título de una sección explícita).

Adicionalmente, la jerarquía de los H es relativa a la sección del outline donde está, por lo que es posible por ejemplo usar varios elementos H1 y que sin embargo jerárquicamente algunos estén subordinados a otros. Se explica mejor con un ejemplo:

Código HTML:

<h1>Título</h1>
<h2>Subtítulo</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod, enim id dignissim pretium, lacus nulla imperdiet est, at consequat ligula massa elementum dui.</p>
<h2>Otro Subtítulo</h2>
 

Código HTML:

<h1>Título</h1>
<section>
<h1>Subtítulo</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod, enim id dignissim pretium, lacus nulla imperdiet est, at consequat ligula massa elementum dui.</p>
</section>
<h2>Otro Subtítulo</h2>
 

ambos ejemplos son de hecho equivalentes y producen ambos el siguiente outline:

• Título
  • Subtítulo
  • Otro Subtítulo

para entenderlo bien creo que lo mejor es que juegues un poco con el outliner y pruebas varias situaciones a ver que resultados te dan.

Si por ejemplo tengo una sección llamada SERVICIOS y dentro de ella describo los tipos de servicio, reparación, instalación, configuración, etc,.
SERVICIOS sería h1 y reparación, instalación, configuración, etc. sería h2 ?

si, eso tiene sentido.

Y que sucede con los textos que explicativos que detallan cada servicio ? Esos sería h3 o no llevan etiqueta h ?

no se bien a que te refieres con "textos explicativos"... son títulos? si ese no es el caso, entonces no

La regla básica para saber si algo es o no un título es: ¿quiero crear una sección nueva en el outline del documento? Si la respuesta es si, entonces es un título.

[guille_delfino]

Webosiris,

Muchas gracias por la corrección y por tu aporte que es muy bueno, ahora ya me va quedando claro el asunto. voy a tener que empezar a jugar un poco con esto para ir comprenidolo y leer el articulo que me pasas por link.

Esto explica bien mis dudas.

Muchas gracias, excelente !

[guille_delfino]

Dejo un link que me pareció interesante, quizá les sirva.

[URL="http://www.hectormainar.com/seo/h1-h2-y-h3-como-utilizar-correctamente-las-etiquetas-de-encabezado-de-html"]http://www.hectormainar.com/seo/h1-h2-y-h3-como-utilizar-correctamente-las-etiquetas-de-encabezado-de-html[/URL]

[pzin]

Iniciado por guille_delfino

Dejo un link que me pareció interesante, quizá les sirva.

Pero no le hagas mucho caso al enlace. Primero porque es desde el punto de vista del SEO, según pone, y porque no está orientado para nada a HTML5 y los cambios son bastante importantes en ese sentido.

[guille_delfino]

Gracias por el consejo pzin, lo tendré encuenta!!

[guille_delfino]

Una consulta, ¿puedo utilizar más de una etiqueta h1 en una misma página?

Gracias!!

[PHPeros]

Iniciado por guille_delfino

Una consulta, ¿puedo utilizar más de una etiqueta h1 en una misma página?

Gracias!!

Sí que puedes, pero de forma inteligente... Matt Cutts lo explica en un vídeo:

[rocio38mx]

<h1> texto muy grande </h1>
<h2> texto grande </h2>
<h3> texto algo mas grande de lo normal </h3>
<h4> texto normal </h4>
<h5> texto pequeño </h5>
<h6> texto muy pequeño </h6>

[webosiris]

Iniciado por rocio38mx

<h1> texto muy grande </h1>
<h2> texto grande </h2>
<h3> texto algo mas grande de lo normal </h3>
<h4> texto normal </h4>
<h5> texto pequeño </h5>
<h6> texto muy pequeño </h6>

hola, honestamente no se que intentas decir con tu mensaje pero ese es justamente un uso TOTALMENTE ERRÓNEO de los Hx


significado <=======================> apariencia
Por suerte ya no estamos en 1990

[guille_delfino]

Gracias a todos por su aporte !

[Rafael]

Complemento un poco. Ya se dijo que el H1 no es una letra grandota y h6 una diminuta.

En cualquier documento, ya sea una página web, ya sea un documento de word, ya sea una novela, ya sea un libro de bolsillo, o una enciclopedia completa, un título indica jerarquía, pero NO solo dentro de una página aislada, sino dentro de toda la cadena de documentos relacionados.
Un título 1, además de ser de una jerarquía superior a un título 2, en cierta manera también se hermana con un título 1 de otra página, de otro artículo de la misma serie.