In una pagina HTML tutti gli elementi sono identificati da tag (letteralmente “etichette”).
I tag sono dei marcatori che ne evidenziano l'identità del contenuto.
Un tag è una keyword del linguaggio racchiusa tra parentesi angolari <>,
Si tratta di Keyword "case-sensitive", ciò significa che scrivere <head> o <HEAD> è esattamente la stessa cosa.
Le pagine HTML sono quindi formate per composizione di contenitori annidati, l’uno dentro l’altro, e formano una struttura ad albero. Questo tipo di struttura viene chiamato DOM, "il DOM" (Document Object Model) di una pagina HTML.
Spesso per sottolineare l’annidamento di un elemento in un altro si usa “indentare il codice”, ovvero discostare il contenuto dall’inizio della riga lasciando spazi (o tab). In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab.
I tag HTML possono essere corredati di uno o più attributi, che servono per meglio specificare la funzione o la tipologia dell’elemento
<tag attributo1="valore1" attributo2="valore2"> <input type="email" name="email" placeholder="Scrivi il tuo indirizzo email...">
Il valore di un attributo lo si assegna con il simbolo "=" (uguale);
Il valore deve essere scritto tra virgolette "", ma è possibile anche utilizzare gli apici '';
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')
Lo standard HTML prevede un insieme di attributi che possono essere applicati a tutti i tag. Possiamo suddividere questi attributi in due principali sottogruppi:
| 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> |
| 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
Sono attributi che servono per associare determinati comportamenti/azioni dell’interfaccia utente (a schermo) in seguito a d'una azione.
<a href="link" onclick="alert('Hai cliccato!');">Clicca qui</a>
| 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" |