Guida HTML interattiva: Attributi HTML

Q: Che differenza c'è tra class e id in HTML?

Un id deve essere unico nella pagina e identifica un solo elemento, per i link #fragment, e getElementById. Una class può essere condivisa da molti elementi, e un elemento può avere più classi separate da spazi. Usa le classi per lo stile.

Q: Come aggiungo più classi a un elemento HTML?

Mettile in un solo attributo class separate da spazi: . Scrivere class due volte non funziona: il browser tiene solo il primo.

Q: Perché il mio pulsante resta disattivato con disabled="false"?

disabled è un attributo booleano: la sua presenza significa vero, qualunque sia il valore. Per attivare l'elemento, togli l'attributo, oppure imposta button.disabled = false in JavaScript, che lo rimuove.

Q: Posso inventare attributi HTML miei?

Usa il prefisso data-: data-price="12" o data-user-id="7" sono validi su qualsiasi elemento e si leggono in JavaScript con element.dataset. I nomi inventati senza il prefisso sono HTML non valido.

Cosa sono gli attributi HTML

Un attributo aggiunge informazioni a un elemento. Va dentro il tag di apertura, scritto come un nome, un segno di uguale e un valore tra virgolette: name="value". Un elemento può avere quanti attributi vuoi, separati da spazi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href dice al link dove andare, src e alt descrivono l'immagine, type, placeholder e required configurano il campo. Ogni elemento ha il suo insieme di attributi, e alcuni (gli attributi globali più sotto) funzionano su tutti gli elementi.

Regole di sintassi

<input type="text" name="city" value="Paris" disabled>

Nome, segno di uguale, valore tra virgolette. Le virgolette doppie sono la convenzione; funzionano anche quelle singole (title='Say "hi"' è il modo per mettere una virgoletta doppia dentro un valore).
I nomi non distinguono maiuscole e minuscole. CLASS e class sono lo stesso attributo. I valori invece sì: class="Box" e class="box" sono classi diverse.
Senza spazi le virgolette sono facoltative, ma mettile comunque. class=big box dà all'elemento la classe big e un secondo attributo, senza senso, chiamato box.
L'ordine non conta. <img alt="" src="a.png"> equivale a <img src="a.png" alt="">.
Ogni nome una sola volta per elemento. Se un attributo compare due volte, il browser tiene il primo e scarta il secondo senza avvisare.

Attributi booleani

Alcuni attributi sono acceso o spento. Per questi la presenza significa vero, e il valore viene ignorato. disabled, checked, required, readonly, hidden, multiple, autofocus e open funzionano tutti così.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

Il terzo pulsante è disattivato anche se il valore dice false, perché il browser controlla solo se l'attributo c'è. Per spegnere un attributo booleano, toglilo. In JavaScript, button.disabled = false fa esattamente questo.

L'attributo class

class dà a un elemento uno o più nomi che CSS e JavaScript usano per trovarlo. Più elementi possono condividere una classe, e un elemento può avere più classi, separate da spazi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Ogni classe in più aggiunge le sue regole sopra le altre. In CSS una classe si seleziona con un punto (.card); in JavaScript, element.classList.add('featured') e classList.remove le modificano. Le classi sono il modo normale di dare stile: la maggior parte del tuo CSS punterà a delle classi.

L'attributo id

id dà a un elemento un nome che deve essere unico nella pagina. Usalo quando ti serve esattamente un elemento: la destinazione di un link, un <label for> o document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Cliccando l'etichetta il cursore va nel campo, perché for="email" punta a id="email". Il link scorre fino a #pricing perché il frammento nell'href corrisponde all'id.

	`class`	`id`
Quanti elementi possono condividerlo	Quanti vuoi	Uno (unico)
Valori per elemento	Più di uno, separati da spazi	Uno
Selettore CSS	`.name`	`#name`
Uso tipico	Dare stile a gruppi di elementi	Destinazioni dei link, etichette, un elemento preciso in JavaScript

Un id non può contenere spazi. Fallo iniziare con una lettera perché sia comodo da usare in CSS: #2col non è un selettore CSS valido senza escape.

Attributi globali

Questi attributi funzionano su qualsiasi elemento:

Attributo	Cosa fa
`id`	Nome unico dell'elemento
`class`	Elenco di nomi di classe separati da spazi
`style`	CSS in linea, come `style="color: red"`
`title`	Testo del tooltip mostrato al passaggio del mouse
`lang`	Lingua del contenuto, come `lang="fr"`
`dir`	Direzione del testo: `ltr`, `rtl` o `auto`
`hidden`	Nasconde l'elemento (booleano)
`tabindex`	Rende un elemento raggiungibile con Tab, o ne imposta l'ordine
`contenteditable`	Permette all'utente di modificare il testo dell'elemento
`data-*`	Dati tuoi, letti con JavaScript

L'attributo lang ha una pagina tutta sua perché influisce su lettori di schermo, traduzione e ricerca.

Attributi data-*

Quando ti serve salvare un valore tuo su un elemento, metti il prefisso data- al nome. Dopo il prefisso va bene qualsiasi nome, e JavaScript legge i valori tramite element.dataset, con i trattini trasformati in camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id diventa dataset.productId. I valori tornano sempre come stringhe, quindi convertili con Number() prima di fare calcoli. Anche il CSS può selezionarli: [data-price="4.50"].

Errori comuni

Scrivere class due volte. <div class="a" class="b"> tiene solo a. Metti entrambe in un solo attributo: class="a b".
Riusare un id. Due elementi con lo stesso id rompono i #links, le etichette e getElementById, che restituisce solo il primo. Usa una classe per tutto ciò che si ripete.
disabled="false" o checked="false". L'attributo è ancora presente, quindi è ancora attivo. Toglilo.
Valori con spazi senza virgolette. alt=My photo imposta alt a My. Metti tra virgolette ogni valore.
Inventare attributi senza data-. <div price="4"> è HTML non valido e potrebbe scontrarsi con un futuro attributo standard. Usa data-price.

Domande frequenti

Cos'è un attributo HTML?

Un attributo è un'informazione in più scritta dentro un tag di apertura nella forma name="value". Configura l'elemento: href indica dove porta un link, src e alt descrivono un'immagine, class e id permettono a CSS e JavaScript di trovare l'elemento.

Che differenza c'è tra class e id in HTML?

Un id deve essere unico nella pagina e identifica un solo elemento, per i link #fragment, <label for> e getElementById. Una class può essere condivisa da molti elementi, e un elemento può avere più classi separate da spazi. Usa le classi per lo stile.

Come aggiungo più classi a un elemento HTML?

Mettile in un solo attributo class separate da spazi: <div class="card featured dark">. Scrivere class due volte non funziona: il browser tiene solo il primo.

Gli attributi HTML vogliono le virgolette?

Le virgolette sono facoltative quando il valore non ha spazi né caratteri speciali, ma metterle sempre è l'abitudine sicura. class=big box dà all'elemento la classe big più un attributo separato chiamato box.

Perché il mio pulsante resta disattivato con disabled="false"?

disabled è un attributo booleano: la sua presenza significa vero, qualunque sia il valore. Per attivare l'elemento, togli l'attributo, oppure imposta button.disabled = false in JavaScript, che lo rimuove.

Posso inventare attributi HTML miei?

Usa il prefisso data-: data-price="12" o data-user-id="7" sono validi su qualsiasi elemento e si leggono in JavaScript con element.dataset. I nomi inventati senza il prefisso sono HTML non valido.

Concetti correlati