🧩 ¿Qué son las etiquetas <h1> a <h6>?

Las etiquetas <h1> a <h6> se utilizan para definir encabezados o títulos en HTML. Cada número representa un nivel jerárquico, desde el más importante (<h1>) hasta el menos importante (<h6>). Son fundamentales para la organización del contenido, la accesibilidad y el SEO.

<h1>Título principal</h1>
<h2>Sección</h2>
<h3>Subsección</h3>
<h4>Detalle</h4>
<h5>Ejemplo</h5>
<h6>Nota adicional</h6>

📌 Características generales

• Elemento de bloque: Cada encabezado ocupa todo el ancho disponible y comienza en una nueva línea.
• Semántica: Indican la importancia del contenido, no solo su tamaño visual.
• Jerarquía: Deben usarse en orden descendente para mantener una estructura lógica.
• Estilo por defecto: Los navegadores aplican tamaños de fuente decrecientes desde <h1> hasta <h6>.

🧠 Descripción por niveles

Etiqueta	Nivel	Uso típico	Ejemplo visual
<h1>	1	Título principal de la página	"Bienvenido a mi sitio web"
<h2>	2	Secciones principales	"Servicios"
<h3>	3	Subdivisiones dentro de una sección	"Diseño web"
<h4>	4	Detalles dentro de una subsección	"Diseño responsivo"
<h5>	5	Ejemplos o notas específicas	"Ejemplo de diseño móvil"
<h6>	6	Comentarios o aclaraciones menores	"Nota: se requiere conexión a internet"

🎨 Estilización con CSS

Aunque los navegadores aplican estilos por defecto, puedes personalizarlos:

h1 {
  font-size: 2.5em;
  color: #005f99;
}
h2 {
  font-size: 2em;
  color: #0077cc;
}
/* Y así sucesivamente hasta h6 */

Esto permite mantener la jerarquía semántica mientras adaptas el diseño visual.

🔍 Importancia para SEO y accesibilidad

• SEO: Los motores de búsqueda usan los encabezados para entender la estructura del contenido. El <h1> es especialmente importante.
• Accesibilidad: Los lectores de pantalla navegan por los encabezados para ayudar a los usuarios a orientarse.
• Usabilidad: Una buena jerarquía mejora la experiencia de lectura y navegación.

⚠️ Buenas prácticas

• ✅ Usa solo un <h1> por página (idealmente).
• ✅ Mantén una estructura lógica: no saltes de <h1> a <h4> sin pasar por <h2> y <h3>.
• ✅ No uses encabezados solo para cambiar el tamaño del texto; usa CSS para eso.
• ✅ Agrupa encabezados relacionados con <hgroup> si es necesario.

🧪 Ejemplo completo

<h1>Guía de HTML</h1>
<h2>Etiquetas básicas</h2>
<h3>Encabezados</h3>
<h4>Desde h1 hasta h6</h4>
<h5>Ejemplo práctico</h5>
<h6>Nota: este ejemplo es solo ilustrativo</h6>

Este ejemplo muestra cómo se puede estructurar un documento de forma jerárquica y clara.