Un document XHTML , per ser vàlid, ha de tenir una estructura mínima que ha de contenir una sèrie de parts que es tractaran en aquest mòdul.
A l'exemple següent podeu veure la que seria l'estructura mínima d'un document XHTML vàlid:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Títol del document</title> </head> <body> <!-- inici del contingut del document --> <!-- final del contingut del document --> </body> </html>
Aquesta estructura és la que servirà com a base per fer les pràctiques del curs, i, per tant, a mida que aneu fent les diferents pràctiques l'anireu ampliant.
Obriu l'editor amb el que hàgiu decidit treballar i creeu un document nou, que servirà de base a les pràctiques del curs, i on anireu afegint les diferents parts de la estructura mínima que s'expliquen a continuació.
A la primera línia d'un document XHTML ha d'aparèixer sempre la declaració del tipus de document, dins de l'etiqueta <!DOCTYPE>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
És un requisit obligatori. Sense aquesta declaració un document XHTML no és vàlid, ja que el navegador o dispositiu desconeixerà quines són les regles que l'han d'ajudar a interpretar-lo correctament.
Un document XHTML ha de tenir sempre un element arrel. Aquest element arrel s'obre amb l'etiqueta <html> i es tanca amb </html> posant-la sempre al final del tot del document. Fixeu-vos en la plantilla de l'inici: immediatament després de la declaració del tipus de document s'obre l'element arrel amb la etiqueta <html>, que ha de contenir els atributs que fan referència a l'espai de noms i a l'idioma.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
L'atribut que fa referència a l'espai de noms de l'XHTML (xml namespace), informa al navegador del que significa cada etiqueta i atribut del llenguatge XHTML. El segon atribut correspon a l'idioma. No especificar l'idioma del contingut del document va en detriment de l'accessiblitat i d'una correcta interpretació dels continguts.
Imagineu que redacteu un document en català, però no heu especificat l'idioma. Un cercador podria confondre la paraula anglesa home amb la paraula home en català, que s'escriuen igual, però tenen significats completament diferents. Aquesta confusió semàntica es pot evitar fàcilment declarant l'idioma principal del document.
D'altra banda, els lectors de pantalles, que fan servir les persones amb discapacitats visuals, pronunciaran el contingut del document segons la declaració de l'idioma principal. Si aquest idioma no està declarat es poden produir situacions no desitjades quan el lector de pantalles pronunciï les paraules en anglès d'un text que està redactat en català.
Es pot donar la situació, però, que en un text apareguin paraules en un idioma diferent al principal. Veieu el següent exemple:
<p>llegirem a <em>Shakespeare</em> aquest trimestre</p>
Assegurar-se que un lector de pantalles pronunciarà correctament el nom del famós dramaturg, poeta i actor és tan senzill com afegir l'atribut xml:lang="..." a l'etiqueta que obre el terme:
<p>llegirem a <em xml:lang="en">Shakespeare</em> aquest trimestre</p>
La capçalera d'un document XHTML s'obre amb l'etiqueta <head> i es tanca amb </head>. Entre aquestes dues etiquetes se situa tota una sèrie d'informació relativa al document: tipus de contingut, títol, metadades, enllaços, referències,...
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Títol del document</title> </head>
L'únic element, però, que ha d'aparèixer obligatòriament a la capçalera és el títol del document, que s'obre amb l'etiqueta <title> i es tanca amb </title>. Més avall es parla amb més detall del títol del document.
També és requerit, encara que no imprescindible, la declaració del tipus de contingut i el joc de caràcters, que veureu a continuació.
El tipus d'arxiu i el conjunt de caràcters del document XHTML és requerit, però no obligatori, a la capçalera del document. Si no es declara el tipus de contingut, el document XHTML no serà completament vàlid. L'informe de validació advertirà de la absència de declaració de la codificació de caràcters del document.
Per tal que el document sigui vàlid caldrà afegir la línia següent després de l'etiqueta que obre la capçalera:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
El valor -text/html- correspon al tipus MIME de l'arxiu i és necessari per a que el navegador interpreti i pocessi correctament l'arxiu com a document web.
El segon valor està relacionat amb la internacionalització del contingut del document, és a dir, la representació correcta de l'alfabet, símbols i puntuació específica de la totalitat dels idiomes del món. El W3C recomana la codificació UTF-8 com a joc de caràcters per a documents web per diverses raons, com poden ser el fet de que suporta un gran nombre de caràcters de diferents idiomes, i per ser compatible entre diferents continguts
Un exemple vàlid seria la Viquipèdia, on conviuen continguts de diferents idiomes i tots es visualitzen correctament.
L'ús del UTF-8 no es limita a col·locar aquest valor a la capçalera del document web, com es veurà més endavant. L'eina amb la que desenvolupeu els documents web ha de permetre la codificació a UTF-8. En cas contrari, apareixerà l'error: el document serà declarat com a UTF-8 però codificat com a ISO-8859-1, que és un altre joc de caràcters que només conté aquells utilitzats en la majoria d'idiomes llatins. Podeu ampliar la informació a l'article UTF-8 vale la pena [es].
El títol del document s'obre amb l'etiqueta <title> i es tanca amb l'etiqueta </title>.
El títol que li poseu al document és el que apareixerà a la part superior de la finestra de navegador. També apareix a la pestanya del navegador on es troba obert el document (en el cas dels navegadors que suporten pestanyes), i és el valor que identifica la web al llistat quan es desa com a marcador (bookmark).
El cos inclou el contingut visible del document XHTML al navegador. S'inicia amb l'etiqueta <body> i es tanca amb l'etiqueta </body>.
Qualsevol element, caràcter, ... del contingut que no es trobi entre les dues etiquetes <body>...</body>, invalidarà el document.