Con las etiquetas <h> le das a tu documento HTML o a tus contenidos la estructura básica necesaria. Con los diferentes tipos disponibles, como <h1> o <h2>, haces que la jerarquía de tus páginas web sea más comprensible tanto para los motores de búsqueda como para los usuarios.

Hosting
Hosting de primera al mejor precio
  • 3x más rápido, ahora un 60 % de ahorro
  • Alta disponibilidad >99.99 %
  • Solo en IONOS: hasta 500 GB incluidos

¿Qué son las etiquetas HTML heading y cuál es su importancia?

Las etiquetas de cabecera son elementos HTML que te permiten definir cabeceras en un documento HTML. Este tipo específico de etiquetas HTML es fundamental tanto para la estructura como para la semántica de una página web, y cumplen los siguientes propósitos:

  • Jerarquía y estructura: las etiquetas de cabecera ayudan a los visitantes y a los motores de búsqueda a comprender mejor tus contenidos y estructura.
  • Optimizació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. Especialmente al utilizar palabras clave importantes en los encabezados, puedes ganar puntos decisivos.
  • Diseño y maquetación: las etiquetas de cabecera HTML también son indispensables para un diseño gráfico cómodo. Puedes establecer la apariencia de cada tipo de cabecera en tu hoja de estilos CSS, y cualquier ajuste en el diseño se aplicará automáticamente a todas las cabeceras con la etiqueta <h>.
  • Accesibilidad: los lectores de pantalla utilizan las cabeceras HTML para leer tus contenidos de manera clara y comprensible para personas con discapacidades visuales.
Nota

La etiqueta <h> para cabeceras no debe confundirse con la etiqueta header<header>. Esta última se usa para marcar la cabecera de un documento HTML o una página web, donde se encuentran elementos como logotipos y nombres de marcas, una navegació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> representa la cabecera más importante, que generalmente se caracteriza por tener el tamaño de fuente más grande en el diseño. Con el tipo <h6> defines la cabecera menos importante, 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 subtítulos más importantes. Introducen secciones que están relacionadas con el tema principal anunciado en <h1>.
  • HTML <h3> a <h6>: las etiquetas <h3> a <h6> se utilizan para subtítulos que introducen sub-secciones o contenidos anidados dentro de una sección <h2>.

Con la excepción de <h1> puedes utilizar todos los tipos de encabezados HTML varias veces en una misma página. Es importante que no te saltes ningún nivel; por ejemplo, no debe haber contenido bajo una cabecera <h4> inmediatamente después de una sección <h2>.

Dominios web
Compra y registra tu dominio ideal
  • Tu dominio protegido con Certificado SSL Wildcard gratis
  • Función Domain Connect para una configuración DNS simplificada gratis
  • Registro privado y gratis para mayor seguridad

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

Los encabezados HTML disponibles 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í ejemplificada con una <h1>:

<h1>*TEXTO*</h1>
html

Para concluir, queremos ilustrar el uso de las etiquetas de cabecera HTML con un ejemplo concreto. Los contenidos de una página de cocina hipotética se estructuran claramente utilizando los subtítulos de los tipos <h2> y <h3>. De esta manera, los usuarios pueden navegar fácilmente entre las diferentes categorí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
¿Le ha resultado útil este artículo?
Ir al menú principal