Elementos h1 al h6 en HTML

Los elementos h1‏ al h6 representan seis niveles de encabezados de sección, siendo el elemento el <h1> nivel más alto y el elemento el <h6> más bajo.

El siguiente ejemplo muestra todos los niveles de encabezados:

< h1 > Título de nivel 1 </ h1 > 
< h2 > Título de nivel 2 </ h2 > 
< h3 > Título de nivel 3 </ h3 > 
< h4 > Título de nivel 4 </ h4 > 
< h5 > Título de nivel 3 5 </ h5 > 
< h6 > Título Nivel 6 </ h6 >

El siguiente ejemplo muestra el uso de varios niveles de encabezados con algún contenido después de ellos:

< h1 > Encabezados </ h1 > 
< h2 > Descripción </ h2 > 
< p > Algún texto que resume los encabezados </ p >

< h2 > ejemplos </ h2 > 
< h3 > primer ejemplo </ h3 > 
< p > texto del primer ejemplo </ p >

< h3 > segundo ejemplo </ h3 > 
< p > segundo texto del ejemplo </ p >

< h2 > Recursos </ h2 > 
< p > Enciclopedia </ p >

Elementos h1 al h6

Clasificaciones de contenido	Elemento organizativo.
Contenido permitido	Contenido de redacción.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normativo.No los utilice dentro del elemento `<hgroup>` porque ha quedado obsoleto.
Interfaz DOMO	`HTMLHeadingElement`.

Soporte de navegadores

Chromo	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento se pueden utilizar propiedades globales.

La función está align desactualizada, obsoleta y no es compatible con HTML5, así que no la use.

Descripción de uso

La información del encabezado de los navegadores (y otro software) se puede utilizar para generar automáticamente una tabla de contenido para un documento.
No use niveles más bajos de encabezados para hacer una fuente más pequeña, solo use una propiedad font-size CSS correctamente.
Evite omitir un nivel de encabezados, es decir, siempre comience y <h1> luego use, <h2> etc.

Formato predeterminado

La mayoría de los navegadores muestran artículos de <h1> a <h6> con el conjunto de propiedades display-block, especificando la propiedad valores font-size(tamaño de fuente) y font-weight(peso de la fuente o el espesor), así como márgenes ( margin-top, margin-bottom, margin-left y margin-right). A continuación, mostraremos las reglas CSS para estos elementos:

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: .60em;
  margin-top: 2.20em;
  margin-bottom: 2.20em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}