Elementos h1 al h6 en HTML

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 contenidoElemento organizativo.
Contenido permitidoContenido de redacción.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normativo.No los utilice dentro del elemento <hgroup> porque ha quedado obsoleto.
Interfaz DOMOHTMLHeadingElement.

Soporte de navegadores

ChromoFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

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><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-topmargin-bottommargin-leftmargin-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;
}