Se ambisci a diventare uno sviluppatore front-end, un consiglio fondamentale che riceverai frequentemente è di padroneggiare l’HTML. L’Hypertext Markup Language, abbreviato come HTML, costituisce le fondamenta della maggior parte delle pagine web esistenti.
L’HTML è composto da vari elementi, quali tag, attributi e nodi. In questa sede, ci concentreremo sui tag HTML. Questi tag vengono impiegati per comunicare ai browser come organizzare i contenuti, che si tratti di intestazioni, titoli, paragrafi, immagini o altro ancora. In sostanza, i tag HTML sono come parole chiave che determinano come il browser deve presentare o formattare il contenuto.
I server leggono i tag HTML dall’alto verso il basso, seguendo un ordine sequenziale. Non vi sono limiti al numero di tag HTML che una pagina web può contenere.
- Ogni tag HTML è racchiuso tra i simboli < e >
- Ogni tag HTML svolge una funzione specifica e differente dagli altri
- La maggior parte dei tag HTML prevede un tag di apertura <tag> e un tag di chiusura </tag>
Distinzione tra tag HTML, elementi HTML e attributi HTML
Spesso, i termini “tag” ed “elemento” HTML vengono usati in modo intercambiabile, ma è corretto farlo? Tecnicamente, gli elementi HTML e i tag HTML sono concetti distinti.
I tag HTML definiscono gli elementi HTML. Per fare ciò, il contenuto viene inserito tra un tag di apertura e un tag di chiusura che corrisponde al contenuto con cui si sta lavorando.
Ecco un esempio di elemento HTML:
<p> Questo è un paragrafo </p>
<p> è un esempio di tag HTML.
Gli attributi HTML forniscono dettagli aggiuntivi sugli elementi HTML all’interno di un documento. Questi attributi si trovano all’interno dei tag HTML.
Ecco un esempio di attributo HTML:
<button id="SubmitOrder" class="btn">Ordina</button>
Tag HTML essenziali da conoscere
L’HTML, come linguaggio di markup, si è evoluto nel corso degli anni, a partire dalla sua introduzione nel 1993 da parte di Tim Berners-Lee. La prima versione di HTML conteneva 18 tag. Nuovi tag vengono aggiunti ad ogni nuova versione; l’aggiornamento più recente è stato HTML5 nel 2014.
Un confronto tra HTML e HTML5 rivela che quest’ultimo introduce tag semantici come <article>, <header> e <footer> che descrivono in modo esplicito il contenuto. Attualmente, esistono più di 100 tag HTML. Di seguito sono elencati alcuni dei tag più popolari e utili da conoscere:
<!DOCTYPE>
Il DOCTYPE non è tecnicamente un tag, bensì una dichiarazione che comunica al browser il tipo di file che verrà caricato. Questo tag specifica il tipo di HTML che il browser deve interpretare.
In HTML5, puoi dichiarare il tuo file come:
<!DOCTYPE html>
Oppure:
<!doctype html>
Nota: la dichiarazione non ha un tag di chiusura e non è sensibile alle maiuscole/minuscole.
<html> </html>
Il tag <html> … </html> segue il tag DOCTYPE. Questo tag definisce il documento come una pagina web; tutti gli altri elementi saranno contenuti al suo interno. Il tag HTML indica l’inizio e la fine di un documento HTML.
Un tag <html> è rappresentato come:
<html>Contenuto</html>
<head></head>
La sezione head di un documento HTML è rappresentata da un tag <head>. Questo tag è contenuto nel tag <html> e fornisce informazioni generali sulla pagina web.
Il tag <head> include altri tag che forniscono informazioni specifiche sulla pagina web, come il titolo e l’autore della pagina. Il contenuto di questo tag non viene visualizzato direttamente sulla pagina web.
La sintassi di un tag <head> è:
<head> ........ </head>
<title></title>
Il tag <title> definisce il titolo della pagina web. Questo tag è contenuto nel tag <head>. Il tag <title> appare sulla barra del titolo o nella scheda della finestra del browser, ma non sulla pagina web stessa.
La sintassi per il tag <title> è:
<title>Tag HTML per principianti</title>
All’interno di un tag <head>, apparirà come:
<head> <title>Tag HTML per principianti</title> </head>
<body> </body>
Il tag <body> contiene tutto il contenuto visibile di una pagina web. Immagini, link, testo, video e altro si trovano all’interno dei tag <body> e </body>.
Altri tag che si trovano all’interno del body includono il tag <p> per i paragrafi, il tag <a> per i link, il tag <strong> per il testo in grassetto e il tag <ol> per le liste ordinate, solo per citarne alcuni.
La sintassi per il tag <body> è:
<body> Contenuto </body>
Tag da <h1> a <h6>
In un documento HTML possono esserci fino a 6 tag di intestazione. Ogni tag è identificato da un numero che va da 1 a 6, come <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.
<h1> è il tag di intestazione più grande, mentre <h6> è il più piccolo.
In un documento HTML, i tag di intestazione possono essere rappresentati come segue:
<h1>Intestazione 1</h1> <h2>Intestazione 2</h2> <h3>Intestazione 3</h3> <h4>Intestazione 4</h4> <h5>Intestazione 5</h5> <h6>Intestazione 6</h6>
I tag da <h1> a <h6> sono contenuti all’interno del tag <body>.
Ad esempio, un tag <h1> sarà contenuto come:
<body> <h1> Questa è l'intestazione 1 </h1> </body>
<p></p>
Il tag <p>, o tag del paragrafo, viene utilizzato per strutturare il contenuto in paragrafi. Premere il tasto “Invio” in un documento HTML nel tuo editor di codice non crea un nuovo paragrafo.
Se desideri più di un paragrafo, devi utilizzare diversi tag <p> nel tuo documento. I tag di paragrafo devono essere contenuti all’interno del tag <body>.
La sintassi per un tag di paragrafo è:
<p> .... contenuto qui ....</p>
Se vuoi avere quattro paragrafi, il tuo codice sarà strutturato come:
<body>
<p>Contenuto per il primo paragrafo.</p>
<p>Contenuto per il secondo paragrafo.</p>
<p>Contenuto per il quarto paragrafo.</p>
</body>
<b> </b>
Il tag <b> </b>, o semplicemente tag in grassetto, formatta qualsiasi contenuto tra l’apertura <b> e la chiusura </b> in grassetto.
Il tag in grassetto può trovarsi all’interno di un’intestazione come <h1> o anche all’interno di un tag di paragrafo.
Ecco alcuni esempi di tag in grassetto:
<b> Tag in grassetto </b>
La frase ‘Tag in grassetto’ apparirà in grassetto.
<h1> Resta aggiornato, <b> Quinta edizione </b>, l'edizione dei vincitori </h1>
La quinta edizione sarà in grassetto.
<i> </i>
Il tag in corsivo, indicato con <i>, visualizza il testo all’interno dei tag in corsivo.
Ad esempio, se abbiamo:
<i> Queste sono le parole in corsivo </i>
Le parole “Queste sono le parole in corsivo” appariranno in corsivo.
<u> </u>
Il tag di sottolineatura, <u>, viene utilizzato quando si desidera sottolineare una parte specifica di testo in un documento HTML.
Ad esempio, se abbiamo:
<u> sottolinea queste parole </u>
La frase tra i tag sarà sottolineata.
<center> </center>
Il tag Center, <center>, viene utilizzato per centrare il contenuto in un documento HTML.
Ad esempio, se abbiamo un tag h2 scritto come:
Centrare il contenuto in HTML
, possiamo centrarlo come segue:
<center> <h2> Centrare il contenuto in HTML </h2> </center>
<span></span>
Il tag Span, <span>, è un contenitore inline generico che non ha uno stile predefinito. Puoi utilizzare il tag span per raggruppare i testi a cui vuoi applicare uno stile.
Puoi estendere i tag all’interno di altri tag come intestazioni e paragrafi:
<h2> Impara HTML <span> dagli esperti </span> e preparati per il mercato </h2>
<p> Impara HTML <span> dagli esperti </span> e preparati per il mercato </p>
<div></div>
Un tag di divisione, abbreviato in div, è un tag che consente di raggruppare diversi tag in un documento HTML.
A un tag div può essere assegnata una “classe” per aggiungere uno stile esterno utilizzando i CSS.
Ecco come viene rappresentato un div che racchiude un h1, h2 e un tag di paragrafo:
<div >
<h1> Impara HTML </h1>
<h2> Tag HTML </h2>
<p> HTML è un linguaggio di markup… </p>
</div>
<em></em>
Il tag di enfasi, o tag <em>, viene utilizzato per enfatizzare determinate parole in un documento HTML.
I contenuti tra i tag <em> appariranno obliqui o in corsivo.
Il contenuto enfatizzato all’interno di un paragrafo può apparire in un editor di codice come:
<p> La riunione inizierà alle <em> 0800 hrs </em>, si prega di essere puntuali </p>
<sup></sup>
Il tag <sup> o apice consente al testo racchiuso di essere posizionato sopra il resto. Un esempio perfetto è quando si vuole elevare al quadrato un numero X e rappresentarlo matematicamente come X2.
La sintassi per <sup> all’interno di un tag di paragrafo sarà:
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<sub></sub>
Il tag pedice o <sub> è l’opposto del tag apice. Il contenuto contenuto nel tag <sub> apparirà sotto la normale riga di testo. Un esempio perfetto è quando si scrive la formula chimica dell’acqua come H20.
La sintassi per il tag pedice sarà:
Ricorda che H <sub> 2 </sub> 0 è la formula chimica dell'acqua
<br>
<br> è un tag auto-chiudente che rappresenta un’interruzione di riga. Tutto il contenuto dopo <br> inizierà su una nuova riga.
La sintassi per <br> all’interno di un paragrafo sarà:
<p> HTML è l'abbreviazione di Hypertext Markup Language <br> C'è stato un dibattito in corso se sia o meno un linguaggio di programmazione <br> Tuttavia, non possiamo sottovalutare la sua importanza <br> HTML è stato utilizzato in più del 95% dei siti Web di oggi </p>
<ol></ol>
e <li> </li>
Il tag di lista ordinata o <ol> deve essere utilizzato con un altro tag come <li>.
I due possono apparire su un editor di codice come:
<ol>
<li> Asia </li>
<li> Africa </li>
<li> Europa </li>
</ol>
Quando visualizzato nel browser, i contenuti appariranno numerati.
Potresti voler aggiungere un’immagine per un impatto visivo o anche un logo. Il tag immagine auto-chiudente, <img src=””/>, è utile in questo caso.
La sintassi per il tag immagine sarà:
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
Il contenuto tra virgolette rappresenta l’URL di origine.
Conclusioni
Esistono oltre 100 tag HTML, ma quelli sopra sono quelli che dovresti conoscere come principiante. L’HTML è supportato nella maggior parte degli editor di codice e quindi hai la certezza che non sbaglierai mai quando inizi a imparare.