Tag e attributi

 L' HTML (acronimo di hypertext markup language) è un linguaggio di markup, ovvero un linguaggio che consente di evidenziare un contenuto attraverso un etichetta, definita "tag", e dare a questo contenuto un significato semantico. Questi tag, con i loro attributi costituiscono il fulcro della struttura di una pagina web, il suo scheletro. È come se, letteralmente, il linguaggio di markup evidenziasse un componente per "classificarlo" in quanto tale. "Questo è un titolo! Questo è un paragrafo!" E così via.

Immaginiamo, quindi, questi tag e i loro attributi come un insieme di strumenti che permettono di modellare il nostro documento.  

Ad esempio, vi sono elementi che consentono di inserire immagini in html, così come video o link, ed elementi che permettono di inserire titoli, paragrafi e molto altro ancora.  

Vi sono ancora altri elementi che non hanno una rappresentazione tangibile, ma il cui unico scopo è quello di dare un valore semantico ad una parte del documento in cui vengono inseriti. Questi ultimi sono noti come tag semantici, ma li vedremo in seguito.

Struttura di un tag

Andiamo, ora, nel dettaglio dei tag HTML e analizziamo le parti che li compongono. Un elemento HTML è composto normalmente da due tag: il tag di apertura e il tag di chiusura.  
 

<h1> Hello World! </h1>

Struttura di un elemento HTML 

Il tag di apertura è composto dal nome dell’elemento (nell’esempio qui sopra si tratta di un titolo) racchiuso tra le parentesi angolari (“<” e “>”). 

Il tag di chiusura ha la stessa struttura di quello di apertura, con la differenza che il nome dell’elemento è preceduto da uno slash “/”.  

Quando parliamo di elemento html ci riferiamo al connubio tag - contenuto. L'elemento è, quindi, costituito dal tag - di apertura e di chiusura - che abbraccia, descrive, definisce il contenuto, e dal contenuto stesso.

Non tutti gli elementi, però, seguono il modello sopracitato: alcuni sono costituti da un singolo tag che viene generalmente utilizzato per inserire/incorporare qualcosa all’interno del documento HTML (ad esempio, il tag <img> che consente di inserire immagini in html). Questi tag, noti come tag autoconclusivi, non abbracciano un contenuto, ma presentano nei loro attributi elementi che sono informazione (come l’attributo src per il tag <img>). 

Attributi in HTML

Come appena menzionato, ogni tag può avere degli attributi. Questi attributi rappresentano delle meta-informazioni del tag, e definiscono i valori o le proprietà che i browser utilizzano per l’elaborazione del documento. Ad esempio, il tag <a> (anchor) permette di inserire un link all’interno del documento. Dunque, il tag <a> identifica un link. Ma questo link, a cosa sta puntando? A definirlo è l’attributo “href”, che contiene, nel concreto, il riferimento ipertestuale, cioè un link esterno a cui l’utente sarà indirizzato.

L’attributo “rel” identifica la relazione tra il documento corrente (quello contenente il link) e il documento di destinazione (quello inserito nell’href).  
Ma attenzione! L'attributo "rel" non è proprio esclusivamente del tag <a>; potrebbe essere un valido alleato anche del tag <link>, ad esempio.

Una  casistica interessante è quella del "nofollow" come valore dell'attributo "rel".
Parliamo di un qualcosa di estremamente utile e potente, poichè se, ad esempio, un utente dovesse inserire dei link non graditi sul tuo sito, grazie a questo simpatico amico potrai istruire il robottino del motore di ricerca che scansionerà la tua pagina ad ignorare quel link! Incredibile, eh?
 

<a href="" rel="">Link</a>

Tag anchor 

Come è possibile vedere nell’esempio qui sopra, gli attributi sono coppie chiave-valore separate dal carattere = (uguale) seguito dal valore assegnatogli racchiuso tra virgolette. 

Molti degli attributi in HTML5 sono noti come attributi globali, vale a dire che sono disponibili per tutti gli elementi. Tuttavia, la maggior parte degli elementi possiede uno specifico set di attributi, disponibili solo per loro.