Español

Herramientas de desarrollo · Editor HTML WYSIWYG

Los encabezados no son textos grandes y en negrita: por qué los niveles de encabezado son importantes en el contenido web

· Por qué es importante

html accesibilidad edición de texto

Una jerarquía de encabezados que se ramifica desde el título de una página en subsecciones ordenadas
Ilustración de vector original de ToolAcre

Explica por qué h1 a h6 forman un esquema de documento en el que confían los usuarios de lectores de pantalla y los motores de búsqueda, y cómo comprobar que los títulos visuales sean títulos reales.

El artículo sin encabezados: se abre con una página donde cada encabezado aparente es un párrafo en negrita.

Una línea ampliada y en negrita con CSS puede parecer un encabezado de sección sin dejar de ser un párrafo en el árbol del documento. Los lectores videntes pueden inferir la división a partir de la tipografía, pero el software no recibe ningún elemento de título para identificar, recopilar o navegar. La apariencia por sí sola no crea jerarquía.

ToolAcre evita controles de estilo y proporciona opciones de bloques explícitas para h1 a h4. Por lo tanto, un escritor puede codificar un título en lugar de simularlo con un texto potente. La lista de permitidos también acepta h5 y h6 en el código fuente, aunque la barra de herramientas no anuncia controles para esos niveles.

Qué hace un elemento de encabezado más allá del tamaño: explica el esquema, los accesos directos de navegación y la estructura que proporciona

Un elemento de encabezado etiqueta el contenido que sigue y contribuye a la estructura del documento navegable. Los navegadores exponen esa función a través de API de accesibilidad y muchas herramientas de asistencia pueden presentar una lista de títulos o moverse entre ellos. El elemento sigue siendo identificable cuando falta una hoja de estilo o se reemplaza.

Un párrafo en negrita no ofrece nada de esa señal estructural. Puede seguir siendo prosa útil, pero no debe sustituir el límite de una sección. Pruebe el documento final con una herramienta de inspección de accesibilidad o esquema porque la vista previa local no informa las relaciones de encabezado ni valida la organización del autor.

Los niveles se anidan, no los tamaños: explica por qué saltar de h2 a h4 confunde a los lectores y las herramientas

Los niveles expresan anidamiento, no un menú de tamaños de letra. Un h2 normalmente introduce una sección debajo del contexto principal de la página; un h3 introduce una subsección de ese h2. Seleccionar h4 simplemente porque su fuente predeterminada se ve bien puede implicar que falta una estructura intermedia.

ToolAcre preservará h1 a h6 y no rechazará los niveles omitidos. El filtro impone vocabulario, no lógica editorial. Cree el esquema en papel o en el origen, luego use CSS en el destino para controlar la apariencia sin cambiar los niveles para buscar una escala visual preferida.

Elija el encabezado de la página en contexto; este editor no aplica la regla de un h1

El libro de trabajo prescribe un h1, pero la implementación no tiene tal regla y este artículo no inventa una como ley universal. Las plantillas de página, los fragmentos incrustados y las convenciones de los documentos determinan si el contenido debe proporcionar su título principal o comenzar debajo de uno proporcionado por el anfitrión.

Inspeccione el destino completo, no solo el fragmento. Si el CMS ya muestra el título del artículo como h1, es sensato que el contenido del cuerpo pegado comience con h2. ToolAcre no puede ver esa plantilla externa, por lo que su opción h1 es una capacidad más que una recomendación para cada borrador.

Ejemplo resuelto: comparar un párrafo en negrita con un elemento de encabezado en la fuente

Cree `<p><strong>Installation</strong></p>` y `<h2>Configuration</h2>`. Ambos pueden parecer prominentes en la zona de pruebas, pero la fuente revela que solo Configuración es un encabezado. Una inspección del árbol de accesibilidad en la página publicada también debería identificar solo h2 como encabezado.

Cambie la instalación al nivel correcto a través del selector de bloque o el modo de fuente. Luego revise si los dos encabezados son pares o padre e hijo. El desinfectante conserva ambas formas pero no puede decidir la relación a partir de sus palabras. Ese juicio pertenece al autor del documento y al contexto de la página.

Aplicar estilo a los títulos sin abusar de los niveles: explica que CSS, no la elección del nivel, debe controlar la apariencia.

La apariencia del encabezado pertenece a CSS. Un sitio puede hacer que h2 sea modesto y h3 visualmente distintivo mientras conserva niveles lógicos, siempre que el diseño aún comunique jerarquía. Diseñar un h2 correcto es más seguro que sustituir h4 simplemente para obtener un navegador predeterminado más pequeño.

La hoja de estilo de la vista previa es intencionalmente simple y ligera. No es el tema de su producto, por lo que las dimensiones predeterminadas del encabezado no son una buena evidencia del diseño del destino. Copie el fragmento semántico, aplique estilos aprobados allí y revise el comportamiento receptivo sin reescribir el esquema para satisfacer una vista aislada.

Lo que esto no cubre: elementos de sección como <section> y <article>, ni el SEO más allá de la estructura.

Este artículo no cubre los elementos de secciones y artículos, las funciones de encabezado de ARIA, la guía SEO completa ni todos los lectores de pantalla. Tampoco afirma que ToolAcre valide los niveles omitidos, los títulos duplicados o la calidad del texto de los encabezados. La barra de herramientas proporciona elementos; Los autores proporcionan una estructura coherente.

La salida desinfectada no es automáticamente una publicación segura y no confiable. La zona de pruebas de vista previa limita la ejecución dentro de ToolAcre, mientras que el marcado copiado deja esa protección. Utilice pruebas de higiene y accesibilidad en el destino. Un árbol de encabezados correcto es una dimensión de calidad, no un control de seguridad o una auditoría completa.

Conclusión: estructura primero, estilo segundo: resume la regla y cómo el editor HTML WYSIWYG de ToolAcre le permite confirmar si el marcado detrás de un encabezado visual es un elemento de encabezado

Estructura primero, estilo segundo. Decida qué temas son secciones y subsecciones, asigne niveles a partir de esa relación y luego inspeccione los elementos h reales que emite ToolAcre. Un título debe seguir siendo significativo cuando las fuentes, los colores y los espacios desaparecen.

Finalmente, coloque el fragmento dentro de su plantilla real y revise la jerarquía combinada. El editor local no puede conocer el título de una página externa ni el shell de navegación. Su valor es la transparencia: el formato visual y la fuente están uno al lado del otro, lo que hace que los títulos falsos sean más fáciles de detectar antes de su publicación.