14. Elegir el doctype correcto para los documentos HTML
Roger Johansson. 8 de julio del 2008. Última modificación: 25 de febrero de 2014 (equipo docente del grado de Multimedia). Publicado en: doctype, dtd, html, validación, navegadores
El apartado anterior analizábamos la anatomía de la sección head de un documento HTML y explicábamos brevemente los diferentes elementos que puede haber en la cabecera y su función. En este apartado estudiaremos el elemento doctype con mucho más detalle: qué hace, cómo ayuda a validar el HTML, cómo elegir un doctype para el documento y la declaración XML, que no necesitaréis casi nunca pero con la que os encontraréis algunas veces.
Los contenidos de este apartado son los siguientes:
- 14.1. En primer lugar, el
doctype - 14.2. Cambios de
doctypey modos de representación - 14.3. Validación
- 14.4. Elegir un
doctype - 14.5. La declaración XML
- Resumen
- Preguntas de repaso
- Lecturas complementarias
14.1. En primer lugar, el doctype
Lo primero que debéis comprobar que haya en cualquier documento HTML que creéis es una declaración DTD. Si no habéis oído nunca hablar de la declaración DTD, no os preocupéis. Para facilitar las cosas, normalmente se conoce como "doctype", que es el nombre que utilizaremos en este apartado.
Es muy posible que os estéis preguntando qué es una DTD o doctype. DTD son las siglas de document type definition (definición del tipo de documento), que, entre otras cosas, define los elementos y los atributos que se pueden utilizar en una versión concreta del HTML. Sí, no es ningún error, actualmente se utilizan en la Red diferentes versiones del HTML, pero esto no os debe preocupar en absoluto, ya que sólo os deberéis interesar por una.
El doctype se utiliza para dos cosas en diferentes tipos de software:
Los navegadores web lo utilizan para determinar el modo de representación que deben utilizar (más adelante ya hablaremos de los modos de representación).
Los validadores de etiquetado miran el
doctypepara determinar las normas con las que deben comprobar el documento (más adelante también hablaremos de ello).
Las dos os afectarán, pero de maneras diferentes que ya explicaremos más adelante en este mismo apartado.
Aquí tenéis un ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">Es posible que no le encontréis ningún sentido, por lo que ahora explicaremos de una manera simplificada su construcción. Para una explicación con mucho más detalle de qué significa cada uno de los caracteres, podéis ver el artículo !DOCTYPE.
Las partes más importantes de doctype son las dos cadenas delimitadas por comillas. "-//W3C//DTD HTML 4.01//EN" indica que éste es un documento DTD publicado por el W3C, que la DTD describe la versión 4.01 del HTML y que el idioma utilizado en la DTD es el inglés.
La segunda cadena, "http://www.w3.org/TR/html4/strict.dtd", es una URL que indica el documento DTD utilizado para este doctype.
Aunque un doctype puede tener un aspecto un tanto extraño, las especificaciones HTML y XHTML lo exigen. Si no incluís ninguno, aparecerá un error de validación cuando comprobéis la sintaxis de vuestro documento con el validador de etiquetado del W3C u otras herramientas que comprueben los documentos HTML por si contienen errores. Algunos navegadores incluso contienen esta función por defecto, mientras que otros pueden incluirla si se instala una extensión.
En cualquier caso, si usáis el doctype de HTML5, que es el que hemos visto hasta ahora en todos los ejemplos, la cosa queda muy simplificada, puesto que este es el más sencillo posible:
<!DOCTYPE html>14.2. Cambios de doctype y modos de representación
Si no proporcionáis ningún doctype, los navegadores seguirán gestionando y mostrando el documento de todos modos; deben intentar mostrar todo tipo de cosas extrañas que se pueden encontrar en la Red, por lo que no pueden ser muy quisquillosos. No obstante, sin un doctype los resultados no siempre serán los esperados a causa de una cosa conocida como "doctype sniffing" o "doctype switching".
La mayoría de los navegadores del siglo XXI miran el doctype de todos los documentos HTML que encuentran y lo utilizan para decidir si el autor de los documentos se ha preocupado de escribir adecuadamente el HTML y el CSS según los estándares de la Red.
Si encuentran un doctype que indica que el documento está bien codificado, utilizan un modo conocido como "modo de estándares" para maquetar la página. En el modo de estándares, los navegadores intentan normalmente mostrar la página según las especificaciones de CSS; se fían de que la persona que ha creado el documento sabía qué estaba haciendo.
Por otra parte, si encuentran un doctype anticuado o incompleto, utilizan el modo Quirks (peculiaridades), que es más compatible con las prácticas y los navegadores antiguos. El modo Quirks presupone que el documento es antiguo o que no se ha creado teniendo en cuenta los estándares de la web; la página web se seguirá mostrando, pero se necesitará más potencia de procesamiento para hacerlo y es muy probable que el resultado sea algo extraño, nada parecido a lo que se esperaba.
Las diferencias están básicamente relacionadas con la manera de mostrar el CSS y sólo en unos pocos casos con la manera de tratar el HTML en sí. Como diseñadores o desarrolladores de webs, obtendréis los mejores resultados asegurándoos de que todos los navegadores utilicen su modo de representación de estándares, y por ello deberíais ceñiros a los estándares de la web y utilizar un doctype adecuado.
14.3. Validación
Como ya hemos comentado, los validadores también utilizan el doctype; ya lo comentaremos con más detalle más adelante en esta serie de apartados. De momento, todo lo que debéis saber es que se utiliza un validador para comprobar que la sintaxis de vuestros documentos HTML sea correcta y que no contenga ningún error. Los programas validadores miran el doctype utilizado para determinar las normas que se deben utilizar. Es algo similar a indicar a un corrector ortográfico el idioma en el que está escrito un documento. Si no lo sabe, no sabrá qué normas ortográficas y de gramática debe utilizar.
14.4. Elegir un doctype
Así pues, ahora que ya sabéis que hay que introducir un doctype y para qué se utiliza, ¿cómo podéis saber cuál hay que utilizar? De hecho, no hay uno, sino que hay muchos. Incluso podéis crear uno propio, siempre y cuando tengáis el nivel de conocimientos necesario para hacerlo. Aquí, sin embargo, no hablaremos de muchos doctypes diferentes. Haremos las cosas fáciles y sólo mencionaremos tres.
Si vuestro documento es HTML5, utilizad el ya visto:
<!DOCTYPE html>Si por algún motivo vuestro documento debe utilizarse en navegadores incompatibles con HTML5 (en general esto pasará porque hay una base importante de usuarios que aún usan versiones antiguas de IE), utilizad el siguiente, para indicar que estáis usando HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">Si vuestro documento es XHTML 1.0, utilizad el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">Notas
- El motivo por el que los
doctypede HTML 4.01 y XHTML 1 necesitaban especificar una DTD y el HTML5 no es que los dos primeros se basaban en SGML y HTML5 no. El significado de SGML va más allá de los objetivos de este curso. - El XHTML "real" se debe comunicar al navegador como XML, pero los detalles sobre cómo y cuándo hacerlo, y las implicaciones que tiene, quedan fuera del alcance de este apartado en concreto.
Estos doctypes garantizarán que los navegadores utilicen su modo de estándares a la hora de trabajar con vuestro documento. El efecto más evidente que tendrá sobre vuestro trabajo es que obtendréis unos resultados más uniformes a la hora de diseñar el documento con CSS.
14.5. La declaración XML
Nota
Esta sección sólo es relevante si debéis usar HTML 4.01 o XHTML 1.0.
Ya hemos señalado antes que el doctype debe ser la primera cosa que haya dentro de vuestros documentos HTML. Pues bien, eso es en realidad una versión simplificada de la verdad. También hay que tener en cuenta la declaración XML.
Es posible que en algunos documentos XHTML hayáis visto un fragmento de código con un aspecto similar al siguiente antes del doctype:
<?xml version="1.0" encoding="UTF-8"?>Esto se conoce como declaración XML, y cuando está presente debe estar insertada antes del doctype.
La versión 6 de Internet Explorer tiene un problema con esta declaración: hace que pase al modo Quirks y, tal como ya hemos explicado anteriormente, no es muy probable que queráis que eso suceda.
Por suerte, la declaración XML no es necesaria si no es que enviáis vuestros documentos XHTML como XML a los navegadores (podéis ver la nota al margen sobre el XHTML) y utilizáis una codificación de caracteres diferente de UTF-8 y vuestro servidor no envía un encabezamiento HTTP que determina la codificación de caracteres.
Las probabilidades de que sucedan todas estas cosas al mismo tiempo son muy pequeñas, por lo que la manera más sencilla de solucionar el problema de Internet Explorer es sencillamente omitir la declaración XML. ¡Pero no os olvidéis del doctype!
Resumen
Hay que incluir siempre uno de los doctypes mencionados como primer elemento dentro de todos vuestros documentos HTML. Esto garantizará que los validadores sepan la versión del HTML que utilizáis y así podrán informar correctamente de cualquier error que hayáis cometido. También garantizará que todos los navegadores más nuevos utilizarán su modo de estándares, con lo que obtendréis unos resultados más uniformes cuando diseñéis el documento con el CSS.
Preguntas de repaso
Después de leer este apartado, deberíais poder responder a las siguientes preguntas:
Cuáles son los dos objetivos principales de incluir un doctype en los documentos HTML?
Cuáles son las ventajas de utilizar un
doctypeestricto en lugar de uno transicional?Por qué es problemática la declaración XML?
Un
doctypeque no hemos mencionado en este apartado es el de definición de marcos; intentad descubrir qué hace y por qué no se debe utilizar.
