14. Escollir el doctype correcte per als documents HTML
Roger Johansson. 8 de juliol del 2008. Darrera modificació: 18 de setembre de 2013 (equip docent del grau de Multimèdia de la UOC). Publicat a: doctype, dtd, html, validació, navegadors
L'apartat anterior analitzava l'anatomia de la secció head d'un document HTML i explicava breument els diferents elements que hi pot haver a la capçalera i la seva funció. En aquest apartat estudiaré l'element doctype en molt més detall: què fa, com ajuda a validar l'HTML, com escollir un doctype per al document i la declaració XML, que no necessitareu quasi mai però amb la qual topareu algunes vegades.
Els continguts d'aquest apartat són els següents:
- 14.1. En primer lloc, el
doctype - 14.2. Canvis de
doctypei modes de representacio - 14.3. Validació
- 14.4. Escollir un
doctype - 14.5. La declaració XML
- Resum
- Preguntes de repàs
- Lectures complementàries
14.1. En primer lloc, el doctype
El primer que heu de comprovar que hi hagi en qualsevol document HTML que creeu és una declaració DTD. Si no heu sentit mai a parlar de la declaració DTD, no us preocupeu. Per a facilitar les coses, normalment es coneix com a "doctype", que és el nom que faré servir en aquest apartat.
És molt possible que us estigueu preguntant què és una "DTD" o doctype. DTD són les sigles de "Document Type Definition" (definició del tipus de document), que, entre altres coses, defineix els elements i els atributs que es poden utilitzar en una versió concreta de l'HTML. Sí, no és cap error, actualment s'utilitzen en el web diferents versions de l'HTML, però això no us ha de preocupar gens ni mica, ja que només us haureu d'interessar per una.
El doctype s'utilitza per a dues coses en diferents tipus de programaris:
Els navegadors web l'utilitzen per determinar el mode de representació que han de fer servir (més endavant ja parlarem dels modes de representació).
Els validadors d'etiquetatge miren el
doctypeper determinar les normes amb les quals han de comprovar el document (més endavant també en parlarem, d'això).
Les dues us afectaran, però de maneres diferents que ja explicarem més endavant en aquest mateix apartat.
Aquí en teniu un exemple:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">És possible que no hi trobeu cap sentit, per la qual cosa ara explicaré d'una manera simplificada la seva construcció. Per a una explicació en molt més detall de què significa cadascun dels caràcters, vegeu l'article !DOCTYPE.
Les parts més importants de doctype són les dues cadenes delimitades per cometes. "-//W3C//DTD HTML 4.01//EN" indica que aquest és un document DTD publicat pel W3C, que la DTD descriu la versió 4.01 de l'HTML i que l'idioma utilitzat a la DTD és l'anglès.
La segona cadena, "http://www.w3.org/TR/html4/strict.dtd", és una URL que indica el document DTD utilitzat per a aquest doctype.
Tot i que un doctype pot tenir un aspecte una mica estrany, les especificacions HTML i XHTML l'exigeixen. Si no n'incloeu cap, apareixerà un error de validació quan comproveu la sintaxi del vostre document amb el validador d'etiquetatge del W3C o altres eines que comprovin els documents HTML per si contenen errors. Alguns navegadors fins i tot contenen aquesta funció per defecte, mentre que altres poden incloure-la si s'instal·la una extensió.
En qualsevol cas, si utilitzem el doctype d'HTML5, que és el que hem vist fins ara en tots els exemples, la cosa queda molt simplificada, donat que aquest és el més simple possible:
<!DOCTYPE html>14.2. Canvis de doctype i modes de representacio
Si no proporcioneu cap doctype, els navegadors seguiran gestionant i mostrant el document de totes maneres; han d'intentar mostrar tota mena de coses estranyes que es poden trobar al web, per la qual cosa no poden ser gaire primmirats. No obstant això, sense un doctype els resultats no sempre seran els esperats a causa d'una cosa coneguda com a "doctype sniffing" o "doctype switching".
La majoria de navegadors del segle XXI miren el doctype de tots els documents HTML que troben i el fan servir per a decidir si l'autor dels documents ha tingut cura d'escriure adequadament l'HTML i el CSS segons els estàndards del web.
Si troben un doctype que indica que el document està ben codificat, utilitzen un mode conegut com a "mode d'estàndards" per a maquetar la pàgina. En el mode d'estàndards, els navegadors intenten normalment mostrar la pàgina segons les especificacions del CSS; es refien que la persona que ha creat el document sabia què estava fent.
Per altra banda, si troben un doctype antiquat o incomplet utilitzen el "mode Quirks", que és més compatible amb les pràctiques i els navegadors antics. El mode Quirks pressuposa que el document és antic o que no s'ha creat tenint en compte els estàndards del web; la pàgina web se seguirà mostrant, però es necessitarà més potència de processament per a fer-ho i és molt probable que el resultat sigui una cosa estranya gens semblant al que s'esperava.
Les diferències estan bàsicament relacionades amb la manera de mostrar el CSS i només en uns pocs casos amb la manera de tractar l'HTML en si. Com a dissenyador o desenvolupador de webs, obtindreu els millors resultats si comproveu que tots els navegadors utilitzin el seu mode de representació d'estàndards, i és per això que hauríeu de cenyir-vos als estàndards del web i utilitzar un doctype adequat.
14.3. Validació
Tal com ja he comentat, els validadors també utilitzen el doctype; ja ho comentarem en més detall més endavant en aquesta sèrie d'apartats. De moment, tot el que heu de saber és que s'utilitza un validador per a comprovar que la sintaxi dels vostres documents HTML sigui correcta i que no contingui cap error. Els programes validadors miren el doctype utilitzat per determinar les normes que s'han d'utilitzar. És una cosa similar a indicar a un corrector ortogràfic l'idioma amb què està escrit un document. Si no ho sap, no sabrà quines normes ortogràfiques i de gramàtica ha d'utilitzar.
14.4. Escollir un doctype
Així, doncs, ara que ja sabeu que cal introduir un doctype i per a què es fa servir, com podeu saber quin cal utilitzar? De fet, no n'hi ha un, sinó que n'hi ha molts. Fins i tot en podeu crear un de propi, sempre i quan tingueu el nivell de coneixements necessari per fer-ho. Aquí, però, no parlaré de molts doctypes diferents. Faré les coses fàcils i només en mencionaré tres.
Si el vostre document és HTML5, feu servir el ja vist:
<!DOCTYPE html>Si per algun motiu el vostre document s'ha de fer servir en navegadors incompatibles amb HTML5 (en general això passarà perquè hi ha una base important d'usuaris que fan servir encara versions antigues d'IE), feu servir el següent, per indicar que feu servir HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">Si el vostre document és XHTML 1.0, feu servir el següent:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">Notes
- El motiu pel qual els
doctyped'HTML 4.01 i XHTML 1.0 necessitaven especificar una DTD i HTML5 no és que els dos primers estàndards es basaven en SGML, i HTML5. La significació de SGML va més enllà dels objectius d'aquest curs. - L'XHTML "real" s'ha de comunicar al navegador com a XML, però els detalls sobre com i quan fer-ho, i les implicacions que té, queden fora de l'abast d'aquest apartat en concret.
Aquests doctypes garantiran que els navegadors utilitzin el seu mode d'estàndards a l'hora de treballar amb el vostre document. L'efecte més evident que tindrà sobre el vostre treball és que obtindreu uns resultats més uniformes a l'hora de dissenyar el document amb CSS.
14.5. La declaració XML
Nota
Aquesta secció només és rellevant si heu de fer servir HTML 4.01 o XHTML 1.0.
Ja he dit abans que el doctype ha de ser la primera cosa que hi hagi dins dels vostres documents HTML. Doncs bé, això és en realitat una versió simplificada de la veritat. També cal tenir en compte la declaració XML. És possible que en alguns documents XHTML hàgiu vist un fragment de codi amb un aspecte similar al següent abans del doctype:
<?xml version="1.0" encoding="UTF-8"?>Això es coneix com a Declaració XML, i quan és present cal que estigui inserida abans del doctype.
La versió 6 d'Internet Explorer té un problema amb aquesta declaració: fa que passi al mode Quirks i, tal com ja he explicat anteriorment, no és gaire probable que vulgueu que això passi.
Per sort, la declaració XML no és necessària si no és que envieu els vostres documents XHTML com a XML als navegadors (vegeu la nota sobre l'XHTML) i utilitzeu una codificació de caràcters diferent d'UTF-8 i el vostre servidor no envia un encapçalament HTTP que determina la codificació de caràcters.
Les probabilitats que passin totes aquestes coses alhora són molt petites, per la qual cosa la manera més senzilla de solucionar el problema d'Internet Explorer és senzillament ometre la declaració XML. Però no us oblideu del doctype!
Resum
Cal incloure sempre un dels doctypes mencionats com a primer element dins de tots els vostres documents HTML. Això garantirà que els validadors coneguin la versió de l'HTML que utilitzeu i així podran informar correctament de qualsevol error que hàgiu comès. També garantirà que tots els navegadors més nous utilitzaran el seu mode d'estàndards, amb la qual cosa obtindreu uns resultats més uniformes quan dissenyeu el document amb el CSS.
Preguntes de repàs
Després de llegir aquest apartat hauríeu de poder respondre les següents preguntes:
Quins són els dos objectius principals d'incloure un
doctypeen els documents HTML?Quins són els avantatges d'utilitzar un
doctypeestricte en lloc d'un de transicional?Per què és problemàtica la declaració XML?
Un
doctypeque no he esmentat en aquest apartat és el de definició de marcs; intenteu descobrir què fa i per què no s'ha d'utilitzar.
