Guida HTML - Separare il Layout dal Contenuto

L’HTML è nato come un linguaggio per formattare i documenti presenti sul Web, per questo il contenuto (ad esempio <p>Questo è il contenuto</p>) e i tag di formattazione del testo (ad esempio <font color=”blue”> che indica un testo colorato di blu) si trovano sullo stesso piano.

Dopo vari anni, però, si è avuta la necessità di separare il Layout della pagina dal contenuto.

Facciamo un esempio per capire meglio:

<p>
   <font color=green>
      <i>Ciao a tutti</i>
   </font>
</p>

Questo codice stampa “Ciao a tutti” in verde e in corsivo. Adesso se il Webmaster ha necessità di scrivere “Ciao a tutti” in rosso e in grassetto dovrebbe fare:

<p>
   <font color=red>
      <b>Ciao a tutti</b>
   </font>
</p>

Pensate se questo lavoro si doveva fare su una pagina di 200-300 righe e pensate che si doveva fare su oltre 50 pagine! Sarebbe diventata una modifica impossibile, o quantomeno molto dispendiosa in termini di tempo.
Proprio per questo è nata la necessità di separare il contenuto (la scritta “Ciao a tutti”) dalla formattazione (il colore e il grassetto). Per fare questo ci sono i CSS, ma la loro descrizione va oltre gli scopi di questa guida.
Solo per una breve accenno, usando i Fogli di Stile, il codice di poco prima diventerebbe qualcosa del genere:

<p class=”formattazione”>
   Ciao a tutti
</p>

E’ bene ricordare, inoltre, che alcuni elementi sono stati dichiarati Deprecati dal W3C, cioè destinati a non essere più utilizzati. Tra questi, ad esempio, c’è anche il tag <font>.

Per questo è buona norma che una volta imparato l’HTML si impari anche ad usare i CSS.