Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Da HTML a XHTML in tre passi

Trasformare le vecchie pagine HTML in XHTML si può. Ecco una breve ricetta per capire ed effettuare il passaggio nel modo più opportuno
Trasformare le vecchie pagine HTML in XHTML si può. Ecco una breve ricetta per capire ed effettuare il passaggio nel modo più opportuno
Link copiato negli appunti

Molti webmaster sanno che XHTML è il successore del linguaggio HTML. Esso non è altro che la ridefinizione di HTML in termini di XML, cioè è stata formulata una grammatica basata su XML per definire la sintassi del nuovo HTML.

Molti lo sanno, ma pochi usano veramente XHTML per realizzare le proprie pagine Web. I motivi possono essere tanti, ma credo che ai primi posti ci sia la riluttanza a metter le mani su siti Web già realizzati e funzionanti e l'abitudine all'utilizzo di editor ed altri strumenti visuali che continuano a sfornare codice non aderente alle specifiche di XHTML.

La classica domanda è: perchè XHTML invece del classico HTML? I motivi sono diversi: aderire allo standard XHTML consente di ottenere una maggiore compatibilità con i diversi browser e con i diversi user agent che navigano sul Web.

Ormai un sito web non è fatto soltanto per i classici browser per PC, ma esistono diversi altri dispositivi che accedono al Web: telefonini, PDA, lettori braille, sintetizzatori vocali.

Senza dimenticare gli spider dei motori di ricerca, il cui lavoro è sicuramente semplificato dall'uso di un codice che segue una sintassi basata su XML.

Sintetizzando, il fattore principale è quindi l'elaborabilità delle pagine Web, da cui dipende anche, per certi versi, l'accessibilità. In questo articolo descriviamo i tre passi fondamentali per trasformare il codice HTML del proprio sito web nel corrispondente codice XHTML.

Passo 1: quale XHTML?

Il primo passo da compiere nel convertire il codice HTML in XHTML consiste nello stabilire quale livello di "strictness" si vuole ottenere. Il livello di strictness indica il livello di separazione tra struttura e presentazione di un documento Web e deve essere specificato tramite un'apposita dichiarazione DOCTYPE da porre all'inizio del documento, prima del tag <html>.

XHTML prevede tre livelli di strictness: in base al livello di strictness scelto dipenderà il lavoro da eseguire in seguito.

XHTML Strict

Questo livello da maggiore risalto alla struttura di un documento rispetto alla sua presentazione. Diversi elementi ed attributi del vecchio HTML non sono supportati, come non è supportato l'uso dei frame.

L'idea è che XHTML si deve occupare della struttura del documento Web, mentre la sua presentazione deve essere affidata ai fogli di stile CSS. La dichiarazione da specificare per i documenti che utilizzano questo livello di XHTML è:

Listato 1. Definizione di un documento XHTML Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

XHTML Transitional

I documenti che utilizzano questo tipo di XHTML ammettono l'utilizzo dei tag e degli attributi di presentazione non supportati dalla versione Strict. Non sono però ammessi i frame. La relativa dichiarazione è:

Listato 2. Definizione di un documento XHTML Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

XHTML Frameset

Adottando questo tipo di XHTML è possibile utilizzare, oltre a tutti i tag previsti da XHTML Transitional, i tag per la definizione dei frame. In questo caso occorre specificare questa dichiarazione:

Listato 3. Definizione di un documento XHTML con frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">

Passo 2: cambio sintassi

Una volta stabilito il livello di strictness delle pagine Web, possiamo modificare la sintassi delle pagine HTML in modo da applicare le regole della sintassi XML. Da un punto di vista tecnico questo passaggio consente di ottenere un documento XML ben formato. Le modifiche da applicare sono abbastanza semplici e possono essere riassunte nelle seguenti regole:

  1. Convertire tutti i tag ed i relativi attributi in minuscolo. La sintassi di XHTML prevede che tutti i tag siano scritti in minuscolo, quindi un elemento del tipo <BODY></BODY> andrà trasformato in <body></body>
  2. Chiudere tutti i tag. Mentre il linguaggio HTML era abbastanza tollerante per certe sviste del webmaster (forse un po' troppo!), XHTML è molto rigoroso. Tutti i tag devono avere un tag di chiusura. Non può esistere, ad esempio, un <p> isolato all'interno di una pagina. Se esiste un <p> deve esistere il corrispondente </p>.Nel caso di tag vuoti, cioè di tag che non prevedono un contenuto al loro interno, si può scegliere tra l'uso del tag di chiusura o l'uso della cosiddetta sintassi minimizzata. Ad esempio, se abbiamo il tag <br>, possiamo trasformarlo in <br></br> oppure in <br/>. Le due espressioni sono del tutto equivalenti. In altri termini, la seconda espressione non è altro che un'abbreviazione della prima.
  3. Racchiudere i valori degli attributi tra apici. I valori degli attributi devono necessariamente essere racchiusi tra apici singoli o doppi. Un tag del tipo <img src=immagine.jpg />; dovrà diventare <img src="immagine.jpg" />.

Passo 3: tag, attributi e formattazione

Il terzo ed ultimo passo consiste nel rendere il risultato precedente aderente alla specifica sintassi XHTML. Il lavoro da fare in questo passaggio dipende dal livello di strictness scelto al primo passo.

In altre parole, in base al livello di strictness desiderato, dobbiamo eliminare o sostituire i tag e gli attributi non previsti dalla relativa sintassi XHTML. Nella maggior parte dei casi si tratta di tag e attributi che hanno a che fare con la formattazione. Ma andiamo per ordine.

Se abbiamo scelto di utilizzare l'XHTML Frameset, molto probabilmente non abbiamo bisogno di fare nient'altro. Infatti, come abbiamo detto prima, questo livello di strictness del linguaggio XHTML prevede tutti i tag di presentazione previsti dalle specifiche di HTML 4.01, compresi i frame. Quindi, se non abbiamo usato tag proprietari o non più supportati da HTML 4.01, il codice che abbiamo ottenuto dal passo 2 è già codice XHTML Frameset.

Se invece abbiamo optato per l'XHTML Transitional dobbiamo verificare che il nostro sito non faccia uso dei frame. Nel qual caso occorre eliminarli, sostituendoli con una adeguata struttura delle pagine. È possibile usare soluzioni alternative ai frame, come ad esempio le inclusioni dinamiche con tecnologie server side, come ad esempio gli #include di ASP.

Infine, se la nostra scelta è stata XHTML Strict, con molta probabilità il lavoro si fa leggermente più complesso. Infatti in questo caso dobbiamo rimuovere, oltre agli eventuali frame, tutti gli elementi e gli attributi che hanno a che fare con la presentazione del documento. Ad esempio, non possiamo utilizzare il tag <font> o il tag <center>, non possiamo utilizzare l'attributo color o l'attributo name (al suo posto dobbiamo utilizzare id). Siamo invece obbligati ad utilizzare l'attributo alt per le immagini. Un suggerimento pratico, in questo caso, è di utilizzare gli strumenti di validazione del codice XHTML, come ad esempio quello messo a disposizione dal W3C: http://validator.w3.org.

Ma se eliminiamo gli elementi che regolano la formattazione delle pagine abbiamo un impoverimento grafico delle stesse! Come facciamo a mantenere l'aspetto originario della pagina HTML quando passiamo ad XHTML? Niente paura! Ci pensano i CSS. Infatti, la stragrande maggioranza dei vecchi tag HTML di formattazione può (e deve) essere sostituita con l'uso di fogli di stile CSS. Tra l'altro questo garantisce una maggiore manutenibilità del codice delle pagine del sito.

Conclusioni

Come abbiamo visto in questo articolo, trasformare il codice HTML di un sito web nel corrispondente codice XHTML non è poi così complicato. Ci vuole un po' di pazienza, ma i vantaggi che si ottengono non sono, a mio avviso, trascurabili. Tra i vantaggi non escluderei il fatto di potersi fregiare del noto "bollino" del W3C, a garanzia della qualità del codice e della professionalità del suo autore...


Ti consigliamo anche