# Formatear cabeceras con la etiqueta HTML heading

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.

## ¿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](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/) 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](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/que-es-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](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/lectores-de-pantalla-software-para-necesidades-especiales/) 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](https://www.ionos.mx/digitalguide/online-marketing/vender-en-internet/que-es-un-call-to-action-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>`.

## 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>`:

```html
<h1>*TEXTO*</h1>
```

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:

```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> 
 
<div class="hash d-none" hidden>hash_7ce89bb22013fb524343b46cbd80c25d67cabcb7</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body> 
</html>
```


This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/cabecera-en-html/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/cabecera-en-html/) for AI/LLM consumption.