HTML Academy · Lezione

Intestazioni h1-h6 e relativa gerarchia

Usare i livelli delle intestazioni per creare una struttura significativa del documento

Intestazioni h1-h6 e relativa gerarchia è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

I sei livelli delle intestazioni

HTML mette a disposizione sei elementi di intestazione, da <h1> a <h6>:

h1 — Titolo principale della pagina (il più importante)
h2 — Sezioni principali
h3 — Sottosezioni
h4, h5, h6 — Sottosezioni più profonde (raramente necessari)

Visivamente diminuiscono di dimensione, ma la dimensione è controllata dal CSS, non dal numero.

Gerarchia semantica

Le intestazioni creano una struttura del documento, ovvero un indice della pagina:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

La regola di h1

Buona pratica per <h1>:

Utilizzi esattamente un <h1> per pagina
Dovrebbe corrispondere all'elemento <title> o essere strettamente correlato a esso
Rappresenta l'argomento principale della pagina
I motori di ricerca gli attribuiscono un peso elevato per la SEO

Non salti i livelli

I livelli delle intestazioni devono essere utilizzati in ordine: non passi da h2 a h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Le intestazioni per la navigazione

Gli utenti di screen reader fanno affidamento sulle intestazioni per navigare nelle pagine lunghe:

Passano da un'intestazione all'altra con il tasto H
Gli screen reader elencano tutte le intestazioni come un indice
Una gerarchia corretta rende la pagina navigabile anche senza poterla vedere

Stile e semantica

Non scelga un livello di intestazione in base alla sua dimensione visiva: utilizzi il CSS a questo scopo:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Intestazioni nelle sezioni

Quando utilizza gli elementi di sezionamento di HTML5, la gerarchia delle intestazioni ricomincia in ogni sezione:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Suggerimenti sull'accessibilità delle intestazioni

Segua queste regole per le intestazioni accessibili:

Ogni pagina deve avere almeno un'intestazione
L'area del contenuto principale dovrebbe iniziare con un <h1>
Non utilizzi le intestazioni solo per rendere il testo in grassetto o più grande
Non utilizzi il testo in grassetto come sostituto delle intestazioni

SEO e intestazioni

I motori di ricerca utilizzano le intestazioni per comprendere il contenuto della pagina:

<h1> ha il peso maggiore per la SEO
Includa naturalmente nelle intestazioni le parole chiave target
Le intestazioni suddividono il contenuto e migliorano gli indicatori di leggibilità
I motori di ricerca mostrano le intestazioni nei risultati (featured snippet)

Stili predefiniti del browser

I browser applicano stili predefiniti alle intestazioni:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Intestazioni nella navigazione

Le intestazioni possono essere utilizzate anche nei landmark di navigazione:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Verifica rapida

Quanti elementi h1 dovrebbe avere in genere una pagina ben strutturata?

Riepilogo: intestazioni

Elementi essenziali della gerarchia delle intestazioni:

Sei livelli: da h1 a h6
Un solo h1 per pagina, ovvero il titolo principale
Utilizzi i livelli in ordine: non salti mai un livello
Le intestazioni creano una struttura del documento accessibile
Utilizzi il CSS per la dimensione visiva, non i numeri delle intestazioni

Domande Frequenti

La lezione «Intestazioni h1-h6 e relativa gerarchia» è gratuita?

Sì — il testo completo di «Intestazioni h1-h6 e relativa gerarchia» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Intestazioni h1-h6 e relativa gerarchia»?

Usare i livelli delle intestazioni per creare una struttura significativa del documento Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Intestazioni h1-h6 e relativa gerarchia»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy