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.