# Classi HTML: come funziona l’attributo class
Un [elemento HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/elemento-html/) può essere aggiunto a una classe HTML usando l’attributo `class`. Si può usare in [CSS](https://www.ionos.it/digitalguide/siti-web/web-design/cose-css/) o in JavaScript per manipolare gli elementi associati nello stesso modo.
## Cosa sono le classi HTML?
Le classi HTML sono utilizzate in [HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/) per **identificare e raggruppare elementi in una pagina web**. Si tratta di uno degli [attributi HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-html/) più importanti da conoscere quando si [impara l’HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/imparare-lhtml-lampio-tutorial-per-principianti/). Con le classi gli sviluppatori e le sviluppatrici hanno la possibilità di creare o manipolare più elementi senza doverli trattare singolarmente.
Consiglio L’attributo `class` può essere applicato a qualsiasi elemento HTML.
## A cosa servono le classi HTML?
Le classi HTML fanno parte del repertorio standard dello sviluppo web. Sono essenziali per due aree di applicazione in particolare:
1. **Progettazione grafica degli elementi con CSS**: quando [integri CSS in HTML](https://www.ionos.it/digitalguide/siti-web/web-design/come-collegare-css-nei-documenti-html/), le classi consentono di definire stili che possono essere applicati a più elementi contemporaneamente. In questo modo il design di un sito web rimane coerente e allo stesso tempo il codice CSS diventa modulare.
2. **Manipolazione degli elementi con JavaScript**: utilizzando le classi HTML, chi programma può facilmente selezionare gruppi specifici di elementi e manipolarli attraverso il codice JavaScript. Ciò è particolarmente utile per le interazioni dinamiche e le interfacce utente che devono reagire a seconda del comportamento dell’utente.
## Sintassi delle classi HTML
La sintassi per definire una classe in HTML è molto semplice: aggiungi **l’attributo `class` all’elemento che vuoi assegnare a una classe e specifica il nome della classe associata**. Il codice si presenta nel modo seguente:
```html
Questo testo rientra nella classe chiamata “Classe di test”.
```
Nell’esempio precedente, il [paragrafo HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/paragrafo-html/) è stato assegnato alla classe “Classe di test”.
Consiglio I nomi delle classi HTML sono **case sensitive**, ovvero distinguono tra maiuscole e minuscole. Nell’esempio, “classe di test” e “Classe di test” sarebbero **due classi HTML diverse**.
Un esempio più dettagliato mostra i vantaggi delle classi:
```html
Esempio di classi HTML
Ti diamo il benvenuto nell’esempio dedicato alle classi HTML
Questo testo è evidenziato perché fa parte della classe chiamata “highlight”.
Questo testo è evidenziato e centrato perché fa parte della classe chiamata “highlight” e “center”.
hash_a1a19751c2021f8bd2064b720a647724d0cdcd3d
```
La posizione e lo stile dei paragrafi e dei titoli sono influenzati nell’esempio di codice precedente dalle classi HTML utilizzate facendo riferimento alle classi nel codice CSS. Tieni presente che puoi **accedere a una classe HTML in CSS** mettendo un punto (`.`) davanti al nome della classe.
Consiglio Un singolo elemento HTML può appartenere a più classi, elencate semplicemente una dopo l’altra senza separatori.
## Qual è la differenza tra classi HTML e ID HTML?
Oltre all’attributo `class`, HTML prevede anche l’[attributo HTML id](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/id-html/). Sebbene entrambi gli attributi abbiano scopi simili, non devono essere confusi, poiché esistono alcune differenze fondamentali tra loro:
- **Unicità:** un ID deve essere unico in un documento HTML, quindi due elementi non possono mai avere lo stesso ID. Le classi, invece, possono essere condivise da più elementi nello stesso documento.
- **Riferimenti nei CSS:** il punto che precede (.) è usato per le classi di stile nei CSS, mentre l’hashtag che precede (#) è utilizzato per gli ID che determinano lo stile del documento.
- **Specificità:** gli ID hanno una specificità maggiore rispetto alle classi. Ciò significa che se un ID e una classe sono applicati allo stesso elemento HTML e definiscono stili contraddittori, gli stili dell’ID hanno la precedenza. La classe può quindi essere sovrascritta.
This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/classi-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/classi-html/) for AI/LLM consumption.