Como cualquier editor o visualizador de texto, los Títulos de Encabezado requieren de ciertos niveles de importancia para organizar y dar jerarquía a sus contenidos. En HTML, también se requieren de estos niveles de importancia para sus Títulos de Encabezado. Así, en HTML existe un conjunto de etiquetas para definir los títulos de encabezados en HTML.

Las Etiquetas de Títulos de Encabezado

Las etiquetas de Títulos de Encabezado se conforman por su etiqueta de apertura, su contenido y su etiqueta de cierre. Su contenido implica únicamente texto y/o elementos en línea, exclusivamente.

Los elementos de Títulos de Encabezado, implementan seis niveles de encabezados en el documento, de <h1> a <h6>. La etiqueta <h1> implica que es la más importante, y la etiqueta <h6>, implica que es la menos importante. Un elemento de Título de Encabezado describe brevemente el tema de la sección que presenta. La información de los Títulos de Encabezado puede ser usada por agentes de usuario, como por ejemplo, para construir una tablas de contenidos para un documento automáticamente.

<h1>Esto es un Título de Encabezado 1</h1>
<h2>Esto es un Título de Encabezado 2</h2>
<h3>Esto es un Título de Encabezado 3</h3>
<h4>Esto es un Título de Encabezado 4</h4>
<h5>Esto es un Título de Encabezado 5</h5>
<h6>Esto es un Título de Encabezado 6</h6>

Recomendaciones de Uso:

• Evite el uso de elementos de Títulos de Encabezado con niveles inferiores para cambiar el tamaño de un texto. En su lugar, utilice la propiedad font-size del CSS.
• Evite omitir niveles de los Títulos de Encabezado: siempre comience con <h1>, después use <h2> y así sucesivamente.
• Utilice solo un elemento de Título de Encabezado <h1> por página o sección. Y esta debería describir de una manera general y concisa el propósito del contenido que encabeza. Todos los Títulos de Encabezado posteriores deben comenzar con <h2>.
• Cuando se usan secciones, como por ejemplo, con el elemento <section>, debe usarse un <h1> por sección. De igual manera, todos los Títulos de Encabezado posteriores deben comenzar con <h2>.

Lo que no se debe hacer

<h1>Título nivel 1</h1>
<h3>Título nivel 3</h3>
<h4>Título nivel 4</h4>

Lo que sí se debe hacer

<h1>Título nivel 1</h1>
<h2>Título nivel 2</h2>
<h3>Título nivel 3</h3>

Los Títulos de Encabezado también pueden anidarse para generar sub-secciones en nuestros documentos HTML. Esto, para los Lectores de Pantalla; les beneficiara notablemente para mayor interpretación de la organización y jerarquía del contenido.

Accesibilidad

Para las personas con problemas visuales, requieren de una navegación a través de lectores de pantalla, en el que normalmente su funcionamiento se basa en primera instancia en leer los Títulos de Encabezado. De esta forma, conocer rápidamente en contenido de la página en poco tiempo; por esta razón es importante prestar atención a nuestros Títulos de Encabezado y no saltarse ningún nivel o podríamos con confundir a estos usuarios.

Atributos Globales HTML

Los Atributos Globales aplican a todas las etiquetas HTML.

Este elemento soporta Atributos de Evento HTML.

Restricciones

El atributo align es obsoleto; no debe utilizarse más.

Cambiar el color del texto y del fondo con los estilos CSS

Cambiar el color del texto y del fondo a los título de encabezado es posible con los estilos CSS como se muestra a continuación:

<h1 style="background-color: yellow;">Hola Mundo</h1>
<h2 style="color: blue;">Hola mundo</h2>
<h3 style="color: red">Hola mundo</h3>
<h4 style="background-color: green; color: white;">Hola mundo</h4>
<h5 style="color: purple;">Hola mundo</h5>
<h6 style="background-color: gray;">Hola mundo</h6>

El resultado es el siguiente:

Alinear el texto con los estilos CSS

Alinear el texto de los títulos de encabezado es posible con los estilos CSS como se muestra a continuación:

<h1 style="text-align:center">Título 1</h1>
<h2 style="text-align:left">Título 2</h2>
<h3 style="text-align:right">Título 3</h3>
<h4 style="text-align:justify">Título 4</h4>

El resultado es el siguiente: