Sistema di Intestazioni: Regole per H1, H2 e H3

Un sistema di intestazioni è l’insieme ordinato di un titolo di pagina e delle sue etichette di sezione. Trasforma una pagina lunga in un percorso leggibile per le persone e in una struttura leggibile dalle macchine per i motori di ricerca, le tecnologie assistive e i sistemi di risposta AI.

Il titolo della pagina qui sopra è l’unico H1 di questa pagina. Ogni specifica principale di seguito è un H2, e ogni suddivisione all’interno di una sezione principale è un H3. Questa struttura dal vivo è l’elemento renderizzato: i suoi livelli esprimono relazioni, non dimensioni del carattere.

Perché questo elemento è importante

I lettori raramente consumano una pagina lunga in un’unica lettura ininterrotta. Cercano una domanda riconoscibile, confrontano le etichette delle sezioni con le loro esigenze attuali e decidono dove rallentare. Le intestazioni descrittive riducono questo sforzo perché ciascuna fa una piccola promessa su ciò che segue. “Come gli ID stabili delle intestazioni preservano le citazioni” è utile a colpo d’occhio; “Qualche altra riflessione” no.

La stessa gerarchia supporta l’estraibilità automatica, ovvero un sistema automatizzato può identificare una sezione, comprendere come si relaziona all’argomento della pagina e recuperarla senza confonderla con una sezione vicina. L’H1 stabilisce l’argomento della pagina. L’H2 divide quell’argomento in questioni primarie. L’H3 restringe un H2 a un metodo, un caso, un criterio o un’eccezione. Un livello saltato nasconde quella relazione e costringe un parser a dedurre se una sottosezione è un fratello, un figlio o un blocco non correlato.

Le intestazioni creano anche sezioni indirizzabili. Un identificatore di frammento è la parte di un URL dopo #, ad esempio #qa-checklist. I risultati di ricerca, i collegamenti interni, i segnalibri del browser e le risposte AI possono puntare a quella destinazione esatta. Un ID autogenerato rinominato casualmente può quindi rompere un URL anche quando la pagina stessa esiste ancora. L’intestazione non è una decorazione: il suo testo definisce la sezione e il suo ID diventa un indirizzo pubblico durevole.

Segui le regole di scrittura degli elementi quando lo scopo di una sezione corrisponde a un elemento tipizzato. Un H2 chiamato “Avviso” non sostituisce un riquadro di avviso, e un H2 chiamato “Confronto” non sostituisce una tabella di confronto. Le intestazioni forniscono la gerarchia del documento; gli elementi tipizzati forniscono una struttura specifica per lo scopo. Entrambi possono essere necessari.

Quando usarlo

Usa il sistema di intestazioni su ogni pagina sostanziale e indicizzabile. Anche una pagina breve necessita di un H1. Aggiungi sezioni H2 quando il lettore deve spostarsi tra domande, fasi, criteri o gruppi di evidenze distinti. Aggiungi sottosezioni H3 solo quando un H2 contiene almeno due parti genuinamente distinte che beneficiano di una navigazione separata.

Le situazioni al limite sono etichette visive che sembrano intestazioni ma non appartengono alla struttura dell’articolo:

• Un titolo di card denomina una singola card ripetuta; non è automaticamente una sezione del documento.
• Un’etichetta di callout come “Suggerimento” o “Importante” identifica il tipo di riquadro; non diventa un H2 solo perché è in grassetto.
• Un titolo di grafico identifica una figura. Appartiene alla didascalia della figura o al nome accessibile, a meno che il grafico non inizi una sezione completa.
• Un’etichetta di menu di navigazione, breadcrumb, scheda, controllo accordion, intestazione di piè di pagina e titolo di modale possono aver bisogno di semantiche da componente, ma non entrano nella gerarchia principale dell’articolo.
• Uno slogan promozionale grande è testo grafico. La dimensione del carattere non può promuoverlo a H1 del documento.

Non aggiungere un’intestazione solo per introdurre una frase, dividere una spiegazione continua o creare spazio visivo. Usa la spaziatura tra paragrafi o la modifica per questi scopi. Un’intestazione utile segna una sezione abbastanza sostanziale da rispondere a una specifica esigenza del lettore.

Dove posizionare le intestazioni

La posizione esprime la parentela. Posiziona l’H1 all’inizio del contenuto principale, dopo i breadcrumb o altri elementi di navigazione del sito e prima dell’introduzione. Posiziona ogni H2 prima di una sezione primaria. Posiziona un H3 solo dopo il suo H2 genitore e il contenuto orientativo del genitore, mai prima del primo H2 e mai come pari scelto per ragioni estetiche.

Due intestazioni non possono essere adiacenti nei contenuti editoriali. Ogni intestazione deve possedere contenuti utili prima dell’intestazione successiva dello stesso livello o di livello superiore. Questa regola previene etichette di sezione vuote, fornisce contesto al lettore prima di un elenco di sottosezioni e crea passaggi estraibili anziché una struttura nuda.

Anatomia

L’anatomia etichettata ha cinque parti:

1. H1: l’argomento unico della pagina e la sommità della struttura dei contenuti.
2. H2: una domanda, fase o dimensione primaria all’interno di quell’argomento.
3. H3: un argomento figlio che non può essere compreso correttamente senza il suo H2 genitore.
4. Contenuto posseduto: la risposta, l’evidenza, le istruzioni o la spiegazione tra un’intestazione e la successiva intestazione allo stesso livello o superiore.
5. ID stabile: la destinazione del frammento associata all’intestazione e preservata dopo la pubblicazione.

La relazione rimane valida se la tipografia cambia. Un tema può renderizzare H2 con un carattere più piccolo su mobile, ma deve rimanere H2 nell’HTML. Al contrario, rendere un paragrafo grande e in grassetto non gli conferisce la semantica di intestazione né una destinazione di frammento.

Esempi di design

Le varianti di design corrispondono a livelli semantici e stati di wrapping reali, non a opzioni di colore arbitrarie.

Titolo di pagina H1: mostra l’argomento unico all’inizio del contenuto principale. Può seguire una descrizione di supporto, ma nessun sopracciglio, logo o slogan hero diventa un altro H1.

Sezione primaria H2: rendi la sezione comprensibile da un indice e seguila con contenuti che ne stabiliscano l’ambito.

Sottosezione H3: usa il livello più piccolo perché l’argomento è subordinato, non perché il designer vuole un testo più piccolo.

Intestazione a capo: consenti un naturale andare a capo su due righe su schermi stretti. Non accorciare un’intestazione chiara in un’etichetta ambigua solo per mantenerla su una riga.

Stati ancorati: mostra hover e focus da tastiera senza rendere l’ancora l’unico modo per comprendere la destinazione. La navigazione diretta deve compensare eventuali header appiccicosi in modo che l’intestazione non sia nascosta.

Parametri

Il sistema di intestazioni è un contratto documentale piuttosto che un componente decorativo. I suoi parametri definiscono la struttura, il testo che i lettori vedono, il contenuto che ogni nodo possiede e l’URL tramite cui quel nodo può essere raggiunto.

I limiti di caratteri e parole sono fasce editoriali, non motivi per omettere la specificità necessaria. Un’intestazione di 94 caratteri che distingue due procedure simili è meglio di una breve ma fuorviante. I limiti strutturali sono rigorosi: un H1, nessun livello saltato, nessun ID duplicato e nessuna sezione vuota.

Sintassi ed esempi di codice

La forma portabile canonica racchiude la struttura nativa in una direttiva heading-system. La prima intestazione corrisponde al titolo del documento; le intestazioni successive rimangono nodi di contenuto ordinati. Gli ID espliciti vengono aggiunti una volta che le intestazioni diventano pubbliche.

Direttiva Markdown portabile

:::heading-system
# Ruota una chiave API senza tempi di inattività

Sostituisci la credenziale in ogni servizio dipendente prima di revocare la vecchia chiave.

## Prepara la sostituzione

Registra ogni servizio che attualmente legge la credenziale.

### Identifica i consumatori nascosti

Controlla i job pianificati, i segreti di deployment e le integrazioni locali.

## Verifica e revoca

Testa la sostituzione, poi revoca la chiave esposta.
:::

Alla pubblicazione, blocca gli ID stabili anziché permettere a future modifiche testuali di rigenerarli:

## Prepara la sostituzione {#prepare-replacement}
### Identifica i consumatori nascosti {#identify-hidden-consumers}

Shortcode Hugo

{{< heading-system h1="Ruota una chiave API senza tempi di inattività" >}}
## Prepara la sostituzione {#prepare-replacement}

Registra ogni servizio che attualmente legge la credenziale.

### Identifica i consumatori nascosti {#identify-hidden-consumers}

Controlla i job pianificati, i segreti di deployment e le integrazioni locali.
{{< /heading-system >}}

Questo è il contratto dell’adattatore Hugo, non un’affermazione che questo repository registri uno shortcode heading-system. Un’implementazione Hugo può continuare a renderizzare l’H1 dal frontmatter e le intestazioni del corpo tramite Markdown, come fa questa pagina, purché convalidi la stessa gerarchia e preservi gli ID espliciti.

Blocco WordPress

<!-- wp:heading {"level":2,"anchor":"prepare-replacement"} -->
<h2 id="prepare-replacement">Prepara la sostituzione</h2>
<!-- /wp:heading -->

<p>Registra ogni servizio che attualmente legge la credenziale.</p>

<!-- wp:heading {"level":3,"anchor":"identify-hidden-consumers"} -->
<h3 id="identify-hidden-consumers">Identifica i consumatori nascosti</h3>
<!-- /wp:heading -->

WordPress dovrebbe archiviare l’H1 nel campo del titolo della pagina o in un blocco hero approvato, non come secondo blocco di intestazione nel corpo dell’articolo. Imposta esplicitamente l’ancora HTML di ogni intestazione pubblicata in modo che una modifica successiva della formulazione non ne cambi silenziosamente l’URL.

Esempi

Buono: la struttura prevede risposte complete

# Come scegliere un flusso di approvazione delle fatture

## Definisci il rischio di approvazione
Spiega quali valori fattura, fornitori ed eccezioni necessitano di revisione.

### Imposta soglie di valore
Assegna un approvatore nominato a ciascuna soglia e documenta cosa succede al confine.

### Gestisci le eccezioni alle policy
Invia gli ordini di acquisto mancanti e le modifiche ai dettagli bancari a un percorso di revisione separato.

## Testa il flusso di lavoro
Esegui fatture ordinarie ed eccezionali attraverso il percorso completo prima del lancio.

Funziona perché l’H1 enuncia un compito, ogni H2 denomina una fase primaria, ogni H3 appartiene al suo genitore e ogni etichetta è seguita da contenuti che mantengono la promessa. Un lettore può scansionare la struttura e prevedere dove sono trattati soglie, eccezioni e test.

Cattivo: lo stile sostituisce la gerarchia

# Approvazione fatture

### Cose da considerare
## Ulteriori informazioni
### Eccezioni
### Altro

Fallisce per quattro ragioni indipendenti. Salta da H1 a H3, usa etichette che non prevedono una risposta, posiziona intestazioni una accanto all’altra senza contenuto posseduto e lascia “Eccezioni” senza spiegazione prima dell’intestazione successiva. La struttura risultante suggerisce una copertura che la pagina non fornisce. Crea anche ID autogenerati deboli come #other, che sono ambigui quando citati al di fuori della pagina.

Marcatura Schema e accessibilità

Le intestazioni non necessitano di un tipo Schema.org autonomo. L’H1 fornisce o rispecchia comunemente il headline di un Article, TechArticle o altra entità di pagina appropriata, ma la formulazione visibile e il JSON-LD devono descrivere lo stesso argomento. Le sezioni H2 e H3 rimangono struttura HTML; non creare un’entità schema per ogni intestazione. Un’intestazione intitolata “Domande frequenti” non crea automaticamente la marcatura FAQPage da sola — i dati visibili di domanda e risposta devono soddisfare il contratto dell’elemento FAQ.

L’accessibilità dipende dall’HTML semantico e dall’ordine logico. Gli utenti di screen reader possono navigare per intestazioni, ispezionare un elenco di intestazioni o saltare direttamente tra le sezioni. Questo flusso si rompe quando la pagina salta livelli per esigenze stilistiche, usa paragrafi in grassetto come finte intestazioni o include intestazioni di utilità e articolo in un’unica gerarchia incoerente.

Usa elementi <h1>, <h2> e <h3> reali. Mantieni il testo dell’intestazione visibile; un aria-label non deve sostituire una chiara formulazione sullo schermo. I controlli di ancoraggio necessitano di un nome accessibile descrittivo, un focus da tastiera visibile e un target di clic separato dal testo dell’intestazione quando collegare l’intera intestazione confonderebbe la selezione. Quando viene caricato un URL di frammento, il focus da tastiera non deve spostarsi automaticamente, ma l’intestazione di destinazione deve essere visibile e non coperta da un header appiccicoso.

Gli ID delle intestazioni devono essere univoci all’interno della pagina e dovrebbero iniziare con una lettera. Mantienili in minuscolo, con trattini, leggibili e privi di date transitorie o numeri di posizione. Un ID stabile può rimanere #verify-results anche se l’intestazione visibile migliora da “Verifica i risultati” a “Verifica che la nuova credenziale funzioni.” Se il significato della sezione cambia completamente, crea un nuovo ID e preserva il vecchio frammento tramite un alias o un comportamento di redirect documentato quando la piattaforma lo supporta. La specifica separata sui collegamenti tramite ancoraggio regola i dettagli di navigazione e interazione delle ancore.

Regole di scrittura

Scrivi la struttura della pagina prima di rifinire le singole etichette. Ogni intestazione dovrebbe rispondere a “cosa imparerò, deciderò o farò qui?” in linguaggio concreto. Preferisci “Confronta i costi di fatturazione annuali e mensili” a “Considerazioni sui prezzi,” e “Perché l’importazione rifiuta gli ID duplicati” a “Risoluzione dei problemi.” Descrittivo non significa verboso; significa che l’etichetta prevede il contenuto effettivo della sezione.

Usa un H1 di 20–80 caratteri. Preferisci intestazioni H2 e H3 di 2–12 parole e non più di 90 caratteri. Una guida lunga ha normalmente 3–12 sezioni H2. Un H2 necessita di almeno una frase di ambito o risposta prima di qualsiasi H3. Usa due o più sezioni H3 sotto un genitore quando la suddivisione aiuta; un singolo H3 spesso segnala che il suo contenuto dovrebbe essere incorporato nell’H2.

Usa la frase con iniziale minuscola (sentence case) a meno che un nome proprio o un nome di prodotto non richieda maiuscole. Le domande sono appropriate quando la sezione risponde immediatamente alla domanda esatta. Le etichette dichiarative si adattano a fasi, criteri, risultati e specifiche. Mantieni le sezioni parallele grammaticalmente parallele: usa verbi per una sequenza di processo, nomi per criteri di confronto o domande per un set di FAQ.

Non inserire mai quanto segue all’interno del testo dell’intestazione:

• Collegamenti Markdown o URL grezzi; creano destinazioni concorrenti e nomi accessibili instabili.
• Marcatori di nota a piè di pagina o citazioni di fonti; posiziona le evidenze nel contenuto posseduto.
• Emoji usati come etichette strutturali, badge di stato o prefissi decorativi.
• Numerazione manuale a meno che il tipo di articolo non definisca una sequenza ordinata stabile.
• Linguaggio da CTA come “Acquista ora,” indicazioni di prezzo, urgenza o badge promozionali.
• Istruzioni di stile, interruzioni di riga HTML o abbreviazioni specifiche del dispositivo.
• Una seconda frase che appartiene al paragrafo sottostante.

Non scrivere etichette ingegnose che dipendono dal testo circostante per avere senso. “La trama si infittisce” può adattarsi alla voce di un saggio, ma non fornisce alcun contesto utile a un risultato di ricerca, indice, elenco di intestazioni per screen reader o citazione AI. Preserva la personalità nella spiegazione dopo un’intestazione precisa.

Tipi di articolo che lo utilizzano

L’array postTypes nel frontmatter guida queste relazioni. Ogni tipo di articolo elencato utilizza lo stesso contratto gerarchico, mentre la propria anatomia determina i nomi e l’ordine esatti delle sezioni.

Checklist QA

• La pagina renderizza esattamente un H1 visibile, e questo denomina l’argomento effettivo della pagina.
• La struttura procede da H1 a H2 a H3 senza livelli saltati.
• Ogni H3 ha un chiaro genitore H2 precedente.
• Ogni intestazione è seguita da contenuti posseduti significativi prima dell’intestazione successiva.
• Ogni H2 include una frase di orientamento o risposta prima del suo primo H3.
• Il testo dell’intestazione è descrittivo quando letto da solo in un indice o in un elenco di intestazioni per screen reader.
• Le sezioni parallele usano grammatica parallela e livelli equivalenti.
• I livelli di intestazione riflettono le relazioni, non la dimensione del carattere o il peso visivo desiderato.
• Gli scopi tipizzati utilizzano ancora i loro elementi richiesti; le intestazioni non imitano i componenti.
• Ogni intestazione pubblicata ha un ID di frammento univoco, leggibile e stabile.
• Gli ID di frammento esistenti rimangono invariati quando la formulazione visiva viene modificata senza cambiare il significato della sezione.
• La navigazione diretta al frammento lascia la destinazione visibile sotto qualsiasi header appiccicoso.
• Il testo dell’intestazione non contiene collegamenti, citazioni, etichette emoji, badge promozionali o interruzioni di riga manuali.
• La struttura HTML rimane coerente con menu, card, accordion, modali e altri componenti della pagina presenti.
• La pagina renderizzata funziona a larghezza ridotta, con intestazioni su due righe che vanno a capo senza tagli o sovrapposizioni.

Respingi la pagina quando il design visivo sembra curato ma la struttura fallisce. I difetti delle intestazioni si accumulano: un livello saltato o una sezione vuota costringe ogni consumatore a valle a lavorare di più per ricostruire relazioni che la fonte avrebbe dovuto esprimere direttamente.

FAQ

Le domande che seguono risolvono i casi più probabili di creazione di strutture incoerenti tra editor e piattaforme. I loro valori autorevoli risiedono nel frontmatter strutturato [[faq]] qui sopra, in modo che l’output visibile e qualsiasi output schema idoneo possano condividere un’unica fonte.