I principali tag dell’HTML

Abbiamo visto che l’HTML è il linguaggio di formattazione delle pagine web. Esso utilizza un insieme di codici di formattazione, denominati tags. Oggi ci occupero di capire cosa sono e quali sono i principali tag utilizzati in un documeto HTML insieme alla sua struttura.

I tag, se inseriti all’interno di un file di testo determinano la formattazione di una pagina web quando questa è visualizzata su un browser. La struttura base o lo “scheletro invisibile”, ma fondamentale, di qualunque pagina HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Come si può vedere da queste semplice righe di codice, si intuisce subito che i tag sono racchiusi tra i segni minore < e maggiore > dette anche parentesi angolate o uncinate: aperta < o chiusa >. Ogni parola chiave ha un suo tag di apertura (<>) e un suo tag di chiusura (</>), salvo alcune eccezioni che vedremo per far capire meglio il concetto.

Analizziamo i tag nel dettaglio:

<!DOCTYPE html>. E` una dichiarazione, mediante la quale indichiamo al browser che andrà ad eseguire una pagina in formato html.
<html>. E` l’elemento che racchiude l’intera pagina, conosciuto anche come “nodo radice”.
<head>. Contiene tutta una serie di riferimenti ed informazioni necessarie alla gestione della pagina (collegamenti ai fogli di stile CSS, metatag, ecc.)
<body>. E` il “corpo” della pagina, che andrà a racchiudere tutti i tag e i relativi contenuti rappresentati dal browser.

Titolo o heading

Per identificare un titolo all’interno di una pagina si usa un tag al quale viene associato anche un numero a seconda dell’importanza di tale titolo: <h1> è quello fondamentale, che si usa normalmente per definire il titolo della pagina e/o del sito. A seguire potremo usare gli <h2>, <h3> fino ad <h6> a seconda dell’importanza del titolo all’interno del contesto dei contenuti (attenzione, a seconda dell’importanza e non della “consequenzialità” degli stessi). Ad ognuno di questi seguirà il corrispetivo tag di chiusura che sarà visualizzato come </h1>, </h2>, </h3>, … , </h6>.

<h1>Titolo 1</h1>

<h2>Titolo 2</h2>

<h3>Titolo 3</h3>

<h4>Titolo 4/h4>

<h5>Titolo 5</h5>

<h6>Titolo 6</h6>

Titolo 1

Titolo 2

Titolo 3

Titolo 4

Titolo 5

Titolo 6

Paragrafo, grassetto, corsivo, sottolineato

Il testo semplice è invece il paragrafo che può essere scritto utilizzando due tag: <p> e <span>. La differenza tra i due risiede nel fatto che <p></p> occupa un’intera riga e quindi i browser aggiungono automaticamente uno spazio bianco (un margine) prima e dopo un paragrafo, mentre il tag <span></span> è un elemento in linea e si può continuare ad aggiungere altri tag <span> sulla stessa linea senza che si crei alcuna interruzione.

Per dare maggiore risalto al testo si possono utilizzare alcuni accorgimenti come il grassetto che viene identificato con <b></b> e con <strong></strong>. Anche per quanto riguarda il corsivo abbiamo due possibilità o utilizzare <i></i> da italic o utilizzare <em></em> ovvero testo enfatizzato. Per quanto riguarda la sottilineatura si utilizza il <u></u> dall’inglese underline. I tag <b>, <strong>, <i>, <em>, <u> e i rispettivi tag di chiusura sono a loro volta contenuti o all’interno di <p>…</p> o all’interno di <span> … </span> e mai viceversa.

<p>Ciao Mondo!</p>

<span>Ciao Mondo!</span>

<b>Ciao Mondo!</b>
<strong>Ciao Mondo!</strong>

<i>Ciao Mondo!</i>
<em>Ciao Mondo!</em>

<u>Ciao Mondo!</u>

Ciao Mondo!

Ciao Mondo!

Ciao Mondo!

Ciao Mondo!

Se utilizziamo più tag contemporaneamente questi vanno chiusi nell’ordine inverso in cui sono stati aperti. Se apriamo nell’ordine <p> <b> <i> dovremmo chiudere prima </i> poi </b> e poi infine </p>.

<p><b><i>Ciao Mondo!</i></b></p>

Ciao Mondo!

Link

Il motivo principale per cui l’HTML viene definito un linguaggio di marcatura ipertestuale (da cui il suo acronimo) si concretizza nel fatto che è possibile, grazie al tag <a …> … </a> , impostare dei collegamenti verso altre pagine, detti appunto collegamenti ipertestuali o anche semplicemente link. Per poter ‘funzionare’ però ha bisogno di un attributo fondamentale che è href: è, infatti, quest’ultimo a dare la funzionalità di link al tag <a>

<a href="http://www.antoniocostadev.it">Clicca qui</a>

Clicca qui

Le immagini e tag senza chiusura

Abbiamo detto che alcuni tag non presentano chiusura ovvero hanno solo la parte <> senza quella </>. Uno di questi è rappresentato da break che corrisponde al tasto Invio se usato su Microsoft World o altro software di scrittura di testo: esso viene rappresentato così <br>. Uno dei tag senza chiusura più importanti è img che serve per inserire immagini all’interno di un documento HTML. Da solo però <img> non restituisce nulla, ma ha bigono anche dell’attributo src che definisce il percorso (o che sia sul nostro disposito o si trovi in internet, nulla cambia) dove si trova l’immagine che vogliamo inserire all’interno del nostro documento:

Altri tag

In questo articolo abbiamo visto quali sono i principali tag che si usano nell’HTLM. Vederli tutti è quasi impossibile visto l’approfondimento che ognuno di essi richiederebbe per essere spiegato correttamente. Per continuare a scorpire il vasto mondo dell’HTML vi invito a consultare la pagina del World Wide Web Consortium o W3C che spiega man mano i vari tag e le varie tipologie di uso: w3schools.com.