Introduzione
Una scheda prodotto efficace non deve soltanto presentare un nome e un prezzo: deve aiutare l’utente a capire rapidamente che cosa sta acquistando, quali sono i vantaggi principali e quali informazioni meritano maggiore attenzione. HTML offre elementi semantici semplici ma molto utili per organizzare questo tipo di contenuto: i titoli definiscono la struttura, i paragrafi sviluppano le informazioni, strong evidenzia concetti importanti e span consente di applicare una distinzione mirata a una piccola parte di testo senza modificarne il significato semantico.
In questo tutorial costruiremo una scheda prodotto per un paio di cuffie wireless. L’obiettivo non è realizzare l’intera interfaccia grafica, ma creare una struttura testuale chiara, leggibile e accessibile. La stessa tecnica può essere utilizzata per libri, corsi online, servizi digitali, articoli di un catalogo o pagine di vendita.
È importante ricordare che strong non serve semplicemente a rendere il testo in grassetto. Comunica che il contenuto è particolarmente importante. Al contrario, span non possiede un significato autonomo: è un contenitore generico utile quando occorre identificare una porzione di testo, ad esempio una valuta, un’etichetta breve o una parola a cui applicare uno stile tramite CSS.
Codice completo
<article>
<h2>Aurora Sound X2</h2>
<p>
Cuffie wireless con cancellazione attiva del rumore,
pensate per lo studio, il lavoro e i viaggi.
</p>
<h3>Perché sceglierle</h3>
<ul>
<li><strong>Fino a 30 ore di autonomia</strong> con una singola ricarica.</li>
<li>Microfoni integrati per chiamate più chiare.</li>
<li>Design pieghevole e peso ridotto per il trasporto.</li>
</ul>
<h3>Prezzo e disponibilità</h3>
<p>
Prezzo: <strong><span>129,90 €</span></strong>
</p>
<p>
Disponibilità:
<span>Spedizione in 2 giorni lavorativi</span>.
</p>
<h3>Informazioni importanti</h3>
<p>
La confezione include le cuffie, un cavo USB-C e una custodia da viaggio.
<strong>Il caricatore da parete non è incluso.</strong>
</p>
</article>Spiegazione
Organizzare la gerarchia con i titoli
L’elemento <h2> identifica il titolo principale della scheda all’interno della pagina. Se la pagina contiene già un titolo generale, come “Cuffie wireless”, usare un <h2> per il prodotto mantiene una gerarchia coerente. Le sezioni interne, come “Perché sceglierle” e “Prezzo e disponibilità”, sono invece introdotte da <h3>.
I titoli non dovrebbero essere scelti in base alla dimensione visiva che producono nel browser. La loro funzione principale è descrivere la struttura del documento. Un titolo più piccolo non è necessariamente meno importante dal punto di vista grafico: la dimensione può essere modificata in seguito con CSS, mentre la gerarchia HTML deve rimanere logica.
Usare i paragrafi per informazioni complete
Il tag <p> è adatto a frasi e gruppi di frasi che formano un’unità di significato. Nel codice, la descrizione generale del prodotto è separata dal prezzo e dalle informazioni sulla confezione. Questa suddivisione facilita la lettura e permette a tecnologie assistive, come gli screen reader, di interpretare meglio il contenuto.
Non è consigliabile inserire tutto il testo in un unico grande paragrafo o usare molti ritorni a capo manuali. I ritorni a capo presenti nel codice non sostituiscono una vera struttura semantica. Quando un’informazione rappresenta una sezione distinta, è preferibile introdurla con un titolo o con un nuovo paragrafo.
Quando usare strong
<strong> indica un’importanza forte. Nell’esempio viene usato per mettere in evidenza l’autonomia, il prezzo e l’assenza del caricatore dalla confezione. Sono informazioni che l’utente dovrebbe individuare facilmente, ma non bisogna trasformare ogni frase in testo importante: un uso eccessivo riduce il valore dell’enfasi.
La visualizzazione predefinita di <strong> è spesso il grassetto, ma il suo significato non dipende dall’aspetto grafico. Anche se un foglio di stile modifica il carattere, il contenuto resta semanticamente importante.
Quando usare span
<span> è un elemento inline, cioè non crea automaticamente una nuova riga. È utile per delimitare una parte del testo, come “129,90 €” o “Spedizione in 2 giorni lavorativi”. Da solo non dichiara che il testo sia importante, urgente o speciale: per ottenere questo risultato servono un significato semantico adeguato oppure classi e attributi aggiuntivi.
In un progetto reale, potremmo aggiungere una classe a uno span per applicare uno stile mirato:
<p>
Disponibilità:
<span class="disponibilita">Spedizione in 2 giorni lavorativi</span>.
</p>La classe identifica l’elemento per il CSS senza trasformare lo span in un titolo o in un messaggio semanticamente importante. Se invece l’informazione fosse un avviso critico, sarebbe opportuno valutare elementi o attributi più specifici, non usare automaticamente uno span.
Best practice
- Costruisci una gerarchia coerente: usa i titoli in ordine logico e non saltare livelli solo per ottenere una dimensione diversa.
- Scrivi titoli descrittivi: “Prezzo e disponibilità” informa più di un titolo generico come “Dettagli”.
- Usa strong con moderazione: evidenzia solo le informazioni che hanno una reale priorità per l’utente.
- Non usare span per creare struttura: uno span non sostituisce un paragrafo, un titolo o una lista.
- Preferisci le liste per gruppi di vantaggi: una lista rende più chiari elementi brevi e indipendenti.
- Non affidarti soltanto al grassetto: il testo deve rimanere comprensibile anche senza stili visivi.
- Controlla il contenuto con uno screen reader: la struttura semantica deve funzionare anche per chi naviga senza vedere la pagina.
- Mantieni le frasi brevi: una scheda prodotto deve essere consultabile rapidamente, soprattutto su dispositivi mobili.
- Separa contenuto e presentazione: HTML descrive il significato, mentre CSS gestisce colori, spaziature, font e dimensioni.
Riepilogo
Una scheda prodotto ben strutturata usa i titoli per organizzare le sezioni, i paragrafi per presentare informazioni complete, strong per segnalare contenuti realmente importanti e span per delimitare brevi porzioni di testo che potranno essere gestite individualmente. Questi elementi, usati insieme, migliorano la leggibilità e rendono il documento più comprensibile anche alle tecnologie assistive.
La regola fondamentale è partire dal significato, non dall’aspetto grafico. Prima si decide che tipo di informazione si sta descrivendo; poi si sceglie l’elemento HTML più adatto. In questo modo il codice rimane ordinato, accessibile e facile da modificare quando sarà il momento di aggiungere CSS o JavaScript.
Approfondisci con risorse ufficiali
Per approfondire la gestione del testo e la semantica HTML, consulta la documentazione ufficiale e le risorse tecniche affidabili:
- MDN Web Docs: cerca le pagine dedicate agli elementi
h1-h6,p,spanestrong. - WHATWG HTML Living Standard: contiene la specifica tecnica aggiornata del linguaggio HTML.
- W3C Web Accessibility Initiative: offre linee guida per creare contenuti più accessibili.
- Web Content Accessibility Guidelines: approfondisce principi come struttura, comprensibilità e percepibilità dei contenuti.