HTML
Cómo organizar títulos y subtítulos con h1–h6 para comunicar la jerarquía del contenido sin elegir niveles por tamaño visual.
Los elementos – representan niveles de encabezado y construyen una jerarquía comprensible del contenido.
h1h6<h1>Guía de HTML</h1>
<h2>Semántica</h2>
<h3>Encabezados</h3>Una página suele tener un h1 que identifica su tema principal:
<main>
<h1>Servicios de desarrollo web</h1>
</main>HTML permite más de un h1 en ciertos contextos, pero el outline automático de secciones no ofrece una experiencia consistente. Una jerarquía explícita con un principal suele ser más clara.
<h1>Portfolio</h1>
<h2>Proyectos recientes</h2>
<h3>DomiSys</h3>
<h3>SpendControl</h3>
<h2>Experiencia</h2>Los niveles reflejan subordinación temática.
<h1>Portfolio</h1>
<h4>Proyectos recientes</h4>Puede seguir siendo técnicamente interpretable, pero oculta la relación y dificulta navegación. Evita saltos cuando no existe una razón estructural.
<h2 class="text-sm">Información técnica</h2>Puede verse pequeño y seguir siendo h2.
<p class="hero-title">Texto enorme</p>No se convierte en encabezado por el tamaño.
<section aria-labelledby="services-title">
<h2 id="services-title">Servicios principales</h2>
...
</section>El heading visible identifica la sección y puede usarse como accessible name mediante aria-labelledby cuando la región lo necesita.
Cards pueden compartir niveles y nombres:
<section>
<h2>Proyectos</h2>
<article>
<h3>DomiSys</h3>
</article>
<article>
<h3>SpendControl</h3>
</article>
</section>El nivel depende de la posición en la jerarquía, no de si el componente se llama CardTitle.
Un componente no debería fijar siempre h2 si puede aparecer bajo niveles distintos.
Opciones:
Evita permitir cualquier tag sin controlar la jerarquía global.
Un texto introductorio grande puede ser un párrafo:
<p class="eyebrow">Desarrollador Full Stack</p>
<h1>Nicolás Garzón</h1>No todo texto destacado necesita heading.
<hgroup>
<h1>HTML</h1>
<p>Semántica, accesibilidad y plataforma web</p>
</hgroup>Agrupa un heading con subtítulo o texto secundario. No sirve para envolver varios niveles jerárquicos arbitrarios.
<div role="heading" aria-level="2">Título</div>Puede representar un heading cuando HTML nativo no es posible, pero normalmente es mejor utilizar h2.
Usuarios de lectores de pantalla suelen recorrer la lista de encabezados para entender la página. Una jerarquía clara funciona como índice.
El texto debe ser descriptivo:
<h2>Configuración del proyecto</h2>Mejor que:
<h2>Más información</h2>No añadas headings invisibles solo para “arreglar SEO”. Si un heading es necesario para comprender una sección, debería tener una representación útil para usuarios.
Un heading visualmente oculto puede ser apropiado cuando la región necesita nombre pero el diseño comunica el contexto de otra forma; debe ser una decisión accesible, no keyword stuffing.
<main>
<h1>Desarrollo aplicaciones web de principio a fin</h1>
<section aria-labelledby="services-title">
<h2 id="services-title">Servicios principales</h2>
<article>
<h3>Aplicaciones web y sistemas de gestión</h3>
<p>...</p>
</article>
<article>
<h3>Desarrollo frontend</h3>
<p>...</p>
</article>
</section>
</main>¿Por qué un título visual de 48px no debería ser un h1 automáticamente?
Porque el nivel depende de su función dentro de la jerarquía temática, no de su tamaño visual.
Landmarks y estructura principal organiza las regiones del documento.