- Blog
- Che cos'è un tag in HTML e quali sono i...
Che cos'è un tag in HTML e quali sono i tag più importanti?
Mi piacePer quanto la programmazione e i suoi vari framework front-end si siano evoluti negli ultimi anni, essi si basano tutti sulla stessa tecnologia: il rinomato linguaggio a markup HTML.
HTML è quindi acronimo per HyperText Markup Language, un linguaggio a "markup", un insieme di regole strutturate e ben definite che i motori dei browser portano in vita in quelle infinite pagine web che tutti noi, come ora io, utilizziamo quotidianamente.
E' infatti di regole e strutture che andiamo a parlare di seguito, i <tag> sono sicuramente il primo concetto dell'HTML e sono di per sè tutto ciò su cui si basa il linguaggio.
I tag, limitati e definiti, sono semplicemente un preciso blocco strutturato della nostra pagina che trasformano del testo al suo interno secondo le logiche e regole applicate ad ognuno di essi. Ogni volta che dobbiamo creare una pagina HTML dobbiamo rispettare la prima regola e con essa il primo fondamentale <tag> : <HTML>.
Vediamo prima due nozioni di sintassi del linguaggio:
1) I tag possono essere scritti sia in minuscolo (lower-case) che in maiuscolo (upper-case) poichè l'HTML è un linguaggio case-insensitive.
2) Un tag va sempre aperto e chiuso, l'apertura ( <tag-aperto> ) definisce l'inizio del blocco e la chiusura ( </tag-chiuso> ) la sua fine, ogni elemento (tag) aperto e chiuso al suo interno definirà ulteriori formattazioni.
Aperto e chiuso al suo interno? Ebbene si, poichè la struttura del linguaggio HTML è un albero.
Quando si parla di strutture ad albero c'è sempre un nodo che viene definito root, esso è semplicemente il punto d'inizio della struttura ed ora possiamo finalmente dire che nell'HTML esso è il tag, per questo introdotto come fondamentale, <html>.
Ma facciamo un esempio pratico per riepilogare ciò che è stato detto finora:
<!DOCTYPE HTML>
<html>
<head> <title> Il titolo della mia pagina </title> </head>
<body>
<h1> Il titolo del mio articolo </h1> <p> Testo del primo paragrafo </p>
</body>
</html>
(Per comodità d'esempio ho messo più tag in linea ma ricordatevi che non è una best practice) Vediamo insieme, tralasciando oggi la prima riga, lo script appena esposto:
Come già detto, la prima regola è definire il root node <html> dove al suo interno andremo a definire ogni altro elemento. Abbiamo poi bisogno di altri due tag fondamentali, che sono la testa ed il corpo della nostra pagina:
Nel tag <head> andiamo a definire tutti i metadati, informazioni utili al browser, ai crawler dei motori di ricerca e altro. Come da esempio il tag interno <title> definirà ciò che vedremo nella scheda del browser (nell'immagine il titolo Wikipedia, dopo il loro logo)
Nel tag <body> invece andiamo a definire il vero e proprio contenuto di tutto ciò che mostrerà la nostra pagina web. Nell'esempio ho inserito il tag <h1>, che formatta il testo al suo interno secondo le regole attribuite all' heading n.1, ovvero il titolo di primo livello, che solitamente comportano un testo più grande e in grassetto; nei tag HTML ne troviamo 6. Notiamo poi il tag <p> che comportà un semplice paragrafo di testo.
Tra i tag più comuni per la formattazione del testo troviamo <b>testo in grassetto</b> oppure <i>testo in corsivo</i>.
Vi lascio con un ultimo esempio, spesso e volentieri ci troviamo nella situazione di costruire una lista di elementi, come un elenco puntato, magari dei nostri film preferiti:
...<html>
<h1> I miei film preferiti </h1>
<ol>
<li> Il signore degli anelli </li>
<li> Batman </li>
<li> Inception </li>
</ol>
...</html>
Nell'esempio troviamo il nuovo tag <ol> (ordered list), una lista ordinata; Al suo interno, per ogni elemento che vogliamo definire inseriamo un tag di tipo <li>, cioè (list item) oggetto della lista.
Tantissimi sono i tag utili oggi e vi consigli assolutamente di provarne direttamente una gran parte!
Enjoy!
