Títulos en HTML (h1,h2,h3,h4,h5,h6)

Los elementos de encabezado implementan seis niveles de encabezado del documento,<h1> es el más importante, y <h6>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.

Títulos en HTML

Otros elementos HTML muy utilizados son para indicar los títulos, para esto contamos con los elementos:
<h1><h2><h3><h4><h5><h6>

Notas de uso:

  • No se deben usar niveles inferiores para reducir el tamaño de la fuente: use la propiedad CSS font-size para eso.
  • Evite omitir niveles de encabezado: siempre comience con <h1>, después use <h2> y así sucesivamente.
  • Con el elemento <section>, debe considerar evitar usar <h1> más de una vez en una página; por costumbre, se usa para mostrar el título de la página, con todos los encabezados debajo de éste comenzando con <h2>. Cuando se usan secciones, debe usarse un <h1> por sección. Véase Definiendo secciones en Secciones y esquema de un documento HTML5 para más información.

El título de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos que es el navegador el responsable de definir el tamaño de la fuente, más adelante podrá ver que uno puede modificar la fuente, tamaño, color etc.) Según la importancia del título utilizaremos alguno de estos elementos HTML. Requiere la marca de cerrado del título con la barra invertida como hemos visto. Confeccionaremos una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>.

El siguiente código muestra todos los niveles de encabezado.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Aquí está el resultado de este código:

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6


Página de ejemplo

El código siguiente muestra unos pocos encabezados con algo de contenido debajo de ellos.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>

<h3>Example 2</h3>
<p>Some text here...</p>

<h2>See also</h2>
<p>Some text here...</p>

Aquí está el resultado de este código:

Heading elements

Summary

Some text here...

Examples

Example 1

Some text here...

Example 2

Some text here...

See also

Some text here...