Corso di HTML / Titoli e paragrafi: h1–h6, p e br

Usate h1 fino a h6 per i titoli HTML e p per i paragrafi. I titoli descrivono la gerarchia di una pagina, mentre i paragrafi raggruppano frasi correlate. Usate br solo quando avete bisogno di un ritorno a capo all'interno dello stesso paragrafo e non per iniziare un nuovo paragrafo.

Usate h1–h6 per mostrare i livelli dei titoli

HTML offre sei livelli di intestazione. Una pagina utilizza di solito h1 per il suo titolo principale, h2 per le sezioni principali e h3 per gli argomenti all'interno di queste sezioni. Il livello di un'intestazione descrive dove si trova il suo contenuto nel documento; non è una scelta della dimensione del carattere. Confrontate le aree della pagina con le intestazioni in Dividi una pagina con elementi semantici.

<h1>Guida all&#x27;accessibilità</h1>

<h2>Struttura HTML</h2>
<p>Panoramica della struttura di un documento HTML.</p>

<h3>Livelli di intestazione</h3>
<p>Come organizzare le intestazioni.</p>

<h3>Paragrafi</h3>
<p>Come separare i paragrafi.</p>

<h2>Presentazione CSS</h2>
<p>Come il CSS cambia l&#x27;aspetto di intestazioni e paragrafi.</p>

I due titoli sopra menzionati h3 sono argomenti all'interno della sezione h2 intitolata "Struttura HTML". La prossima h2 inizia un'altra sezione principale. Quando si introduce una sottosezione, è consigliabile evitare di saltare un livello — per esempio, passare direttamente da h2 a h4.

Titoli chiari aiutano i lettori a scansionare la pagina e gli utenti di lettori di schermo a navigare tra le sezioni. La guida W3C WAI alla struttura dei titoli spiega perché i livelli dei titoli dovrebbero riflettere l'organizzazione del contenuto.

Se WordPress mostra già il titolo del post come h1 della pagina, non è necessario un ulteriore h1 per lo stesso titolo nel contenuto del post. Iniziate invece le sezioni principali con h2.

Visualizzare intestazioni e paragrafi in un browser

Salvate l'esempio completo seguente come index.html e apritelo in un browser. Mostra i sei livelli di intestazione uno dopo l'altro per il confronto; una pagina reale necessita solo dei livelli richiesti dal contenuto.

<!doctype html>
<html lang="it-IT">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Intestazioni e paragrafi HTML</title>
  </head>
  <body>
    <h1>Intestazione 1</h1>
    <h2>Intestazione 2</h2>
    <h3>Intestazione 3</h3>
    <h4>Intestazione 4</h4>
    <h5>Intestazione 5</h5>
    <h6>Intestazione 6</h6>
    <p>Questo è il primo paragrafo.</p>
    <p>Questo è il secondo paragrafo.</p>
  </body>
</html>

I browser assegnano alle intestazioni livelli di dimensioni e spaziatura predefiniti differenti, ma l'aspetto preciso dipende dal browser e dal CSS della pagina. Se un'intestazione deve apparire più grande o più piccola, modificare il suo CSS invece di usare un livello di intestazione errato.

Separare i paragrafi con p

L'elemento p indica un paragrafo. Racchiudere diversi gruppi di frasi correlate in elementi separati p affinché la loro relazione rimanga chiara.

<p>L&#x27;HTML crea la struttura di una pagina web.</p>

<p>Il CSS ne controlla l&#x27;aspetto.</p>

Questo codice crea due paragrafi. Aggiungere una riga vuota in un editor di testo da solo non crea un nuovo paragrafo HTML. Un p può contenere testo normale e contenuti inline come link, ma non può contenere intestazioni, elenchi o tabelle.

Per aggiungere spazio tra i paragrafi, utilizzare una proprietà CSS come margin, invece di inserire elementi p vuoti o elementi br ripetuti.

Usare br per un’interruzione di riga nel paragrafo

L'elemento br inizia una nuova riga senza creare un nuovo paragrafo. È utile quando la posizione di un'interruzione di riga è importante, come in un indirizzo o in una poesia. Quando l'argomento cambia, iniziate invece un altro p.

In questo esempio, il secondo p è un nuovo paragrafo. Lo br cambia solo la riga all'interno di questo paragrafo.

<!doctype html>
<html lang="it-IT">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Paragrafi HTML e interruzioni di riga</title>
  </head>
  <body>
    <p>Questo è il primo paragrafo.</p>
    <p>Questa è la prima riga del secondo paragrafo.<br>Questa è la seconda riga del secondo paragrafo.</p>
  </body>
</html>

Mantenete il livello di intestazione semantica nell'HTML e impostate la sua dimensione visiva utilizzando font, dimensioni e altezze di linea in CSS.

Esercizio: Correzione di una gerarchia di intestazioni

Quando una sezione principale riceve la sua prima sottosezione, non passate da h2 a h4. Il problema in questo frammento di codice è la sua gerarchia, non la dimensione del carattere.

<!-- Un livello di intestazione saltato -->
<h2>Informazioni di consegna</h2>
<h4>Aree di consegna</h4>

<!-- Una gerarchia coerente -->
<h2>Informazioni di consegna</h2>
<h3>Aree di consegna</h3>
<h3>Tempi di consegna</h3>

Confrontate i frammenti di codice separatamente all'interno di un body di un documento; non conservate entrambi come contenuto effettivo. Leggete solo i titoli e verificate se il tema principale e i suoi sottotemi rimangono chiari. Usate CSS per adattarne l'aspetto.

Verificare titoli e paragrafi

• Scegliete h1–h6 in base alla struttura del contenuto, non alla dimensione standard del carattere.
• Date a ogni intestazione un nome descrittivo ed evitate di saltare un livello quando passate a una sottosezione.
• Usate un nuovo p per un nuovo paragrafo; usate br solo per un'interruzione di riga significativa in un paragrafo.
• Controllate le dimensioni dei caratteri e gli spazi con il CSS, non con elementi vuoti o un altro livello di intestazione.

Per controllare tag annidati in modo errato, inviate il vostro HTML al servizio di validazione Markup del W3C. Verificate l'ordine di lettura e l'uso della tastiera con la piccola pagina in Fondamenti di accessibilità: intestazioni, link, immagini e tastiera.