Page 13 - Guida tascabile HTML5
P. 13
La specifica HTML prevede l’utilizzo di attributi per arricchire i tag con
informazioni aggiuntive. In alcuni casi tali attributi sono addirittura obbligatori:
sono necessari per completare la dichiarazione di un tag, come nell’esempio
riportato di seguito.
<img src="spiaggia.jpg" alt="Tramonto sul mare">
Il tag <img>, con il quale si inserisce nel flusso della pagina HTML un’immagine,
richiede l’attributo src, che indica il percorso per recuperare il file, e l’attributo
alt, che per questioni di accessibilità contiene un testo alternativo per descrivere
l’immagine in questione.
Gli attributi sono dichiarati nel tag di apertura con la sintassi nome="valore",
prima del simbolo >.
TERMINOLOGIA Il tag <img> scelto per l’esempio è uno dei pochi che nella specifica
HTML non prevede un tag di chiusura: poiché il suo ruolo è quello di fare riferimento a
una risorsa esterna non può per definizione contenere tag nidificati al suo interno, e le
uniche informazioni richieste sono inserite negli attributi obbligatori.
Sono previsti anche attributi più generici, che è possibile legare a qualsiasi
elemento per arricchirlo. Quelli più comunemente utilizzati sono id (che crea un
riferimento univoco all’elemento), class (che attribuisce all’elemento una o più
classi utilizzate nei CSS), lang (con il quale può essere dichiarata la lingua del
testo) e style (con il quale, anche se poco consigliabile, è possibile inserire regole
di formattazione direttamente nel documento HTML).
Per esempio, grazie a un markup descrittivo come il seguente, i motori di ricerca
possono identificare in modo corretto la lingua delle porzioni di testo in una pagina
con contenuto in lingue differenti:
<body>
<h1>Tag con attributi</h1>
<p lang="it">Gli attributi arricchiscono il markup HTML</p>
<p lang="en">Attributes enhance HTML markup</p>
</body>
NOTA Tenete presente che, come regola generale, è consigliabile quando possibile
fare riferimento ai tag con il corretto valore semantico piuttosto che ricorrere agli
attributi id e class per assegnare tale valore in modo personalizzato: non ha senso
utilizzare per esempio un markup come <p class="titolo"> quando sono disponibili ben
sei livelli di titoli da <h1> a <h6>. La specifica HTML5 ha introdotto molti elementi
dedicati proprio alla creazione di una struttura del documento articolata e completa,
che verranno analizzati nei prossimi capitoli.
