Con las etiquetas <h> le das a tu documento HTML o a tus co­n­te­ni­dos la es­tru­c­tu­ra básica necesaria. Con los di­fe­re­n­tes tipos di­s­po­ni­bles, como <h1> o <h2>, haces que la jerarquía de tus páginas web sea más co­m­pre­n­si­ble tanto para los motores de búsqueda como para los usuarios.

Web Hosting
El hosting que crece con tu proyecto
  • Tiempo de actividad de 99.99 % y seguridad ga­ra­n­ti­za­da
  • Aumenta el re­n­di­mie­n­to según el tráfico de tu página web
  • Incluye dominio, SSL, e-mail y soporte 24/7

¿Qué son las etiquetas HTML heading y cuál es su im­po­r­ta­n­cia?

Las etiquetas de cabecera son elementos HTML que te permiten definir cabeceras en un documento HTML. Este tipo es­pe­cí­fi­co de etiquetas HTML es fu­n­da­me­n­tal tanto para la es­tru­c­tu­ra como para la semántica de una página web, y cumplen los si­guie­n­tes pro­pó­si­tos:

  • Jerarquía y es­tru­c­tu­ra: las etiquetas de cabecera ayudan a los vi­si­ta­n­tes y a los motores de búsqueda a co­m­pre­n­der mejor tus co­n­te­ni­dos y es­tru­c­tu­ra.
  • Op­ti­mi­za­ción para motores de búsqueda: el uso correcto de HTML <h1> y similares puede mejorar tu posición en los motores de búsqueda. Es­pe­cia­l­me­n­te al utilizar palabras clave im­po­r­ta­n­tes en los en­ca­be­za­dos, puedes ganar puntos decisivos.
  • Diseño y ma­que­ta­ción: las etiquetas de cabecera HTML también son in­di­s­pe­n­sa­bles para un diseño gráfico cómodo. Puedes es­ta­ble­cer la apa­rie­n­cia de cada tipo de cabecera en tu hoja de estilos CSS, y cualquier ajuste en el diseño se aplicará au­to­má­ti­ca­me­n­te a todas las cabeceras con la etiqueta <h>.
  • Ac­ce­si­bi­li­dad: los lectores de pantalla utilizan las cabeceras HTML para leer tus co­n­te­ni­dos de manera clara y co­m­pre­n­si­ble para personas con di­s­ca­pa­ci­da­des visuales.
Nota

La etiqueta <h> para cabeceras no debe co­n­fu­n­di­r­se con la etiqueta header<header>. Esta última se usa para marcar la cabecera de un documento HTML o una página web, donde se en­cue­n­tran elementos como logotipos y nombres de marcas, una na­ve­ga­ción o elementos CTA.

¿Qué tipos de cabecera HTML existen?

Para marcar las cabeceras en HTML, se utilizan las etiquetas <h1> a <h6>. La etiqueta <h1> re­pre­se­n­ta la cabecera más im­po­r­ta­n­te, que ge­ne­ra­l­me­n­te se ca­ra­c­te­ri­za por tener el tamaño de fuente más grande en el diseño. Con el tipo <h6> defines la cabecera menos im­po­r­ta­n­te, que ocupa el nivel más bajo de la jerarquía:

  • HTML <h1>: la etiqueta <h1> forma la cabecera principal de una página web. Debe reflejar siempre el tema principal o el título de toda la página. El uso de palabras clave es eficiente y crucial.
  • HTML <h2>: la etiqueta <h2> define los su­b­tí­tu­los más im­po­r­ta­n­tes. In­tro­du­cen secciones que están re­la­cio­na­das con el tema principal anunciado en <h1>.
  • HTML <h3> a <h6>: las etiquetas <h3> a <h6> se utilizan para su­b­tí­tu­los que in­tro­du­cen sub-secciones o co­n­te­ni­dos anidados dentro de una sección <h2>.

Con la excepción de <h1> puedes utilizar todos los tipos de en­ca­be­za­dos HTML varias veces en una misma página. Es im­po­r­ta­n­te que no te saltes ningún nivel; por ejemplo, no debe haber contenido bajo una cabecera <h4> in­me­dia­ta­me­n­te después de una sección <h2>.

Compra y registra tu dominio ideal
  • Ce­r­ti­fi­ca­do SSL Wildcard gratis
  • Registro privado
  • Función Domain Connect para una co­n­fi­gu­ra­ción DNS si­m­pli­fi­ca­da gratis

Sintaxis de las etiquetas HTML <h> con ejemplo de código

Los en­ca­be­za­dos HTML di­s­po­ni­bles siempre se insertan en un documento siguiendo el patrón típico de las etiquetas HTML: con una etiqueta de apertura defines el inicio de una cabecera, y una etiqueta de cierre marca el final de la cabecera. Los números en ambas etiquetas deben ser siempre los mismos. La sintaxis es la siguiente (aquí eje­m­pli­fi­ca­da con una <h1>:

<h1>*TEXTO*</h1>
html

Para concluir, queremos ilustrar el uso de las etiquetas de cabecera HTML con un ejemplo concreto. Los co­n­te­ni­dos de una página de cocina hi­po­té­ti­ca se es­tru­c­tu­ran cla­ra­me­n­te uti­li­za­n­do los su­b­tí­tu­los de los tipos <h2> y <h3>. De esta manera, los usuarios pueden navegar fá­ci­l­me­n­te entre las di­fe­re­n­tes ca­te­go­rías de recetas:

<!DOCTYPE html> 
<html> 
<body> 
 
<h1>Consejos de recetas para aperitivos, platos principales y postres</h1> 
<p>Descubre recetas deliciosas y consejos culinarios.</p> 
 
<h2>Snacks y aperitivos</h2> 
<p>Platos pequeños y bocados para picar.</p> 
 
<h3>Ensaladas</h3> 
<p>Ideas frescas y crujientes para ensaladas.</p> 
 
<h3>Salsas y untables</h3> 
<p>Recetas para deliciosas salsas y untables.</p> 
 
<h2>Platos principales</h2> 
<p>Platos principales sabrosos y contundentes para cualquier ocasión.</p> 
 
<h3>Platos vegetarianos</h3> 
<p>Recetas vegetarianas saludables y sabrosas.</p> 
 
<h3>Platos de carne</h3> 
<p>Recetas para platos de carne jugosos y aromáticos.</p> 
 
<h2>Postres</h2> 
<p>Dulces tentaciones y postres para el final perfecto.</p> 
 
<h3>Tartas y pasteles</h3> 
<p>Recetas de repostería para deliciosas tartas y pasteles.</p> 
 
<h3>Helados y sorbetes</h3> 
<p>Recetas refrescantes y deliciosas para helados.</p> 
 
</body> 
</html>
html
Ir al menú principal