Attributi globali HTML: usare id, class, style, title e tabindex per costruire una scheda prodotto accessibile

Introduzione

Quando si parla di attributi globali HTML, spesso si pensa a dettagli secondari. In realtà, id, class, style, title e tabindex sono strumenti molto utili per progettare interfacce chiare, stilizzabili e più semplici da usare anche con tastiera o tecnologie assistive.

In questo tutorial vedremo un caso pratico: una scheda prodotto per un e-commerce. È un esempio concreto perché combina contenuto informativo, elementi interattivi e piccoli accorgimenti di accessibilità. Useremo gli attributi globali per:

• identificare univocamente un blocco con id;
• raggruppare elementi simili con class;
• applicare uno stile puntuale con style;
• mostrare informazioni aggiuntive con title;
• gestire l’ordine di focus con tabindex.

L’obiettivo non è solo “sapere cosa fanno”, ma capire quando usarli davvero e come combinarli in modo sensato.

Codice completo

<article id="scheda-prodotto-aurora" class="card prodotto evidenza" tabindex="0" title="Scheda prodotto: cuffie Aurora X2">
  <h2 class="card__titolo">Aurora X2</h2>
  <p class="card__descrizione">
    Cuffie wireless con cancellazione del rumore, autonomia fino a 30 ore e ricarica rapida.
  </p>

  <ul class="card__caratteristiche">
    <li>Bluetooth 5.3</li>
    <li>Microfono integrato</li>
    <li>Modalità gaming a bassa latenza</li>
  </ul>

  <p class="card__prezzo" style="color: #0a7a3d; font-weight: bold;">
    € 89,90
  </p>

  <p class="card__nota" title="Disponibilità aggiornata in tempo reale">
    Disponibile in pronta consegna.
  </p>

  <button class="card__azione" tabindex="0">
    Aggiungi al carrello
  </button>

  <a href="#recensioni" class="card__link" tabindex="0" title="Vai alla sezione recensioni del prodotto">
    Leggi le recensioni
  </a>
</article>

<section id="recensioni" class="sezione recensioni" tabindex="-1">
  <h3>Recensioni</h3>
  <p>Qui puoi inserire i commenti degli utenti e le valutazioni del prodotto.</p>
</section>

Spiegazione

Vediamo ora il codice pezzo per pezzo, concentrandoci sul ruolo reale di ciascun attributo globale.

id: identificare in modo univoco un elemento

L’attributo id="scheda-prodotto-aurora" assegna un identificatore univoco alla scheda. Questo è utile quando devi:

• creare un collegamento interno con #scheda-prodotto-aurora;
• selezionare l’elemento da JavaScript;
• associare etichette o riferimenti precisi in una pagina complessa.

La regola importante è semplice: un id deve essere unico nella pagina. Non usarlo per elementi ripetuti, come molte card uguali in una griglia.

class: raggruppare elementi con lo stesso ruolo

Le classi card, prodotto, evidenza e le classi BEM come card__titolo o card__prezzo servono a descrivere il ruolo visivo o funzionale degli elementi.

Con class puoi:

• applicare lo stesso stile a più schede prodotto;
• selezionare gruppi di elementi con JavaScript;
• mantenere un codice CSS più leggibile e riutilizzabile.

Nel codice, class="card prodotto evidenza" indica che l’articolo è una card, rappresenta un prodotto ed è evidenziato rispetto agli altri.

style: una personalizzazione rapida e mirata

L’attributo style applica uno stile inline direttamente all’elemento. Nel nostro esempio lo usiamo sul prezzo:

• color: #0a7a3d; per evidenziare il prezzo in verde;
• font-weight: bold; per renderlo più visibile.

Lo stile inline è utile per piccole eccezioni, ma non dovrebbe diventare la strategia principale. Se devi gestire molte regole grafiche, è meglio spostarle in un foglio CSS esterno.

title: aggiungere un suggerimento contestuale

L’attributo title mostra un testo informativo quando l’utente passa il mouse sopra l’elemento. Nel nostro esempio lo usiamo in due punti:

• sull’intera scheda, per chiarire che si tratta della scheda prodotto;
• sulla nota di disponibilità, per aggiungere un dettaglio contestuale.

Il title può essere utile, ma va usato con cautela: su dispositivi touch non sempre è immediato da consultare, e non sostituisce etichette visibili o testi chiari nel contenuto.

tabindex: controllare il focus da tastiera

L’attributo tabindex è spesso sottovalutato. Nel nostro esempio è usato per rendere la scheda e la sezione recensioni parte del flusso di navigazione da tastiera.

• tabindex="0" rende un elemento raggiungibile con Tab seguendo l’ordine naturale del documento;
• tabindex="-1" rende l’elemento non raggiungibile con Tab, ma ancora focalizzabile via script o ancore interne.

Nel codice, la sezione recensioni ha tabindex="-1" perché può essere raggiunta tramite un link interno e poi messa a fuoco dal browser o da JavaScript, senza entrare nel normale ordine di tabulazione.

Best practice

Per usare questi attributi in modo professionale, conviene seguire alcune regole pratiche.

• Usa id solo quando serve davvero: per ancore, riferimenti unici o integrazioni precise con JavaScript.
• Preferisci class per la stilizzazione: è la scelta migliore per componenti riutilizzabili.
• Evita di abusare di style: va bene per correzioni rapide o prototipi, ma il CSS esterno resta la soluzione più manutenibile.
• Non usare title come unico supporto informativo: il contenuto importante deve essere leggibile senza hover.
• Usa tabindex con attenzione: non inserire valori positivi, perché alterano in modo artificiale l’ordine di navigazione.
• Ricorda l’accessibilità: ogni elemento focalizzabile deve avere senso per chi usa tastiera o screen reader.

Un errore comune è rendere focusabili troppi elementi solo perché “si può fare”. In realtà, ogni elemento nel flusso di tab deve avere un motivo chiaro per esserci.

Riepilogo

In questo tutorial abbiamo visto come gli attributi globali HTML possano diventare strumenti concreti per costruire una scheda prodotto ben organizzata.

• id identifica un elemento in modo univoco;
• class permette di raggruppare e riutilizzare stili e comportamenti;
• style applica una personalizzazione rapida direttamente nel markup;
• title aggiunge un suggerimento contestuale;
• tabindex controlla l’accessibilità da tastiera e il focus.

La lezione più importante è questa: non usare gli attributi globali come scorciatoie casuali. Usali con intenzione, pensando alla struttura, alla leggibilità e all’esperienza dell’utente.

Approfondisci con risorse ufficiali

• MDN Web Docs - Attributi globali HTML: documentazione chiara e completa sui principali attributi globali.
• MDN Web Docs - id: dettagli su unicità, selezione e utilizzo corretto.
• MDN Web Docs - class: guida pratica all’uso delle classi nei componenti HTML.
• MDN Web Docs - title: comportamento, limiti e considerazioni di accessibilità.
• MDN Web Docs - tabindex: regole di focus, navigazione da tastiera e best practice.

Se vuoi, nel prossimo passo posso trasformare questo tutorial in una versione con CSS esterno e comportamento JavaScript, così vedrai come questi attributi lavorano in un componente reale completo.