Elementos h1 al h6 en HTML

por
Elementos H1 al H6 en html

Los elementos h1‏ al h6 representan seis niveles de encabezados de sección, siendo el elemento el 

nivel más alto y el elemento el 
más bajo.

El siguiente ejemplo muestra todos los niveles de encabezados:

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

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

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

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

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

< h2 > Recursos  
< p > Enciclopedia

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 
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 

    luego use, 

    etc.

Formato predeterminado

La mayoría de los navegadores muestran artículos de 

a 
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;
}