Titoli,paragrafi,blocchi di testo e contenitori

Nulla ci vieta di scrivere direttamente all’interno del tag body, come già abbiamo visto negli esempi precedenti, senza utilizzare nessun tag.

A dire la verità è però più pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo. La nostra pagina risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere la formattazione che desideriamo.

Come abbiamo detto dall’inzio, i tag sono infatti dei marcatori che ci permettono di mantenere ordine nella pagina e ottenere il layout che desideriamo.

I principali tag-contenitori da utilizzare per "racchiudere" il testo sono:

Nome tag

Visualizzazione codice

Descrizione

<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 2

titolo 3

titolo 4

titolo 5
titolo 6

"H" sta per "heading", cioè titolo: le grandezze previste sono sei. Dall’<h1>, che è il più importante, si va via via degradando fino all’ <h6>.

Il tag <hx> (sia esso h1 o h6) risulta formattato in grassetto e lascia una riga vuota prima e dopo di sé. Si tratta dunque di un elemento di blocco (cfr. lezioni precedenti).

<p>paragrafo </p>

Esempio:

<p>paragrafo 1</p>

<p>paragrafo 2</p>

paragrafo 1

paragrafo 2

Il paragrafo è 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.

<div>Blocco di testo</div>

Esempio:

<div>blocco 1</div>

<div>blocco 2</div>
blocco 1
blocco 2

Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura.

<span>contenitore</span>

Esempio:

<span>contenitore 1</span>

<span>contenitore 2</span>

<span>contenitore 3</span>

contenitore 1contenitore 2contenitore 3

Lo span è un contenitore generico che può essere annidato (ad esempio) all’interno dei DIV.

Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.

Avrete modo di utilizzare lo <SPAN> soprattutto quando incomincerete ad usare i fogli di stile.


Le differenze tra <P>, <DIV> e <SPAN> sono quindi che:

  • <P> lascia spazio prima e dopo la propria chiusura
  • <DIV> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo
  • <SPAN> -essendo un elemento inline - non va a capo

Un esempio dovrebbe chiarire il tutto.

Per quel che riguarda il tag heading (<h1>, …, </h6>) è da notare che la grandezza del carattere varia a seconda delle impostazioni che l’utente ha sul proprio computer.

Con Internet Explorer, ad esempio, basta andare in: Visualizza > Carattere

Per vedere il titolo crescere o decrescere.

Allineare il testo

Tutti i "tag-contenitori" che abbiamo appena visto (e molti altri tag di quelli che vedremo) permettono di allineare il testo utilizzando semplicemente l’attributo align.

Se avete seguito finora la presente guida, avrete anche indovinato che l’attributo "align" è disapprovato dal W3C, dal momento che per allineare il testo bisognerebbe invece utilizzare i fogli di stile.

In ogni caso, vediamo come potremmo ad esempio allineare il testo di un paragrafo:

Allineamento

Sintassi

Visualizzazione codice HTML

Testo allineato a sinistra

<p align="left">testo</p>

<p align="left">Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>

Testo allineato a destra

<p align="right">testo</p>

<p align="right">Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>

Testo giustificato

<p align="justify">testo</p>

<p align="justify">Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</p>


Andare a capo

Per andare a capo molti webmaster utilizzando l’apertura arbitraria di paragrafi che non contengono nulla e che vengono lasciati aperti. Ad esempio:

<p>
<p>
<p>

Si tratta in buona sostanza di un errore, visto che per andare a capo esiste il tag <br> ("break", cioè "interruzione").

Per andare a capo è quindi sufficiente scrivere un <br>. Per saltare una riga ne occorrono due:

<br><br>

Un altro valido tag per dividere la pagina in parti è il tag <hr>("horizontal rule"), che serve per tracciare una linea orizzontale. Ecco il tag in azione:

Questo tag ha anche alcuni attributi (deprecati, perché la formattazione andrebbe fatta con i CSS):

L’attributo "noshade" evita di sfumare la linea, "size" indica l’altezza in pixel, "width" è la larghezza in pixel o in percentuale, "align" l’allineamento. Con Internet Explorer si riesce persino a impostare il colore:

<hr noshade size="5" width="50%" align="center"

 

Scegliere lo stile(grassetto,corsivo &C.)

Nella grafica cartacea con "stile di un testo" si intende la variante del "tondo", del "corsivo", o del "grassetto" di un carattere tipografico.

Nel parlare di stili del testo in HTML solitamente si suddividono i tag in grado di attribuire lo stile al testo in stili fisici e stili logici:

  • vengono definiti come fisici quei tag che definiscono graficamente lo stile del carattere, indipendentemente dalla funzione del contenuto del tag
  • vengono definiti come logici quei tag che forniscono anche informazioni sul ruolo svolto dal contenuto del tag, e in base a questo adottano uno stile grafico

Gli stili fisici

I principali stili fisici sono:

Codice HTML

Visualizzazione

Descrizione

<b>testo in grassetto</b>

Esempio:

Questo <b>testo</b> è in grassetto

Questo testo è in grassetto

Formatta il testo in grassetto.

<i>testo in corsivo</i>

Esempio:

Questo <i>testo</i> è in corsivo

Questo testo è in corsivo

Formatta il testo in corsivo. Tuttavia bisogna evitare di evidenziare in corsivo dei blocchi di lunghezza considerevole, perché la leggibilità del corsivo nel web lascia a desiderare.

Meglio limitarsi a poche parole.

<pre>testo preformattato</pre>

Esempio:

<pre>

PHP_FUNCTION
{
   zval **parameters;
   zval *value;
   char* str;

</pre>

 
PHP_FUNCTION

{

   zval **parameters;

   zval *value;

   char* str;

Il motore di rendering del browser restituisce il testo così come è stato inserito nel file html dall’autore stesso (preformattato quindi), senza riformattarlo.

È un tag che si usa soprattutto nella rappresentazione di codice di programmazione.

<u>testo sottolineato</u>

Questo testo è sottolineato

Esempio:

Questo <u>testo</u> è sottolineato

Questo testo è sottolineato

Sottolinea il testo presente nel tag.

Nel web le sottolineature del testo sono da evitare, per non confondere il lettore con i link.

<strike>testo barrato</strike>

Esempio:

Questo <strike>testo</strike> è barrato

Questo testo è barrato

Con il testo barrato, vengono indicate (ad esempio) le correzioni.

<sup>testo in apice</sup>

Esempio:

E=mc<sup>2</sup>

E=mc2

"Superscript": indica al browser di portare il testo al di sopra della linea di scrittura. Utile per formule matematiche (ad esempio le potenze)

<sub>testo in pedice</sub>

Esempio:

H<sub>2</sub>O

H2O

"Subscript": indica al browser di portare il testo al di sotto della linea di scrittura (utile ad esempio per i simboli chimici)

Di fatto i tag <b> e <i> sono molto utilizzati, perché consentono di cambiare lo stile del testo al volo.

Gli stili logici

Come abbiamo visto gli stili logici forniscono anche informazioni sul contenuto e la loro formattazione è spesso lasciata al browser con risultati a volte deludenti. Proprio per questo gli stili logici sono entrati in disuso e sono poco usati.

Riportiamo di eseguito i principali stili logici, per completezza, ma non sarà necessario ricordarseli.

Codice HTML

Visualizzazione

Descrizione

<abbr>abbreviazione</<abbr>

Esempio:

<abbr>C/A</abbr> HTML.it

C/A HTML.it

Indica un abbreviazione. Nessun rendering del testo particolare.

<acronym>acronimo</acronym>

Esempio:

<acronym>HTML</acronym>

HTML

Indica un acronimo. Nessun rendering del testo particolare.

<address>indirizzo</address>

Esempio:

<address>HTML.it - via dei Castani 183/185 – 00172 Roma</address>
HTML.it - via dei Castani 183/185 - 00172 Roma

Serve per indicare gli indirizzi: siano essi e-mail, o indirizzi fisici. Il testo viene visualizzato in corsivo.

<blockquote>blocco di citazione</blockquote>

Esempio:

<blockquote> Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita </blockquote>
Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

Sono blocchi di citazione.

Il testo viene rientrato verso destra.

<cite>citazione</cite>

Esempio:

<cite>Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita</cite>

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

Per citazioni brevi: il testo è visualizzato in corsivo.

<code>codice</code>

Esempio:

<code>if (document.all) alert (&quot;ciao&quot;);</code>

if (document.all) alert ("ciao");

Indica un blocco di codice in linguaggio di programmazione. Nessun rendering del testo particolare.

<dfn>definizione</dfn>

Esempio:

<dfn>L’HTML è un linguaggio di contrassegno</dfn>

L'HTML è un linguaggio di contrassegno

Indica una definizione: il testo è visualizzato in corsivo.

<em>enfasi</em>

Esempio:

Ti ho detto <em>questo!</em>

Ti ho detto questo!

Serve per porre l’enfasi su un’espressione: il testo è visualizzato in corsivo.

<kbd>keyboard</kbd>

Esempio:

<kbd>digitazione da tastiera</kbd>

digitazione da tastiera

Indica una digitazione da tastiera: il testo viene visualizzato a spaziatura fissa.

<q>citazione all’interno della frase</q>

Esempio:

Come diceva Don Abbondio: <q>&quot;Il coraggio, uno non se lo può dare&quot;</q>.

Come diceva Don Abbondio: "Il coraggio, uno non se lo può dare"

Indica una citazione breve all’interno del testo. Nessun rendering del testo particolare.

<samp>esempio</samp>

Esempio:

<samp>ecco un esempio di &quot;samp&quot;</samp>.

ecco un esempio di "samp"

Indica un esempio. Il testo viene visualizzato a spaziatura fissa.

<strong>rafforzamento</strong>


Esempio:

Ecco un <strong>testo rafforzato</strong>

Ecco un testo rafforzato

Evidenzia una parola. Il testo viene reso in grassetto

<var>variabile</var>

Esempio:

Inseriamo i dati nella variabile temporanea <var>temp</var> …

Inseriamo i dati nella variabile temporanea temp ...

La variabile viene visualizzata in corsivo.


Approfondimenti

Come si può vedere molti tag (logici e fisici) tradiscono l’origine scientifica e informatica del Web (sono presenti tag per blocchi di codice di programmazione, per definizioni, per l’indicazione delle variabili…).

Sorprendentemente nessuno dei tag fisici o logici è stato dichiarato "deprecato" dal W3C, ma anzi tutti questi tag sono passati dall’HTML 3.2 originario fino all’XHTML (passando illesi attraverso l’HTML 4).

Per quel che riguarda i tag fisici: a rigor di logica lo stile "grassetto" dovrebbe essere ottenuto con i fogli di stile (così come tutte le formattazioni), ma evidentemente la possibilità di ottenere un testo in grassetto semplicemente scrivendo "<b>testo</b>" è troppo comoda per poter essere considerata obsoleta.

Per quel che riguarda i tag logici: in realtà questo tipo di tag offrono un ulteriore aiuto al webmaster anche in un approccio a fogli di stile. Se infatti si ha l’accortezza di ridefinire i tag all’interno della definizione degli stili, si hanno molte occasioni di utilizzare una formattazione mirate a seconda della funzione del contenuto: in quest’ottica, il fatto che alcuni tag logici non restituiscano nessun rendering particolare è addirittura un invito a ri-definire lo stile del tag.