HTML/Evoluzione del markup

Le specifiche HTML più recenti, quelle della versione 4.01, furono rilasciate dal W3C il 24 dicembre 1999.
Da quel momento il linguaggio di markup per la progettazione delle pagine web si è notevolmente evoluto, tanto da rendere obsolete alcune funzionalità dell'HTML. In questo modulo verrà fornita una breve panoramica dell'evoluzione dei linguaggio per la creazione di pagine web, che si basano comunque sull'HTML.

XHTML

Per approfondire, vedi XML.

La parola XHTML è l'acronimo per Extensible HyperText Markup Language ed è una fusione tra i nomi di due linguaggi, l'HTML e l'XML.

L'idea dell'XHTML è quella di rimappare le regole dell'HTML secondo le regole dell'XML; il vantaggio è quello di ottenere documenti XML per il web e leggibili da tutti i browser che possono quindi usufruire di particolari funzionalità di XML (come l'uso degli XSLT) e di creare documenti ben strutturati (questo ha anche lo scopo, ad esempio, di una migliore lettura della pagina da parte del DOM JavaScript).

Dall'HTML all'XHTML

Il primo passo per impostare il documento con XHTML consiste nell'intestazione XML:

<?xml version="1.0" encoding="UTF-8" ?>

Successivamente dobbiamo fare uso di DocType specifici; come per l'HTML, esistono tre possibilità:

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

L'elemento radice del documento deve essere, in base alla grammatica, l'elemento html associato obbligatoriamente ad un attributo particolare:

<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>

Dentro all'elemento HTML devono essere obbligatoriamente presenti l'intestazione (tag <head>) e la sezione body della pagina, e non altro.

Ecco di seguito alcune delle principali regole da rispettare per la composizione della pagina XHTML:

XHTML è case-sensitive (sensibile alle maiuscole) e i nomi dei tag e degli attributi vanno scritti quindi tutti minuscoli
il valore degli attributo deve essere sempre posto tra virgolette
i valori degli attributi vanno sempre esplicitati
i tag vanno sempre chiusi (ad esempio non va bene <input type="checkbox" checked >, che va sostituito con <input type="checkbox" checked="checked" />

Tag vuoti ed XHTML

Per definizione, alcuni tag non possono contenere nemmeno marcare porzioni di testo: non hanno quindi il tag di chiusura e pertanto sono detti tag vuoti.

I seguenti sono alcuni esempi di tag vuoti:

<img src = 'images/fiore.png'>
<hr>
<p>Questo è un paragrafo<br>che continua sulla riga seguente</p>

Sempre per motivi di compatibilità verso l'XML, che non ammette tag vuoti e privi dell'informazione di fine-tag, è buona norma terminare ogni tag vuoto inserendo una barra prima del simbolo > terminale.
Per garantire la piena compatibilità con i browser attuali (che nella maggioranza dei casi supportano intrinsecamente l'HTML e non l'XML), nella codifica XHTML la barra finale dev'essere preceduta da uno spazio.
In XHTML, i precedenti esempi di tag vuoti si scriveranno quindi:

<img src = 'images/fiore.png' />
<hr />
<p>Questo è un paragrafo<br />che continua sulla riga seguente</p>

CSS

Per approfondire, vedi Linguaggio CSS.

Un linguaggio che ha reso obsoleto gran parte dei tag di formattazione HTML è stato il CSS, acronimo di Cascading Style Sheet (fogli di stile a cascata).

L'idea che sta alla base di questo linguaggio è la separazione concettuale e pratica del contenuto della pagina dalla sua struttura (X)HTML. Il CSS permette infatti di definire per ogni elemento o gruppo di elementi della pagina determinati stili, ad esempio la formattazione del testo grassetto o sottolineato. Facendo un piccolo esempio, quello che con HTML puro sarebbe:

<b>testo grassetto</b>

potrebbe diventare

<span style="font-weight:bolder;">testo grassetto</span>

Proprio a seguito della nascita dei fogli di stile il W3C ha deprecato (cioè indicato come obsoleti) molti tag HTML (anche font, ad esempio) in favore del CSS, che è più potente e più flessibile.