Tags HTML <h1> até <h6>

Definição e uso

<h1> até <h6> As tags são usadas para definir títulos HTML.

<h1> Defina o título mais importante.<h6> Defina o título menos importante.

Atenção

Cada página deve usar apenas um <h1> - Isso deve representar o título ou tema principal da página inteira. Além disso, não pule o nível de título - <h1> iniciar, em seguida, usar <h2>，等等。

Os elementos h possuem uma semântica precisa, então, por favor, escolha com cuidado o nível apropriado de tags para estruturar o documento. Portanto, não use tags de título para mudar o tamanho da fonte na mesma linha. Em vez disso, devemos usar definições de estilos CSS para alcançar um efeito visual bonito.

Se você quiser saber mais sobre a seleção e uso de tags HTML, leiaQualidade Web》。

Veja também:

Tutorial de HTML:Título HTML

Manual de referência do HTML DOM:Objeto Heading

Exemplo

Exemplo 1

Seis diferentes títulos HTML:

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

Experimente você mesmo

Exemplo 2

Definir a cor de fundo e cor do texto do título (usando CSS):

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

Experimente você mesmo

Exemplo 3

Definir a alinhamento do título (usando CSS):

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

Experimente você mesmo

Atributos globais

<h1> - <h6> A tag também suporta Atributos globais no HTML。

Atributos de evento

<h1> - <h6> A tag também suporta Atributos de evento no HTML。

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <h1> Elemento:

Exemplo 1

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

Experimente você mesmo

A maioria dos navegadores usará os seguintes valores padrão para exibir <h2> Elemento:

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

Experimente você mesmo

A maioria dos navegadores usará os seguintes valores padrão para exibir <h3> Elemento:

Exemplo 3

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

Experimente você mesmo

A maioria dos navegadores usará os seguintes valores padrão para exibir <h4> Elemento:

Exemplo 4

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

Experimente você mesmo

A maioria dos navegadores usará os seguintes valores padrão para exibir <h5> Elemento:

Exemplo 5

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

Experimente você mesmo

A maioria dos navegadores usará os seguintes valores padrão para exibir <h6> Elemento:

Exemplo 6

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

Experimente você mesmo

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte