Id's & Classes

Ora che abbiamo iniziato a suddividere il nostro contenuto dal punto di vista semantico, è giunto il momento di introdurre un altro insieme di attributi/valori. Fino ad ora non abbiamo lavorato sull'aspetto della tua pagina, ma in seguito vorrai essere in grado di farlo ed è qui che ritorneranno utili gli attributi id e le classi.

Id

Questo attributo assegna un nome al tuo elemento. Il nome deve essere unico e non può essere utilizzato da nessun'altra parte all'interno del codice. Id è un'abbreviazione di identificazione, quindi lo userai quando vorrai identificare questo specifico elemento.

Potresti usare l'elemento id per esempio per definire le colonne nella tua pagina. In questo caso il markup HTML sarà simile al seguente:

<div id="right-column">Content of the right column</div>
<div id="left-column"> Content of the left column </div>

Ti ho detto poco fa che gli elementi id devono essere unici e che questo implica che non dovrai averne due dello stesso valore nel tuo markup - l'esempio successivo non verrà interpretato in modo corretto dal browser:

<div id="menu">This would be your menu</div>
<div id="blog-entry">Your first blog-entry</div>
<div id="blog-entry">Your second blog-entry</div>

Classi

Le classi vengono usate per assegnare alcune proprietà generali al tuo elemento. Ciò significa che puoi avere diversi elementi nella pagina che hanno lo stesso nome. Lo fai perché vuoi che si comportino ed appaiano allo stesso modo. Di norma viene usato per esempio per link o immagini, ovvero quando vuoi che molti elementi abbiano un aspetto identico. Di seguito trovi un esempio in cui vengono assegnate classi diverse all'intera sezione ed in una porzione specifica della stessa.

<div class="blog-entry">
	<p> Just Another Day<br />
	Written by Christina<br />
	On January 11th </p>
	<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</div>
<div class="blog-entry">
	<p> My First Blog Entry<br />
	Written by Christina<br />
	On January 10th </p>
	<p class="content">I’m so happy to write my first blog entry – yay!</p>
<div>

Puoi usarlo in combinazione con Cascading Style Sheets (CSS). Il CSS dice al browser come visualizzare un elemento HTML, ovvero che tutta la formattazione è (o dovrebbe essere) rimossa dal documento HTML e memorizzata in un file separato, conosciuto anche con il nome di foglio di stile. Non andrò oltre sui CSS in questo tutorial, ma è importante sapere che esiste una cosa chiamata foglio di stile e che il design della tua pagina web viene definito all'interno di questo documento.

Cosa hai imparato

• Id e classi sono attributi
• Gli Id sono unici per uno specifico elemento
• Le classi possono essere utilizzate in più elementi
• Di norma vengono usati in combinazione con il CSS