Arreglando tu página web con el DOCTYPE correcto

Autor Original: Jeffrey Zeldman
URL ORIGINAL: http://www.alistapart.com/articles/doctype/
TÍTULO ORIGINAL: A List Apart: Fixing Your Site With the Right DOCTYPE


LO HAS HECHO TODO BIEN, pero tu sitio web no tiene el aspecto deseado o funciona como debería hacerlo en los últimos navegadores.

Has escrito XHTML y CSS válidos. Has utilizado el Modelo de Objetos del Documento (DOM) estándar del W3C para manipular dinámicamente los elementos de la página. A pesar de todo, en navegadores diseñados para soportar todos estos estándares, tu sitio está fallando. Un DOCTYPE - tipo de documento - defectuoso tiene la culpa de ello.

Este pequeño artículo te proporcionará DOCTYPEs que funcionen, y explicará el efecto práctico, en el mundo real de estas etiquetas aparentemente abstractas.

¿PORQUÉ UN DOCTYPE?

Para los estándares HTML y XHTML, un DOCTYPE (abreviatura de “declaración de tipo de documento”) informa al validador de la versión de (X)HTML que estás utilizando, y debería aparecer al principio de cada página web. Los DOCTYPEs son un componente clave de las páginas veb de conformidad: tu marcado y tus CSS no validarán sin ellos.

Como fué mencionado en artículos previos de ALA (y en otros lugares interesantes), los DOCTYPES también son esenciales para la apropiada renderización y funcionamiento de los documentos web en navegadores de conformidad como Mozilla, IE5/Mac, y IE6/Win.

Un DOCTYPE reciente, que incluye una URI completa(una dirección web completa) les dice a estos navegadores que rendericen tu página en modo conforme con los estándares, tratando tus (X)HTML, CSS, y DOM como esperas que deben ser tratados.

Usando un DOCTYPE incompleto u obsoleto—o ningún DOCTYPE—colocará a los mismos navegadores en modo “Caprichoso”, bajo el que el navegador asume que has escrito a la vieja usanza, marcado inválido y código para las deprimentes normas de la industria de finales de los 1990.

Con esta configuración, el navegador va a intentar parsear tu página en modo compatible hacia atrás, renderizando tus CSS como deberían haber sido vistas en IE4, y revirtiendo a un DOM propietario, específico de los navegadores. (IE revierte al DOM IE; Mozilla y Netscape 6 revierten a vaya usted a saber.)

Claramente, esto no es lo que querías. Pero es frecuentemente lo que tienes, dada la preponderancia de información incompleta o incorrecta sobre el DOCTYPE que este artículo espera corregir.

(Nota: El navegador Opera no se rije por estas reglas; siempre trata de renderizar las páginas en modo conforme con los estándares. ¡Vamos, Opera! En el otro lado, Opera todavía no ofrece un soporte sólido para el DOM del W3C. Pero están trabajando en ello.)

¿DÓNDE HAN IDO A PARAR TODOS LOS DOCTYPES?

Partiendo de que los DOCTYPES son vitales para el apropiado funcionamiento de los estándares de la web en los navegadores, y dado que el W3C es el principal creador de los estándares de la web, podrías esperar que el sitio web del W3C proporcionase un listado de DOCTYPEs apropiados, y podrías esperar también ser capaza de encontrar esta información rápida y fácilmente en una localización única. Pero como que esto está escrito, que no puedes.

W3.org no es A List Apart, WebReference, o Webmonkey. Su intención no es ayudar a los diseñadores web, desarrolladores, y gente que trabaja con contenidos similares a avanzar más rápido en las últimas prácticas y recomendaciones tecnológicas. Ese no es su trabajo.

W3C publica una serie de tutoriales, que la mayoría de diseñadores web ignoran. Sin embargo, el sitio web del W3C aloja principalmente una colección de propuestas, borradores, y Recomendaciones, escritas por especialistas para especialistas. Y cuando digo especialistas, no quiero decir profesionales web ordinarios, como tú y como yo. Quiero decir especialistas que hacen que el resto de nosotros la Abuela el primer día que Ella Tuvo un Mail.™

Puedes buscar DOCTYPEs todo el día en w3.org sin encontrar una página que ofrezca un listado completo de todos ellos. Y cuando consigues cazar un DOCTYPE (generalmente en relación con una Recomendación o Borrador de Trabajo), frecuentemente se trata de uno que no funciona en tu sitio web.

Dispersos por el sitio web del W3C hay DOCTYPEs con URIs perdidas, y DOCTYPEs con URIs relativas que apuntan a documentos en el propio sitio web del W3C. Una vez que son desplazados del sitio del W3C y utilizados en tus propias páginas web, dichas URIs apuntan a documentos no existentes, haciendo por tanto que sean en vano tus mayores esfuerzos y que fallen los navegadores.

Por ejemplo, mucho sitios muestran estos DOCTYPEs, copiados y pegados directamente de w3.org:
 

Si te fijas en la última parte del DOCTYPE (“DTD/xhtml1-strict.dtd”), podrás ver que es un link relativo a un documento en el sitio del W3C. Partiendo de que este documento está en el sitio web del W3C pero no en el tuyo, la URI carece de utilidad para el navegador.

El DOCTYPE que te gustaría utilizar es:
Debes observar que este último DOCTYPE incluye una URI completa al final de la etiqueta. Y como la etiqueta proporciona una localización válida en la web, el navegador sabe dónde encontrarla, y renderizará tu documento en modo conforme con los estándares.

DOCTYPES QUE FUNCIONAN

Entonces, ¿qué DOCTYPEs deberíamos utilizar? Me alegro de que lo preguntes. Los siguientes DOCTYPEs completos son los únicos que necesitamos:

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

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

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

SIGUIENTES PASOS

¿Cómo puedes colaborar a la mejora del soporte de los estándares en la web? Además de agregar a favoriots esta página (y copiar y pegar estos DOCTYPEs para tu propio uso), si tu editor web inserta DOCTYPEs, deberías echarles un vistazo y compararlos con los listados arriba.

Demasiados fabricantes de software bien-intencionados han copiado y pegado DOCTYPEs incompletos del W3C en su software. Resultado: cuando usas la funcionalidad de estos programas de insertar DOCTYPEs en tus páginas, los navegadores se ponen en modo Caprichoso, deshaciendo todo tu laborioso trabajo.

Merece la pena contactar con la gente que hace tu paquete de autor favorito, mostrándoles los DOCTYPEs apropiados, y sugerirles cortésmente que tengan en cuenta este aspecto en la siguiente actualización. (En algunos casos, también serás capaz de modificar tu editor por tí mismo.)

Tenemos todas las razones para creer que el sitio del W3C lanzará pronto una lista de DOCTYPES acertados, utilizables, y otra información esencial en una localización fácil de encontrar. De hecho, Karl Dubost, Conformance Manager del equipo del W3C Quality Assurance, contribuyó a la información de este pequeño artículo.

Del mismo modo, el relanzamiento de The Web Standards Project proporciona en sus páginas esta información.

Comentarios

Comentario de washers reviews - 13 de Marzo de 2011 - 08:13
"I believe you may have believed about including some video clips on your weblog posts to preserve your readers a lot more entertained? I necessarily mean I just read by way of the whole internet site right here and it was fine but since I am a lot more of a visual learner, I located that to grow to be much more helpful. Well you need to let me know how it turns out! I really like what you people are carrying out and up too. Such good function and opinions! Retain up the wonderful perform guys. I've additional this website to my blogroll. This really is a cool blog site thanks for sharing this useful facts.. I'll visit your internet site regularly for some most recent post." -------------------------------------------------------------------- Concentration in Chemistry and Physics
Comentario de Carlos - 07 de Septiembre de 2011 - 10:47
Una preguntilla, ¿el DOCTYPE se debe poner únicamente en la primera página del sitio WEB o en todas las páginas que lo componen? Muchas gracias de antemano. Un saludo
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario: