Attributi Globali HTML

Gli attributi globali sono attributi che puoi aggiungere a qualsiasi elemento HTML. A differenza degli attributi specifici di un elemento — come href (solo su <a>), src (solo su <img>), o colspan (solo sulle celle di una tabella) — gli attributi globali fanno parte del vocabolario condiviso che ogni tag comprende.

È questo che li rende così importanti: invece di imparare un attributo diverso per ogni elemento, impari un insieme di attributi globali e li riutilizzi ovunque. Utilizzerai class e id per collegare gli elementi a CSS e JavaScript, data-* per associare dati personalizzati, tabindex per controllare il focus da tastiera, lang e dir per rendere il contenuto accessibile in qualsiasi lingua, e hidden, title o contenteditable per i comportamenti comuni dell'interfaccia utente.

Il fatto che un attributo globale sia valido su un elemento non significa che abbia sempre un effetto visibile. Ad esempio, spellcheck non modificherà il comportamento o la semantica di un paragrafo, e lang non ha effetto su un elemento privo di contenuto testuale. Va bene così — sono consentiti ovunque; semplicemente non fanno nulla dove non c'è nulla su cui agire.

Puoi trovare tutti gli attributi globali e le relative spiegazioni nella tabella di riferimento qui sotto, seguita da approfondimenti su quelli che utilizzerai più spesso.

L'attributo id

id assegna a un elemento un nome univoco nella pagina. È l'ancoraggio che collega HTML al resto della piattaforma: CSS può selezionarlo con #name, JavaScript può recuperarlo con document.getElementById(), una label può associare un controllo del form ad esso tramite for, e un link può navigare direttamente ad esso.

<h2 id="install">Installation</h2>

<!-- Clicking this link scrolls to the heading above -->
<a href="#install">Jump to Installation</a>

Il valore deve essere univoco nel documento e non contenere spazi. I valori id duplicati sono invalidi e fanno sì che getElementById() restituisca solo la prima corrispondenza. Per saperne di più, consulta il capitolo sull'attributo id e i link di ancoraggio in Link HTML.

L'attributo class

Mentre id è per un singolo elemento, class è per gruppi di elementi che condividono stile o comportamento. Un elemento può avere più classi separate da spazi, e la stessa classe può essere riutilizzata su quanti elementi si desidera.

<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>

Entrambi i pulsanti condividono la classe btn (stili comuni) e aggiungono un'altra classe per la loro variante. Questa è la base su cui viene applicato CSS — vedi Selettori CSS e CSS id e class.

Attributi personalizzati data-*

data-* ti permette di associare dati privati a un elemento senza inventare attributi non standard. Qualsiasi attributo il cui nome inizia con data- è valido e viene ignorato dal rendering del browser — esiste esclusivamente per i tuoi script.

<button id="cart" data-product-id="42" data-price="19.99">
  Add to cart
</button>

<script>
  const btn = document.getElementById("cart");

  // A "data-foo-bar" attribute is read as element.dataset.fooBar
  console.log(btn.dataset.productId); // "42"
  console.log(btn.dataset.price);     // "19.99"
</script>

Nota la regola di denominazione: l'attributo data-product-id diventa dataset.productId in JavaScript — il prefisso data- viene eliminato e ogni segmento con trattino diventa camelCase. I valori sono sempre stringhe, quindi convertili (Number(btn.dataset.price)) quando hai bisogno di un numero.

L'attributo tabindex

tabindex controlla se un elemento può ricevere il focus da tastiera e in quale ordine il tasto Tab lo raggiunge. Esistono tre casi significativi:

• tabindex="0" — aggiunge l'elemento all'ordine di tabulazione naturale, nella posizione determinata dalla sua posizione nel documento. Usalo per rendere accessibile da tastiera un elemento normalmente non focalizzabile (come un <div> trasformato in un widget personalizzato).
• tabindex="-1" — rimuove l'elemento dall'ordine di tabulazione, ma consente comunque di focalizzarlo con JavaScript tramite element.focus(). Utile per spostare il focus su una regione (es. un dialog o un riepilogo degli errori) senza inserirlo nella sequenza Tab.
• Un valore positivo (tabindex="1" e superiori) — forza l'elemento in cima all'ordine di tabulazione, davanti a tutto ciò che ha tabindex="0" o nessun tabindex. Questo è un anti-pattern: sovrascrive l'ordine di lettura naturale e quasi sempre confonde gli utenti da tastiera. Evitarlo.

<!-- Reachable by keyboard, in normal order -->
<div tabindex="0" role="button">Custom button</div>

<!-- Focusable by script only, skipped by Tab -->
<div id="dialog" tabindex="-1">Dialog content</div>

La regola pratica per l'accessibilità: lascia che l'ordine del DOM guidi l'ordine di tabulazione. Usa 0 e -1 deliberatamente, e riserva i valori positivi per mai.

L'attributo contenteditable

contenteditable="true" rende il contenuto di un elemento direttamente modificabile dall'utente, trasformando un semplice <div> in una superficie di base per la modifica del testo avanzato. contenteditable="false" (il valore predefinito) lo mantiene in sola lettura.

<div contenteditable="true">
  Click here and start typing — this text is editable.
</div>

È il blocco fondamentale alla base degli editor nella pagina e dei campi note inline. Poiché l'utente può modificare il DOM, leggi il testo corrente in JavaScript tramite textContent o innerHTML dell'elemento quando devi salvarlo.

Gli attributi lang e dir (internazionalizzazione)

lang dichiara la lingua del contenuto di un elemento utilizzando un codice lingua come en, fr o ar. Impostare lang sull'elemento <html> è essenziale per l'accessibilità: i lettori di schermo lo usano per scegliere la pronuncia e la voce corrette, mentre i motori di ricerca e gli strumenti di traduzione lo usano per identificare la lingua.

dir imposta la direzione di base del testo — ltr (da sinistra a destra, il valore predefinito), rtl (da destra a sinistra, per lingue come l'arabo e l'ebraico), o auto (lascia che il browser la deduca dal contenuto).

<html lang="en">
  <body>
    <p>This paragraph reads left to right.</p>

    <!-- An Arabic phrase that reads right to left -->
    <p lang="ar" dir="rtl">مرحبا بكم في عالم البرمجة</p>
  </body>
</html>

Per i dettagli sul layout da destra a sinistra, consulta la proprietà CSS direction. Imposta sempre lang su <html> e aggiungilo nuovamente su qualsiasi contenuto inline che cambia lingua — farlo correttamente è uno dei miglioramenti di accessibilità più semplici e ad alto impatto su una pagina.

Note sull'accessibilità

Alcuni attributi globali hanno un effetto diretto sulle tecnologie assistive, quindi usali con attenzione:

• lang — necessario affinché i lettori di schermo leggano il contenuto nella lingua e accento corretti. Impostalo su <html> e su qualsiasi elemento la cui lingua differisce da quella della pagina.
• dir — garantisce che le lingue da destra a sinistra vengano visualizzate e navigate correttamente. Associalo a lang per i contenuti RTL.
• tabindex — i valori positivi rompono l'ordine di focus previsto per gli utenti da tastiera e con screen reader; usa solo 0 e -1.
• accesskey — le sue scorciatoie da tastiera si scontrano frequentemente con quelle dei browser e delle tecnologie assistive, quindi il tasto scelto potrebbe non funzionare per tutti. Trattalo come una comodità, mai come l'unico modo per raggiungere una funzionalità.

Riepilogo

Un ristretto gruppo di attributi globali vale la pena conoscere a fondo perché li userai costantemente: id, class, data-*, tabindex e la coppia i18n lang / dir. Gli altri — title, hidden, contenteditable, draggable, spellcheck, translate, style, accesskey — sono utili da riconoscere e consultare nella tabella sopra quando la situazione lo richiede. Evita completamente gli attributi rimossi (contextmenu, dropzone); non fanno più parte di HTML.

Esercitazione