Separare il Layout dal Contenuto

In origine, HTML è stato creato come un linguaggio per formattare i documenti presenti sul Web. Per questo motivo, il contenuto (come ad esempio <p>il mio testo qui</p>) e i tag che definiscono lo stile o il colore del contenuto (come <font color=”red”>, che colora il testo di rosso) si trovavano mescolati sullo stesso livello.

Tuttavia, con il passare degli anni e l’evoluzione del Web, è emersa la necessità di separare il contenuto dalla sua presentazione.

Ad esempio, se avessi tutti i titoli del mio documento in rosso e in grassetto e volessi cambiare il colore in verde e renderli in corsivo, con l’HTML tradizionale (HTML 3.2), dovresti modificare manualmente ogni tag che definisce la formattazione.

Pertanto:

<p> <font color=”red”> <b>titolo 1</b> </font> </p>

diventerebbe:

<p> <font color=”green”> <i>titolo 1</i> </font> </p>

Ma se questa operazione non è complicata su una singola pagina, diventa impraticabile (o almeno molto difficile, tanto che sarebbe conveniente scrivere un programma per effettuare la conversione automaticamente) su siti web molto grandi, spesso con centinaia di pagine.

Ed è proprio per questo motivo che, come accennato in precedenza, è emersa la necessità di separare il contenuto (ad esempio, il testo “titolo 1”) dalla formattazione (come il colore rosso e il grassetto). Per farlo, è necessario utilizzare i fogli di stile, e il contenuto della pagina vista poco fa diventerebbe qualcosa di questo tipo:

<p class=”formattaTitoli”> titolo 1 </p>

La formattazione del testo sarebbe gestita dalla classe “formattaTitoli”, che sarebbe definita altrove nel documento o in un file separato. Quindi, per cambiare l’aspetto di centinaia di pagine, basta modificare la classe “formattaTitoli”.

È importante notare fin da subito che alcune delle cose che stiamo imparando possono essere gestite in modo più elegante, consentendo ai webmaster di gestire i propri siti in modo più efficiente. Alcuni degli elementi descritti in questa guida sono addirittura “deprecati” dal W3C, ovvero destinati a cadere in disuso (come il tag <font>). Man mano che li incontreremo (perché al momento attuale del Web è ancora importante conoscerli), vi informerò che ci sono alternative che possono essere utilizzate tramite fogli di stile.