Gli attributi

26 aprile 2016

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:

AttributoDescrizione
titleInformazione che aiuta a descrivere il contenuto dell’elemento. Il testo viene spesso rappresentato in un tooltip che viene mostrato al passaggio del mouse.
langIndica 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:

AttributoDescrizione
idServe ad associare un identificatore univoco ad un elemento. Una volta assengato un identificatore, non si dovrà assegnarlo a nessun altro elemento della pagina.
classServe 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”.
styleServe 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
draggablePuò 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.

AttributoDescrizione
onclickRileva il click (o il tap) effettuato sull’elemento
onloadAssocia un comportamento alla conclusione del caricamento dell’elemento
onscrollAttiva un comportamento correlato allo scrolling della pagina
ondragSi 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.

Tutte le lezioni

1 ... 6 7 8 ... 58

Se vuoi aggiornamenti su Gli attributi inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Gli attributi

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy