Classi HTML: come funziona l’attributo class
Un elemento HTML può essere aggiunto a una classe HTML usando l’attributo class. Si può usare in CSS o in JavaScript per manipolare gli elementi associati nello stesso modo.
Cosa sono le classi HTML?
Le classi HTML sono utilizzate in HTML per identificare e raggruppare elementi in una pagina web. Si tratta di uno degli attributi HTML più importanti da conoscere quando si impara l’HTML. Con le classi gli sviluppatori e le sviluppatrici hanno la possibilità di creare o manipolare più elementi senza doverli trattare singolarmente.
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:
- Progettazione grafica degli elementi con CSS: quando integri CSS in 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.
- 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:
<p class="Classe di test">Questo testo rientra nella classe chiamata “Classe di test”.</p>Nell’esempio precedente, il paragrafo HTML è stato assegnato alla classe “Classe di test”.
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:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio di classi HTML</title>
<style>
.highlight {
background-color: blue;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Ti diamo il benvenuto nell’esempio dedicato alle classi HTML</h1>
<p class="highlight">Questo testo è evidenziato perché fa parte della classe chiamata “highlight”.</p>
<p class="highlight center">Questo testo è evidenziato e centrato perché fa parte della classe chiamata “highlight” e “center”.</p>
</body>
</html>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.
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. 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.
- Domain Connect gratuito per una configurazione facile del DNS
- Certificato SSL Wildcard gratuito
- Protezione privacy inclusa