Sistema de Encabezados: Reglas H1, H2 y H3

Un sistema de encabezados es el conjunto ordenado del título de una página y sus etiquetas de sección. Convierte una página larga en una ruta legible para las personas y en un esquema legible por máquinas para los motores de búsqueda, la tecnología de asistencia y los sistemas de respuesta de IA.

El título de la página que ves arriba es el H1 único de esta página. Cada especificación importante a continuación es un H2, y cualquier subdivisión dentro de una sección principal es un H3. Ese esquema en vivo es el elemento renderizado: sus niveles expresan relaciones, no tamaños de fuente.

Por qué es importante este elemento

Los lectores rara vez consumen una página larga de una sola vez sin interrupciones. Escanean en busca de una pregunta reconocible, comparan las etiquetas de las secciones con su necesidad actual y deciden dónde detenerse. Los encabezados descriptivos reducen ese esfuerzo porque cada uno hace una pequeña promesa sobre lo que sigue. «Cómo los IDs estables de encabezados preservan las citas» es útil de un vistazo; «Algunas reflexiones más» no lo es.

La misma jerarquía favorece la extracción automatizada, lo que significa que un sistema automatizado puede identificar una sección, entender cómo se relaciona con el tema de la página y recuperarla sin confundirla con una sección vecina. H1 establece el tema de la página. H2 divide ese tema en aspectos principales. H3 reduce un H2 a un método, caso, criterio o excepción. Un nivel saltado oculta esa relación y obliga a un analizador a inferir si una subsección es un hermano, un hijo o un bloque no relacionado.

Los encabezados también crean secciones direccionables. Un identificador de fragmento es la parte de una URL después de #, como #qa-checklist. Los resultados de búsqueda, enlaces internos, marcadores del navegador y respuestas de IA pueden apuntar a ese destino exacto. Por lo tanto, un ID autogenerado renombrado casualmente puede romper una URL incluso cuando la página en sí sigue existiendo. El encabezado no es decoración: su texto define la sección y su ID se convierte en una dirección pública duradera.

Sigue las reglas de escritura de elementos cuando el propósito de una sección coincida con un elemento tipificado. Un H2 llamado «Advertencia» no reemplaza un cuadro de advertencia, y un H2 llamado «Comparación» no reemplaza una tabla de comparación. Los encabezados proporcionan jerarquía documental; los elementos tipificados proporcionan estructura específica para un propósito. Ambos pueden ser necesarios.

Cuándo usarlo

Usa el sistema de encabezados en toda página indexable sustancial. Incluso una página corta necesita un H1. Añade secciones H2 cuando el lector deba moverse entre preguntas, etapas, criterios o grupos de evidencia distintos. Añade subsecciones H3 solo cuando un H2 contenga al menos dos partes genuinamente distintas que se beneficien de una navegación separada.

Los casi-aciertos son etiquetas visuales que parecen encabezados pero no pertenecen al esquema del artículo:

• El título de una tarjeta nombra una tarjeta repetida; no es automáticamente una sección del documento.
• Una etiqueta de llamada como «Consejo» o «Importante» identifica el tipo de cuadro; no se convierte en un H2 simplemente porque está en negrita.
• El título de un gráfico identifica una figura. Pertenece al pie de foto o al nombre accesible de la figura, a menos que el gráfico inicie una sección completa.
• Una etiqueta de menú de navegación, migas de pan, pestaña, control de acordeón, encabezado de pie de página y título modal pueden necesitar semántica de componente, pero no entran en la jerarquía principal del artículo.
• Un eslogan promocional grande es texto de exhibición. El tamaño de fuente no puede ascenderlo al H1 del documento.

No añadas un encabezado meramente para introducir una oración, dividir una explicación continua o crear espacio visual de respiro. Usa espaciado entre párrafos o edición para esas tareas. Un encabezado útil marca una sección lo suficientemente sustancial como para responder a una necesidad distinta del lector.

Dónde colocar los encabezados

La posición expresa la parentela. Coloca el H1 al inicio del contenido principal, después de las migas de pan u otra navegación del sitio y antes de la introducción. Coloca cada H2 antes de una sección principal. Coloca un H3 solo después de su H2 padre y del contenido orientador de este, nunca antes del primer H2 y nunca como un par elegido por apariencia visual.

Dos encabezados no pueden estar adyacentes en el contenido de un artículo redactado. Cada encabezado debe poseer contenido útil antes del siguiente encabezado del mismo nivel o de un nivel más profundo. Esta regla evita etiquetas de sección vacías, proporciona contexto al lector antes de una lista de subsecciones y crea pasajes extraíbles en lugar de un esquema desnudo.

Anatomía

La anatomía etiquetada tiene cinco partes:

1. H1: el tema único de la página y la parte superior del esquema de contenido.
2. H2: una pregunta, etapa o dimensión principal dentro de ese tema.
3. H3: un tema hijo que no puede entenderse correctamente sin su H2 padre.
4. Contenido propio: la respuesta, evidencia, instrucciones o explicación entre un encabezado y el siguiente encabezado del mismo nivel o superior.
5. ID estable: el destino del fragmento adjunto al encabezado y preservado después de la publicación.

La relación sigue siendo válida si la tipografía cambia. Un tema puede renderizar H2 con una fuente más pequeña en móvil, pero debe seguir siendo H2 en el HTML. Por el contrario, hacer que un párrafo sea grande y negrita no le otorga semántica de encabezado ni un destino de fragmento.

Ejemplos de diseño

Las variantes de diseño corresponden a niveles semánticos y estados reales de ajuste, no a opciones de color arbitrarias.

Título de página H1: muestra el tema único al inicio del contenido principal. Una descripción de apoyo puede seguir, pero ninguna ceja, logotipo o eslogan de héroe se convierte en otro H1.

Sección principal H2: haz que la sección sea comprensible desde una tabla de contenido y acompáñala con contenido que establezca el alcance.

Subsección H3: usa el nivel más pequeño porque el tema es subordinado, no porque el diseñador quiera texto más pequeño.

Encabezado ajustado: permite un ajuste natural de dos líneas en pantallas estrechas. No acortes un encabezado claro para convertirlo en una etiqueta ambigua solo para mantenerlo en una línea.

Estados anclados: muestra hover y enfoque de teclado sin hacer que el ancla sea la única forma de entender el destino. La navegación directa debe compensar cualquier encabezado fijo para que el encabezado no quede oculto.

Parámetros

El sistema de encabezados es un contrato documental más que un componente decorativo. Sus parámetros definen el esquema, el texto que ven los lectores, el contenido que posee cada nodo y la URL a través de la cual se puede alcanzar ese nodo.

Los límites de caracteres y palabras son bandas editoriales, no razones para omitir la especificidad necesaria. Un encabezado de 94 caracteres que distingue dos procedimientos similares es mejor que uno corto pero engañoso. Los límites estructurales son estrictos: un H1, sin niveles saltados, sin IDs duplicados y sin secciones vacías.

Sintaxis y ejemplos de código

La forma canónica portátil envuelve el esquema nativo en una directiva heading-system. El primer encabezado se corresponde con el título del documento; los encabezados posteriores permanecen como nodos de contenido ordenados. Los IDs explícitos se añaden una vez que los encabezados se hacen públicos.

Directiva Markdown portátil

:::heading-system
# Rotar una clave de API sin tiempo de inactividad

Reemplaza la credencial en cada servicio dependiente antes de revocar la clave antigua.

## Preparar el reemplazo

Registra cada servicio que actualmente lee la credencial.

### Identificar consumidores ocultos

Verifica trabajos programados, secretos de despliegue e integraciones locales.

## Verificar y revocar

Prueba el reemplazo, luego revoca la clave expuesta.
:::

En la publicación, fija los IDs estables en lugar de permitir que futuras ediciones de texto los regeneren:

## Preparar el reemplazo {#prepare-replacement}
### Identificar consumidores ocultos {#identify-hidden-consumers}

Shortcode de Hugo

{{< heading-system h1="Rotar una clave de API sin tiempo de inactividad" >}}
## Preparar el reemplazo {#prepare-replacement}

Registra cada servicio que actualmente lee la credencial.

### Identificar consumidores ocultos {#identify-hidden-consumers}

Verifica trabajos programados, secretos de despliegue e integraciones locales.
{{< /heading-system >}}

Este es el contrato del adaptador Hugo, no una afirmación de que este repositorio registre un shortcode heading-system. Una implementación de Hugo puede continuar renderizando el H1 desde el frontmatter y los encabezados del cuerpo a través de Markdown, como hace esta página, siempre que valide la misma jerarquía y preserve los IDs explícitos.

Bloque de WordPress

<!-- wp:heading {"level":2,"anchor":"prepare-replacement"} -->
<h2 id="prepare-replacement">Preparar el reemplazo</h2>
<!-- /wp:heading -->

<p>Registra cada servicio que actualmente lee la credencial.</p>

<!-- wp:heading {"level":3,"anchor":"identify-hidden-consumers"} -->
<h3 id="identify-hidden-consumers">Identificar consumidores ocultos</h3>
<!-- /wp:heading -->

WordPress debería almacenar el H1 en el campo de título de página o en un bloque héroe aprobado, no como un segundo bloque de encabezado en el cuerpo del artículo. Establece explícitamente el ancla HTML de cada encabezado publicado para que una edición posterior de redacción no cambie silenciosamente su URL.

Ejemplos

Bueno: el esquema predice respuestas completas

# Cómo elegir un flujo de trabajo de aprobación de facturas

## Definir el riesgo de aprobación
Explica qué valores de factura, proveedores y excepciones necesitan revisión.

### Establecer umbrales de valor
Asigna un aprobador designado a cada umbral y documenta lo que sucede en el límite.

### Gestionar excepciones de política
Envía órdenes de compra faltantes y datos bancarios modificados a una ruta de revisión separada.

## Probar el flujo de trabajo
Ejecuta facturas ordinarias y excepcionales a través de la ruta completa antes del lanzamiento.

Esto funciona porque el H1 enuncia una tarea, cada H2 nombra una etapa principal, cada H3 pertenece a su padre, y cada etiqueta va seguida de contenido que cumple su promesa. Un lector puede escanear el esquema y predecir dónde se cubren los umbrales, las excepciones y las pruebas.

Malo: el estilo sustituye a la jerarquía

# Aprobación de facturas

### Cosas a considerar
## Más información
### Excepciones
### Otros

Esto falla por cuatro razones independientes. Salta de H1 a H3, usa etiquetas que no predicen una respuesta, coloca encabezados uno al lado del otro sin contenido propio, y deja «Excepciones» sin explicación antes del siguiente encabezado. El esquema resultante sugiere una cobertura que la página no proporciona. También crea IDs autogenerados débiles como #otros, que son ambiguos cuando se citan fuera de la página.

Marcado de Schema y accesibilidad

Los encabezados no necesitan un tipo independiente de Schema.org. El H1 normalmente proporciona o refleja el headline de un Article, TechArticle u otra entidad de página apropiada, pero el texto visible y el JSON-LD deben describir el mismo tema. Las secciones H2 y H3 siguen siendo estructura HTML; no fabriques una entidad de schema para cada encabezado. Un encabezado titulado «Preguntas frecuentes» tampoco crea marcado FAQPage por sí solo — los datos visibles de preguntas y respuestas deben cumplir el contrato del elemento FAQ.

La accesibilidad depende del HTML semántico y del orden lógico. Los usuarios de lectores de pantalla pueden navegar por encabezados, inspeccionar una lista de encabezados o saltar directamente entre secciones. Ese flujo se rompe cuando la página salta niveles por estilo, usa párrafos en negrita como encabezados falsos, o incluye encabezados de utilidad y de artículo en una jerarquía incoherente.

Usa elementos <h1>, <h2> y <h3> reales. Mantén visible el texto del encabezado; un aria-label no debe reemplazar un texto claro en pantalla. Los controles ancla necesitan un nombre accesible descriptivo, un enfoque de teclado visible y un objetivo de clic separado del texto del encabezado cuando enlazar todo el encabezado confundiría la selección. Cuando se carga una URL de fragmento, el enfoque del teclado no necesita moverse automáticamente, pero el encabezado de destino debe estar visible y no cubierto por un encabezado fijo.

Los IDs de encabezado deben ser únicos dentro de la página y deben comenzar con una letra. Mantenlos en minúsculas, con guiones, legibles y libres de fechas transitorias o números de posición. Un ID estable puede seguir siendo #verify-results incluso si el encabezado visible mejora de «Verificar los resultados» a «Verificar que la nueva credencial funciona». Si el significado de la sección cambia por completo, crea un nuevo ID y preserva el fragmento antiguo mediante un alias o un comportamiento de redireccionamiento documentado cuando la plataforma lo admita. La especificación separada de enlaces ancla rige los detalles de navegación e interacción de anclas.

Reglas de escritura

Redacta el esquema de la página antes de pulir las etiquetas individuales. Cada encabezado debe responder «¿qué aprenderé, decidiré o haré aquí?» en un lenguaje concreto. Prefiere «Comparar costos de facturación mensual y anual» a «Consideraciones de precios», y «Por qué la importación rechaza IDs duplicados» a «Solución de problemas». Descriptivo no significa verboso; significa que la etiqueta predice el contenido real de la sección.

Usa un H1 de 20 a 80 caracteres. Prefiere encabezados H2 y H3 de 2 a 12 palabras y no más de 90 caracteres. Una guía larga normalmente tiene de 3 a 12 secciones H2. Un H2 necesita al menos una oración de alcance o respuesta antes de cualquier H3. Usa dos o más secciones H3 bajo un padre cuando la subdivisión ayude; un solo H3 a menudo indica que su contenido debería fusionarse en el H2.

Usa mayúscula inicial y minúsculas para el resto (oración con mayúscula inicial), a menos que un nombre propio o nombre de producto requiera mayúsculas. Las preguntas son apropiadas cuando la sección responde la pregunta exacta de inmediato. Las etiquetas declarativas se adaptan a etapas, criterios, hallazgos y especificaciones. Mantén las secciones paralelas gramaticalmente paralelas: usa verbos para una secuencia de proceso, sustantivos para criterios de comparación, o preguntas para un conjunto de preguntas frecuentes.

Nunca pongas esto dentro del texto de un encabezado:

• Enlaces Markdown o URLs en bruto; crean destinos competidores y nombres accesibles inestables.
• Marcadores de nota al pie o citas de fuentes; coloca la evidencia en el contenido propio.
• Emojis usados como etiquetas estructurales, insignias de estado o prefijos decorativos.
• Numeración manual a menos que el tipo de publicación defina una secuencia ordenada estable.
• Lenguaje de CTA como «Comprar ahora», afirmaciones de precio, urgencia o insignias promocionales.
• Instrucciones de estilo, saltos de línea HTML o abreviaturas específicas de dispositivo.
• Una segunda oración que pertenece al párrafo siguiente.

No escribas etiquetas ingeniosas que dependan del texto circundante para tener sentido. «Se complica la trama» puede funcionar para la voz de un ensayo, pero no proporciona contexto utilizable a un resultado de búsqueda, tabla de contenido, lista de encabezados de lector de pantalla o cita de IA. Preserva la personalidad en la explicación después de un encabezado preciso.

Tipos de publicación que lo usan

El array postTypes del frontmatter impulsa estas relaciones. Cada tipo de publicación listado usa el mismo contrato de jerarquía, mientras que su propia anatomía determina los nombres y el orden exactos de las secciones.

Lista de verificación QA

• La página renderiza exactamente un H1 visible, y este nombra el tema real de la página.
• El esquema pasa de H1 a H2 a H3 sin niveles saltados.
• Cada H3 tiene un H2 padre claro que lo precede.
• Cada encabezado va seguido de contenido propio significativo antes del siguiente encabezado.
• Cada H2 incluye una oración orientadora o de respuesta antes de su primer H3.
• El texto del encabezado es descriptivo cuando se lee solo en una tabla de contenido o lista de encabezados de lector de pantalla.
• Las secciones paralelas usan gramática paralela y niveles equivalentes.
• Los niveles de encabezado reflejan relaciones, no el tamaño de fuente o el peso visual deseado.
• Los propósitos tipificados aún usan sus elementos requeridos; los encabezados no imitan componentes.
• Cada encabezado publicado tiene un ID de fragmento único, legible y estable.
• Los IDs de fragmento existentes permanecen sin cambios cuando el texto visible se edita sin cambiar el significado de la sección.
• La navegación directa por fragmento deja el destino visible debajo de cualquier encabezado fijo.
• El texto del encabezado no contiene enlaces, citas, etiquetas emoji, insignias promocionales ni saltos de línea manuales.
• El esquema HTML sigue siendo coherente con menús, tarjetas, acordeones, modales y otros componentes de la página presentes.
• La página renderizada funciona en anchura estrecha, con encabezados de dos líneas ajustándose sin recorte ni superposición.

Rechaza la página cuando el diseño visual se vea pulido pero el esquema falle. Los defectos de encabezados se acumulan: un nivel saltado o una sección vacía hacen que cada consumidor posterior trabaje más para reconstruir relaciones que la fuente debería haber indicado directamente.

Preguntas frecuentes

Las preguntas a continuación resuelven los casos con mayor probabilidad de crear esquemas inconsistentes entre editores y plataformas. Sus valores autoritativos viven en el frontmatter estructurado [[faq]] de arriba, de modo que la salida visible y cualquier salida de schema elegible puedan compartir una misma fuente.