Gli attributi

I tag HTML possono essere corredati di uno o più attributi, che servono per meglio specificare la funzione o la tipologia dell'elemento, per memorizzare dati o per arricchire di significato il contenuto.

Un tag con attributi si scrive in questo modo:

<tag attributo1="valore1" attributo2="valore2">

Ecco un esempio pratico:

<input type="email" name="email" placeholder="Scrivi il tuo indirizzo email...">

Il tag input indica genericamente un elemento che consente agli utenti di inserire delle informazioni. Grazie agli attributi però, possiamo specificare che vogliamo un indirizzo email (attributo type) e possiamo comunicarlo all'utente con un messaggio (attributo placeholder).

In sostanza gli attributi:

• sono coppie chiave-valore separate dal carattere = (uguale);
• i valori sono tipicamente racchiusi tra virgolette "", ma è possibile anche utilizzare gli apici '';
• si scrivono lasciando almeno uno spazio dopo il nome dell'elemento nel tag di apertura (o nell'unico tag nel caso di elementi non contenitori).

Nota: in alcune rare situazioni, come quando il valore dell'attributo contiene in sè le virgolette, è necessario usare gli apici (es. data-nome = 'Luca "la roccia" Rossi').

Gli attributi comuni, global attributes

Lo standard HTML prevede un insieme di attributi che possono essere applicati a tutti i tag. Possiamo suddividere questi attributi in due principali sottogruppi:

• attributi di base (core);
• attributi per la gestione eventi.

Attributi Core

Sono attributi che la rappresentazione grafica degli elementi ed alcuni aspetti dell'interfaccia utente. Eccone alcuni di quelli più legati al testo:

Attributo	Descrizione
title	Informazione che aiuta a descrivere il contenuto dell'elemento. Il testo viene spesso rappresentato in un tooltip che viene mostrato al passaggio del mouse.
lang	Indica la lingua del contenuto. Es. <p lang="it">ciao</p>

Eccone altri che consentono la selezione e l'applicazione di regole di stile per la rappresentazione grafica:

Attributo	Descrizione
id	Serve ad associare un identificatore univoco ad un elemento. Una volta assengato un identificatore, non si dovrà assegnarlo a nessun altro elemento della pagina.
class	Serve a stabilire che l'elemento appartiene ad una serie di "classi". torneremo sull'argomento, per ora ci basti sapere che possiamo applicare a tutti gli elementi di una classe proprietà simili. Possiamo inserire quante classi vogliamo, tutte separate da uno spazio. Es. <p class="saluto testo-chiaro">ciao</p>, ha due classi: "saluto" e "testo-chiaro".
style	Serve ad assegnare delle proprietà grafiche (Stili CSS) all'elemento, questo tipo di assegnamento degli stili viene detto stilizzazione "inline". Anche di questo parleremo in seguito
draggable	Può assumere i valori true o false e serve a stabilire se un elemento sia trascinabile per una operazione di drag-n-drop.

Attributi come id, class e style sono tra i più utilizzati

Attributi per la gestione degli eventi

Sono attributi che servono per associare determinati comportamenti dell'interfaccia utente in seguito allo scatenarsi di eventi. I comportamenti sono rappresentati da funzioni JavaScript, come in questo esempio:

<a href="#" onclick="alert('ciao');">clicca qui</a>

Nella pratica spesso si preferisce evitare di associare un comportamento direttamente all'interno di un tag, ma non è escluso si possano utilizzare.

Attributo	Descrizione
onclick	Rileva il click (o il tap) effettuato sull'elemento
onload	Associa un comportamento alla conclusione del caricamento dell'elemento
onscroll	Attiva un comportamento correlato allo scrolling della pagina
ondrag	Si attiva quando iniziamo a trascinare un elemento che abbiamo indicato come draggable="true"

Possiamo trovare un elenco completo dei global attributes sul sito del W3C.

Gli attributi data- (data-attributes)

Lo standard HTML5 ha introdotto i cosiddetti "data-attributes", ovvero degli attributi inseriti nei tag allo scopo di ritenere alcune informazioni utili alla gestione del layout o a supporto dell'interfaccia utente.

In pratica possiamo definire un attributo con il prefisso data-, seguito dal nome (es. data-cognome) e assegnare ad esso un valore proprio come facciamo con gli altri attributi.

Mettiamo ad esempio di avere un'agenda e di voler mostrare l'indirizzo e il numero di telefono quando passiamo vicino ai nomi in un elenco. Possiamo associare tutte le informazioni che ci servono ad ogni elemento lista (<li>) grazie agli attributi "data-" e raggiungerli poi facilmente via JavaScript.

<ul id="elenco">
<li data-indirizzo="Piazza la lenza" data-telefono="3863535555">Luca</li>
<li data-indirizzo="Via le mani dal naso" data-telefono="3164192342">Paolo</li>
<li data-indirizzo="Largo la loggia" data-telefono="3213344314">Umberto</li>
</ul>

L'inserimento di questi attributi personalizzati non avrà alcun effetto sulla resa della pagina. Il browser si limiterà ad ignorarli.