Guide galattiche per aspiranti programmatori

Lezione 0 / 30

Tag e attributi html

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.   

 

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.