HTML <h1> tot <h6> tags

Definitie en gebruik

<h1> tot <h6> Tags worden gebruikt om HTML-titels te definiëren.

<h1> Definieer de belangrijkste titel.<h6> Definieer de minst belangrijke titel.

Let op

Elke pagina gebruikt slechts één <h1> - Dit zou de hoofdtitel/thema van de hele pagina moeten representeren. Bovendien, vermijd het overslaan van titelniveaus - van <h1> beginnen, dan gebruik <h2>enzovoort.

Omdat de h-elementen een exacte semantiek hebben, kies dan voorzichtig de juiste tagniveau om de structuur van het document op te bouwen. Gebruik in plaats daarvan CSS-definities om een aantrekkelijke weergave te bereiken. Wees niet geneigd om de titeltag te gebruiken om de lettergrootte op dezelfde regel te veranderen.

Als u meer wilt weten over het selecteren en gebruiken van HTML-tags, lees dan:Webkwaliteit》。

Zie ook:

HTML-tutorial:HTML headings

HTML DOM referentiemanual:Heading-object

Voorbeeld

Voorbeeld 1

Zes verschillende HTML-titels:

<h1>Dit is titel 1</h1>
<h2>Dit is titel 2</h2>
<h3>Dit is titel 3</h3>
<h4>Dit is titel 4</h4>
<h5>Dit is titel 5</h5>
<h6>Dit is titel 6</h6>

Try it yourself

Voorbeeld 2

Stel de achtergrondkleur en tekstkleur van de titel in (gebruik CSS):

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

Try it yourself

Voorbeeld 3

Stel de uitlijning van de titel in (gebruik CSS):

<h1 style="text-align:center">Dit is titel 1</h1>
<h2 style="text-align:left">Dit is titel 2</h2>
<h3 style="text-align:right">Dit is titel 3</h3>
<h4 style="text-align:justify">Dit is titel 4</h4>

Try it yourself

Globale attributen

<h1> - <h6> De tag ondersteunt ook Globale attributen in HTML。

Evenement-attributen

<h1> - <h6> De tag ondersteunt ook Evenement-attributen in HTML。

Standaard CSS-instellingen

Most browsers will display the following default values <h1> Element:

Voorbeeld 1

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

Try it yourself

Most browsers will display the following default values <h2> Element:

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

Try it yourself

Most browsers will display the following default values <h3> Element:

Voorbeeld 3

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

Try it yourself

Most browsers will display the following default values <h4> Element:

Voorbeeld 4

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

Try it yourself

Most browsers will display the following default values <h5> Element:

Example 5

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

Try it yourself

Most browsers will display the following default values <h6> Element:

Example 6

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

Try it yourself

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support