Etiquetas HTML <h1> a <h6>

Definición y uso

<h1> hasta <h6> Las etiquetas se utilizan para definir los títulos HTML.

<h1> Define el título más importante.<h6> Define el título menos importante.

Atención

Cada página debe usar solo una <h1> - Esto debe representar el título o tema principal de toda la página. Además, no saltes los niveles de título - <h1> comienzo, luego use <h2>y así sucesivamente.

Dado que los elementos h tienen una semántica exacta, le recomendamos que elija con cuidado la jerarquía de etiquetas para construir la estructura del documento. Por lo tanto, no utilice las etiquetas de título para cambiar el tamaño de la fuente en la misma línea. En su lugar, deberíamos usar definiciones de hojas de estilo en capas para lograr un efecto visual atractivo.

Si desea obtener más información sobre la selección y el uso de etiquetas HTML, lea el libroCalidad web》。

Véase también:

Tutorial HTML:Título HTML

Manual de referencia HTML DOM:Objeto Heading

Ejemplo

Ejemplo 1

Seis diferentes títulos HTML:

<h1>Este es el título 1</h1>
<h2>Este es el título 2</h2>
<h3>Este es el título 3</h3>
<h4>Este es el título 4</h4>
<h5>Este es el título 5</h5>
<h6>Este es el título 6</h6>

Prueba personalmente

Ejemplo 2

Configurar el color de fondo y el color del texto del título (usando CSS):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

Prueba personalmente

Ejemplo 3

Configurar el alineamiento del título (usando CSS):

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

Prueba personalmente

Atributos globales

<h1> - <h6> Las etiquetas también admiten Atributos globales en HTML。

Atributos de eventos

<h1> - <h6> Las etiquetas también admiten Atributos de eventos en HTML。

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los valores predeterminados siguientes <h1> Elemento:

Ejemplo 1

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

Prueba personalmente

La mayoría de los navegadores mostrarán los valores predeterminados siguientes <h2> Elemento:

Ejemplo 2

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

Prueba personalmente

La mayoría de los navegadores mostrarán los valores predeterminados siguientes <h3> Elemento:

Ejemplo 3

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

Prueba personalmente

La mayoría de los navegadores mostrarán los valores predeterminados siguientes <h4> Elemento:

Ejemplo 4

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

Prueba personalmente

La mayoría de los navegadores mostrarán los valores predeterminados siguientes <h5> Elemento:

Ejemplo 5

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

Prueba personalmente

La mayoría de los navegadores mostrarán los valores predeterminados siguientes <h6> Elemento:

Ejemplo 6

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

Prueba personalmente

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte