Html: i tag di uso frequente

Tag contenitori

Il sezionamento di una pagina web avviene attraverso dei tag che possiamo definire tag contenitori. Questi tag sono in assoluto i più usati quando scriviamo una pagina web.

Nulla vieta di scrivere direttamente all’interno del tag body il testo di ciò che vogliamo appaia a schermo.

Risulta più pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo.

La nostra pagina html risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere un effetto grafico più gradevole e rispondente alle diverse esigenze.

Vediamo i principali tag-contenitori da utilizzare per formattare il testo.

Titoli

Esistono 6 differenti livelli di titolo che si ottengono utilizzando i seguenti tag:

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

La “h” sta per “heading“, cioè titolo e ogni livello indica una grandezza diversa.

Dall'<h1>, che è il più importante, si va via via degradando fino all'<h6> che rappresenta il titolo con grandezza minore.

Gli heading, così come altri tag contenitori, appartengono alla famiglia degli elementi di blocco. Tali elementi sono così chiamati perché una volta definiti creano un blocco attorno a sé, di conseguenza vanno a capo e risultano distanziati dagli elementi che li circondano.

Vediamo il codice html dei titoli:

<h1>Titolo di 1° livello</h1>
<h2>Titolo di 2° livello</h2>
<h3>Titolo di 3° livello</h3>
<h4>Titolo di 4° livello</h4>
<h5>Titolo di 5° livello</h5>
<h6>Titolo di 6° livello</h6>

Paragrafi

I browser non riconoscono da soli la formattazione del testo, bensì è necessario indicargliela tramite appositi tag html. In caso contrario il browser si limiterà a visualizzare a video i caratteri uno dietro all’altro senza alcuna regola.

Il paragrafo rappresenta l’unità di base entro cui suddividere un testo. Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. La sintassi è la seguente:

<p>Questo è un paragrafo in html</p>

Il tag </p> di chiusura può essere omesso ma è buona norma abituarsi ad inserirlo sempre, soprattutto nel caso in cui siano necessari più paragrafi in successione.

Vediamo ora il codice HTML di due paragrafi in successione:

<p>Questo è il primo paragrafo... </p>
<p>Questo è il secondo paragrafo... </p>

Che produce:

Questo è il primo paragrafo...

Questo è il secondo paragrafo...

Il tag <p> possiede inoltre un importante attributo presente nella maggior parte degli elementi di blocco che prende il nome di align. Questo attributo permette di allineare il testo a destra (right). In alternativa il testo potrà essere allineato a sinistra (left), al centro (center) oppure giustificato (justify).

Quindi per allineare il testo scriveremo le seguenti stringhe di codice HTML:

<p>Paragrafo normale</p>
<p align="left">Paragrafo allineato a sinistra</p>
<p align="right">Paragrafo allineato a destra</p>
<p align="center">Paragrafo centrato</p>

Che producono:

Paragrafo normale

Paragrafo allineato a sinistra

Paragrafo allineato a destra

Paragrafo centrato

Andare a capo

Per andare a capo all'interno dello stesso paragrafo digitare il seguente codice HTML:

<br>

Per esempio il codice HTML:

La guardia del soldato:<br>Sempre in solitudine.<br>Scrutare l'orizzonte.

Produce il seguente risultato:

La guardia del soldato:
Sempre in solitudine.
Scrutare l'orizzonte.

Se il codice HTML <br> viene inserito in una riga vuota si ottiene di andare a capo lasciando vuota la riga.

Quindi per esempio se si vogliono ottenere due righe vuote digitare il codice HTML:

<br>
<br>

Quindi se si vogliono ottenere tre righe vuote digitare il codice HTML:

<br>
<br>
<br>

Il div e lo span

Il tag <div> definisce un blocco di testo che va a capo ma, a differenza del paragrafo, non lascia spazi prima e dopo la sua apertura.

Il DIV grazie alla sua enorme versatilità viene definito nel linguaggio HTML come l’elemento di tipo blocco per eccellenza. E’ utilizzato più che per contenere semplice testo soprattutto per la suddivisione strutturale delle pagine html.

La sintassi del DIV è la seguente:

<pre style="background:#000;color:#f8f8f8"; overflow-y: scroll; border:1px solid black;><div>Questo è un testo all’interno di un blocco div.</div>

Lo <span> invece è un contenitore generico che può essere annidato ad esempio all’interno dei <div>.

A differenza dei tag <p> e <div> si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.

Lo <span> è un elemento molto utilizzato soprattutto insieme ai fogli di stile (CSS), ad esempio per definire delle aree di testo particolari come quelle per segnalare errori o informazioni all’utente.

Se non viene associato ad uno stile la sua presenza risulta nulla e dipendente esclusivamente dallo stile del tag che lo contiene.

Vediamo per esempio il seguente codice HTML che usa il <div> con uno <span> nidificato all'interno:

<div>
Questo testo è all’interno di un blocco.<br/>
E’ possibile inserire immagini, link o altri oggetti all’interno di un div.<br/>
Inoltre un div può contenere uno span che a sua volta contiene ad esempio una parola o una frase.<br/>
<span>Questo testo è in uno span.</span>
</div>