Creare una sezione FAQ chiara con titoli, paragrafi, span e strong

Introduzione

Una sezione FAQ, cioè una raccolta di domande frequenti, deve permettere all’utente di trovare rapidamente una risposta. Per ottenere questo risultato non basta scrivere del testo: è necessario organizzarlo con una gerarchia semantica corretta. In HTML, i titoli definiscono la struttura dell’argomento, i paragrafi contengono le spiegazioni, strong evidenzia le informazioni importanti e span consente di distinguere brevi porzioni di testo senza modificare la struttura del documento.

Questo approccio è utile in molte situazioni reali: pagine di assistenza, documentazione tecnica, guide per l’acquisto e portali dedicati ai servizi. Una FAQ ben costruita migliora la leggibilità, facilita la scansione visiva e rende più comprensibile il contenuto anche agli utenti che utilizzano tecnologie assistive.

Nel tutorial realizzeremo una piccola sezione FAQ per un servizio di consegna. L’esempio mostrerà come usare correttamente h1, h2, h3, p, span e strong, evitando di usare questi elementi soltanto per ottenere un determinato aspetto grafico.

Codice completo

<h1>Domande frequenti sulla consegna</h1>

<p>
  Trova rapidamente le risposte sui tempi, sui costi e sulle modalità
  di consegna del tuo ordine.
</p>

<h2>Tempi e disponibilità</h2>

<h3>Quanto tempo serve per ricevere un ordine?</h3>

<p>
  Gli ordini vengono normalmente consegnati entro
  <strong>2-3 giorni lavorativi</strong>.
  I tempi possono variare durante i periodi promozionali.
</p>

<h3>Posso controllare lo stato della spedizione?</h3>

<p>
  Sì. Quando il pacco viene affidato al corriere riceverai un messaggio
  con il link per seguire la spedizione.
  Lo stato attuale è indicato nella sezione
  <span>I miei ordini</span> del tuo account.
</p>

<h2>Costi e modalità di consegna</h2>

<h3>Quanto costa la consegna?</h3>

<p>
  La consegna standard costa <strong>4,90 €</strong>.
  Per gli ordini superiori a <strong>50 €</strong>,
  il costo della consegna è incluso.
</p>

<h3>Dove posso ricevere il pacco?</h3>

<p>
  Puoi indicare un indirizzo personale, un indirizzo di lavoro oppure
  selezionare un punto di ritiro disponibile nella tua zona.
  Prima di confermare l’ordine, verifica sempre il campo
  <span>Indirizzo di consegna</span>.
</p>

<h2>Riepilogo delle informazioni</h2>

<ul>
  <li><strong>Tempi standard:</strong> 2-3 giorni lavorativi.</li>
  <li><strong>Costo standard:</strong> 4,90 €.</li>
  <li><strong>Consegna gratuita:</strong> ordini superiori a 50 €.</li>
</ul>

Spiegazione

La gerarchia dei titoli

Il titolo h1 identifica l’argomento principale della pagina o della sezione. In questo caso descrive l’intera area dedicata alle domande sulla consegna. In una pagina completa dovrebbe esistere normalmente un solo h1 principale, scelto in modo descrittivo e coerente con il contenuto.

I titoli h2 dividono il contenuto in aree tematiche indipendenti, come “Tempi e disponibilità” e “Costi e modalità di consegna”. I titoli h3 rappresentano invece le singole domande contenute in ciascuna area. Questa struttura permette di capire la relazione tra gli argomenti anche prima di leggere tutti i paragrafi.

Non è corretto scegliere un titolo soltanto perché appare più grande o più piccolo. Il livello deve dipendere dal ruolo del contenuto nella gerarchia. Se una domanda appartiene alla sezione “Tempi e disponibilità”, sarà più appropriato usare h3 invece di saltare direttamente a h5 per ottenere un testo visivamente ridotto.

Il ruolo dei paragrafi

L’elemento p contiene un’unità di testo autonoma. Ogni risposta della FAQ è stata inserita in un paragrafo separato, così da mantenere chiari i confini tra una spiegazione e l’altra. I paragrafi rendono il contenuto più leggibile e aiutano il browser, i motori di ricerca e gli strumenti di lettura a interpretare correttamente il documento.

Quando usare strong

strong indica che una parte del testo ha una particolare importanza. Nell’esempio viene usato per mettere in evidenza i tempi di consegna, i prezzi e la soglia per ottenere la spedizione gratuita. Il suo significato non è semplicemente “visualizza il testo in grassetto”: comunica che l’informazione deve ricevere maggiore attenzione.

È preferibile usare strong con moderazione. Se quasi ogni parola è racchiusa nell’elemento, nulla risulterà davvero prioritario. Per una semplice decorazione visiva sarebbe più corretto intervenire con il CSS, senza attribuire un’importanza semantica che il contenuto non possiede.

Quando usare span

span è un contenitore inline generico. Nell’esempio identifica nomi brevi dell’interfaccia, come “I miei ordini” e “Indirizzo di consegna”. Non crea una nuova riga e non aggiunge una gerarchia al documento. Può essere utile quando una porzione di testo deve essere selezionata per uno stile CSS, per una traduzione dinamica o per un comportamento JavaScript.

Un span privo di classe, attributi o significato aggiuntivo spesso non è necessario. Prima di inserirlo, chiediti se serve davvero a identificare quella parte del testo. Non bisogna usare span al posto di un titolo, di un paragrafo o di un elemento più semantico.

Best practice

Usa i titoli seguendo una gerarchia logica, senza scegliere il livello in base alla sola dimensione visiva.
Scrivi titoli descrittivi: una domanda come “Quanto costa la consegna?” comunica più informazioni di un generico “Costi”.
Inserisci ogni risposta in un paragrafo autonomo, evitando lunghi blocchi di testo difficili da scansionare.
Riserva strong a dati realmente importanti, come prezzi, scadenze, limiti e condizioni.
Usa span soltanto per porzioni inline che richiedono un’identificazione o una personalizzazione specifica.
Non usare elementi testuali per simulare componenti che richiedono una semantica diversa. Un link dovrebbe essere un elemento a, non uno span cliccabile.
Evita di inserire intere frasi in strong quando è sufficiente evidenziare il dato principale.
Controlla la pagina disattivando temporaneamente gli stili CSS: la struttura dovrebbe rimanere comprensibile anche senza la formattazione visiva.
Verifica il contenuto con un lettore di schermo o con strumenti di analisi dell’accessibilità, soprattutto quando la FAQ è lunga.

Riepilogo

Una sezione FAQ efficace nasce da una corretta organizzazione del testo. h1 identifica l’argomento principale, h2 divide le aree tematiche e h3 introduce le singole domande. I paragrafi raccolgono le risposte in blocchi leggibili, mentre strong segnala i dati più importanti.

span ha invece un ruolo più specifico: permette di racchiudere brevi porzioni inline senza aggiungere una nuova sezione o modificare la gerarchia. Usato con criterio, può essere utile per applicare stili, collegare comportamenti o identificare termini dell’interfaccia. La regola principale è mantenere separati contenuto e presentazione: HTML per il significato, CSS per l’aspetto e JavaScript per l’interazione.

Approfondisci con risorse ufficiali

Add as preferred source on Google