<h1>–<h6>: Gli elementi HTML dell'intestazione

Gli ementi  HTML <h1><h6> costituiscono 6 livelli di sezioni di intestazione. <h1>è il livello più alto <h6> è il più basso.

Content categories Flow content, heading content, palpable content.
Permitted content Phrasing content.
Tag omission Nessuna, sia il tag di apertura che quello di chiusura sono obbligatori.
Permitted parents Any element that accepts flow content; don't use a heading element as a child of the <hgroup> element — it is now deprecated.
Permitted ARIA roles tab, presentation
DOM interface HTMLHeadingElement

Attributi

Questi elementi includono solamente gli attributi globali.

L'attributo align  è obsoleto, non usarlo.

Note di utilizzo

  • Le informazioni sull'intestazione sono usate dai motori di ricerca, per esempio, per costruire una tabella dei contenuti per un documento automaticamente.
  • Evita di usare le intestazioni per ridimensionare il testo. Usa invece il CSS, in particolare la proprietà font-size . Le intestazioni usano le dimensioni per indicare la loro importanza ma il  CSS  è preferito per il ridimensionamento in generale.
  • Evita di saltare livelli di intestazione: parti sempre da <h1> , poi usa <h2> e a seguire.
  • Dovresti evitare di usare l'<h1> più di una volta n una pagina. Guarda la sezione di definizione per maggiori informazioni.

Esempi

Tutte le intestazioni

Il seguente codice mostra tutti i livelli di intestazione in uso.

<h1>Livello di titolo 1</h1>
<h2>Livello di titolo 2</h2>
<h3>Livello di titolo 3</h3>
<h4>Livello di titolo 4</h4>
<h5>Livello di titolo 5</h5>
<h6>Livello di titolo 6</h6>

Questo è il risultato del codice:

Pagina di esempio

Il seguente codice mostra qualche elemento con del testo all'interno.

<h1>Elementi d'intestazione</h1>
<h2>Sommario</h2>
<p>Testo casuale...</p>

<h2>Esempio</h2>
<h3>Esempio 1</h3>
<p>Ancora testo...</p>

<h3>Esempio 2</h3>
<p>Ancora testo...</p>

<h2>Guarda anche</h2>
<p>Altro testo...</p>

E il risultato di questo codice: 

Accessibility concerns

A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.

Don't

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Do

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Nesting

Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:

  1. h1 Beetles
    1. h2 Etymology
    2. h2 Distribution and Diversity
    3. h2 Evolution
      1. h3 Late Paleozoic
      2. h3 Jurassic
      3. h3 Cretaceous
      4. h3 Cenozoic
    4. h2 External Morphology
      1. h3 Head
        1. h4 Mouthparts
      2. h3 Thorax
        1. h4 Prothorax
        2. h4 Pterothorax
      3. h3 Legs
      4. h3 Wings
      5. h3 Abdomen

When headings are nested, heading levels may be "skipped" when closing a subsection.

Labeling section content

Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.

Sectioning content can be labeled using a combination of the aria-labelledby and id attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.

Example

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

In this example, screen reading technology would announce that there are two <nav> sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav element's contents to determine their purpose.

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.
Living Standard
HTML5
The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.
Recommendation

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
h1Chrome Full support YesEdge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

See also