Attributi globali: id, class, lang, data-* e tabindex

Gli attributi globali possono essere usati su quasi tutti gli elementi HTML. Alcuni sono fondamentali per CSS e navigazione, altri vanno usati con più cautela.

class

class assegna uno o più nomi riutilizzabili a un elemento.

<article class="card progetto">
  ...
</article>

È l’attributo principale per collegare HTML e CSS. Più elementi possono avere la stessa classe, e un elemento può avere più classi separate da spazi.

id

id identifica un elemento in modo unico nella pagina.

<section id="contatti">
  <h2>Contatti</h2>
</section>

Serve soprattutto per:

• link interni: <a href="#contatti">Contatti</a>;
• riferimenti da JavaScript;
• associazioni accessibili in casi specifici.

Non usare lo stesso id su più elementi. Per lo stile CSS quotidiano, preferisci le classi: sono riutilizzabili e creano meno problemi di specificità.

lang

lang indica la lingua del contenuto.

<html lang="it">

Puoi usarlo anche su parti specifiche della pagina:

<p>Il termine <span lang="en">layout</span> viene dall'inglese.</p>

Questo aiuta traduttori, correttori, motori di ricerca e screen reader.

data-*

Gli attributi data-* permettono di salvare dati personalizzati nell’HTML.

<button data-filter="css">Mostra lezioni CSS</button>

Sono utili quando JavaScript deve leggere informazioni dal DOM. Non usarli per contenuti che l’utente dovrebbe vedere: per quello esistono testo, elementi HTML e attributi semantici.

tabindex

tabindex modifica il modo in cui un elemento entra nella navigazione da tastiera.

<div tabindex="0">Elemento raggiungibile col tasto Tab</div>

Usalo con cautela. Nella maggior parte dei casi, se un elemento deve essere cliccabile, è meglio usare direttamente un elemento interattivo nativo:

<button>Apri menu</button>
<a href="/contatti.html">Contatti</a>

Evita tabindex con valori positivi come tabindex="1" o tabindex="2": creano un ordine di focus artificiale e difficile da mantenere. Se l’ordine del Tab non è corretto, di solito va corretto l’ordine dell’HTML.

Esempio completo

<section id="profilo" class="card" lang="it" data-user-id="1042">
  <h2>Profilo studente</h2>
  <p>Studia HTML e CSS.</p>
</section>

Qui id serve come ancora, class per lo stile, lang per la lingua e data-user-id per un eventuale script.

Esercizio

Crea una sezione con id, due classi, un link interno che la raggiunge e un attributo data-*. Poi verifica che non ci siano id duplicati e che nessun tabindex sia usato per compensare un HTML disordinato.