Tag HTML <h1> a <h6>

Definizione e uso

<h1> a <h6> I tag vengono utilizzati per definire i titoli HTML.

<h1> Definire il titolo più importante.<h6> Definire il titolo meno importante.

Attenzione

Ogni pagina utilizza solo uno <h1> - Questo dovrebbe rappresentare il titolo/tema principale della pagina intera. Inoltre, non saltare i livelli di titolo - <h1> iniziare poi usare <h2>e così via.

Poiché gli elementi h hanno un significato semantico preciso, è consigliabile scegliere con cura il livello di etichetta appropriato per costruire la struttura del documento. Pertanto, non utilizzare i tag di titolo per modificare la dimensione del testo sulla stessa riga. Invece, utilizzare le definizioni di fogli di stile per ottenere un aspetto accattivante.

Se desideri ottenere ulteriori informazioni sugli elementi HTML e il loro utilizzo, leggi la guida:Qualità web》。

Vedi anche:

Tutorial HTML:Titoli HTML

Manuale di riferimento HTML DOM:Oggetto Heading

Esempio

Esempio 1

Sei diversi titoli HTML:

<h1>Questo è il titolo 1</h1>
<h2>Questo è il titolo 2</h2>
<h3>Questo è il titolo 3</h3>
<h4>Questo è il titolo 4</h4>
<h5>Questo è il titolo 5</h5>
<h6>Questo è il titolo 6</h6>

Prova personalmente

Esempio 2

Impostare il colore di sfondo e il colore del testo del titolo (usando CSS):

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

Prova personalmente

Esempio 3

Impostare l'allineamento del titolo (usando CSS):

<h1 style="text-align:center">Questo è il titolo 1</h1>
<h2 style="text-align:left">Questo è il titolo 2</h2>
<h3 style="text-align:right">Questo è il titolo 3</h3>
<h4 style="text-align:justify">Questo è il titolo 4</h4>

Prova personalmente

Proprietà globali

<h1> - <h6> I tag supportano anche Proprietà globali HTML。

Proprietà degli eventi

<h1> - <h6> I tag supportano anche Proprietà degli eventi HTML。

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <h1> Elemento:

Esempio 1

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

Prova personalmente

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <h2> Elemento:

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

Prova personalmente

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <h3> Elemento:

Esempio 3

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

Prova personalmente

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <h4> Elemento:

Esempio 4

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

Prova personalmente

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <h5> Elemento:

Esempio 5

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

Prova personalmente

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <h6> Elemento:

Esempio 6

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

Prova personalmente

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto