Cos’è un tag?
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 html
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.
Gli attributi, che sono specificati all’interno del tag stesso, sono elementi aggiuntivi che vengono utilizzati per fornire informazioni aggiuntive o specifiche al tag HTML. In altre parole, gli attributi forniscono istruzioni o dettagli su come l’elemento dovrebbe comportarsi o essere visualizzato: capisci bene come gli attributi siano una componente essenziale per arricchire la struttura e il comportamento delle pagine html. Non per ultimo, gli attributi possono variare, ovviamente, in base all’elemento html, ma, probabilmente, ti sarà tutto più chiaro fornendoti un esempio concreto!
Tag anchor, anchor link e a href
Come promesso, andiamo a specificare quanto detto sopra: l’esempio che riporteremo, è quello del tag anchor <a>, utilizzato per creare collegamenti ipertestuali. Il tag anchor funziona come un contenitore per definire i collegamenti cliccabili all’interno di una pagina web; può avvolgere del testo, un’immagine o qualsiasi altro elemento che si desidera rendere cliccabile: in breve, il tag anchor permette di inserire un anchor link all’interno del documento. Ma questo anchor 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.
Ricapitolando:
Un tag anchor abbraccia un qualsiasi elemento html che contenga un collegamento ipertestuale (anchor link). L’ anchor link, noto anche come collegamento interno, è, appunto, il collegamento ipertestuale che consente agli utenti di spostarsi all’interno di una pagina web verso una specifica sezione o posizione definita. Questo tipo di collegamento è possibile grazie all’utilizzo combinato del tag anchor e dell’attributo href.
Questo potente elemento consente agli sviluppatori web di indirizzare gli utenti verso altre pagine web, sezioni specifiche all’interno della stessa pagina o risorse esterne. L’attributo href svolge un ruolo cruciale nel definire il percorso di destinazione del collegamento, che può essere un URL completo, un identificatore all’interno del documento o un percorso relativo. Grazie alla flessibilità offerta dal tag anchor e dall’attributo href, è possibile creare un’esperienza di navigazione interattiva e coerente per gli utenti, consentendo loro di esplorare il contenuto web in modo intuitivo e rapido.
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 html a href e rel
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.