El blog del Staff/Stuff de Sync.es aportando nuestras ideas al mundo

Un buen inicio, el DOCTYPE

He estado dándole vueltas toda la semana al tema sobre el que quería escribir en el blog de forma habitual. Por un lado pensaba que lo más correcto sería hablar de programación web, que al fin y al cabo es de lo que más se, pero por otro lado pensaba que podía ser también interesante hablar de algún hobbie o alguna afición. Al final creo que haré ambas cosas, intentaré contar cosas que yo creo que pueden ser interesantes para aquellos que se inician en la programación web y cuando quiera cambiar un poco de tema, os contaré algún detalle de alguna afición que no tenga nada que ver con el mundo de internet.

Para empezar, y en relación con el tema de la programación web, os voy a hablar de la primerísima línea que debería aparecer siempre en cualquier , la declaración del tipo de documento utilizado o más comunmente conocido, el .

El no especificar correctamente un DOCTYPE o simplemente no poner la línea con el DOCTYPE en un documento html, es el causante en la mayoría de los casos del típico problema de que nuestra página web se vea de diferente manera en los diferentes navegadores web. Sobretodo, desde la versión 6 del Internet Explorer, podemos hacer que distintos navegadores interpreten de manera igual el código asociado a nuestra página web mediante la elección de un DOCTYPE apropiado que cumpla con los estándares W3C.

Si no os habéis preocupado nunca del DOCTYPE de vuestra página web o no tiene uno definido, probad a poner esta línea como la primera de vuestra página web, sin dejar ningún espacio en blanco por delante:

<!DOCTYPE HTML PUBLIC “-////DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Es probable que cosas que antes se os “veían bien” de repente se vean de forma diferente (capas flotantes que ocupan menos, saltos de capas a la línea de abajo, etc.). Sin embargo, se estará visualizando tal y como lo has definido en tus hojas de y lo que es más importante, estarás comprobando que no has definido esas hojas de de la manera correcta.

Prueba a modificar los estilos de tu página web para que de nuevo se vea de manera correcta y pruébala en diferentes navegadores.¡ Sorpresa! Ahora se verá correctamente en todos los navegadores y no has tenido que añadir ningún código adicional para cada uno de ellos.

Lo que realmente hemos hecho es que el navegador utilice los standares de CSS del W3C en vez de otros para interpretar el código CSS. De esta manera todos los navegadores utilizarán el mismo standard para interpretar el CSS.

Se podría escribir muchísimo más y poner muchos ejemplos de como interpretan los navegadores las hojas de estilos cuando se ha definido un DOCTYPE correcto o cuando no.

Cuando veáis que vuestra página web se ve de manera muy diferente según el navegador web que estéis utilizando, antes de meter hacks para cada navegador en las hojas de estilos, fijaros en la primera línea de vuestro documento para ver si estáis utilizando un DOCTYPE correcto que cumpla con los standares del W3C

Relacionado: The box model

También te puede interesar:

8 comentarios

1 AlexNo Gravatar { 03.05.10 at 17:18 }

Muy interesante Manu, voy a revisarlo en mis sitios web ;)

Saludos

2 BelénNo Gravatar { 03.08.10 at 14:41 }

Buen post :D

3 GonzaloNo Gravatar { 03.09.10 at 9:37 }

Me ha parecido un post muy interesante, para los que estamos empezando esta información es oro. Queremos más……

4 JM MurilloNo Gravatar { 03.09.10 at 9:47 }

Gonzalo, a los que ya llevamos varios años en esto también nos ha solucionado muchos quebraderos de cabeza. A mi, hace un par de meses, me solucionó un problema gordo en una web al revisar los DOCTYPE que estaba usando. Intentaré sacar más cosillas de estas que en su día a mi me fueron muy útiles.

5 IsmurgNo Gravatar { 03.09.10 at 10:02 }

Muy recomendable la utilización de este doctype aunque siendo los tiempos del HTML5 como ya tenemos es mejor usar la versión con XHTML:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

que es igual de permisivo para antiguos comandos que el que propones pero permite la incorporación de versiones más recientes.

6 Anuncios de mueblesNo Gravatar { 09.26.10 at 19:44 }

Gracias, la verdad es que el DOCTYPE no lo utilizaba mucho, pero es cierto poniendolo se resuelven incluso incompatibilidades absurdas que no se pueden resolver sin un DOCTYPE…

Gracias!!!!

7 JM MurilloNo Gravatar { 09.27.10 at 12:32 }

De nada, he querido mostrar simplemente un resumen de lo que se puede conseguir eligiendo correctamente el DOCTYPE. Podrás encontrar muchas más opciones interesantes buscando por la web. Gracias a ti por tu comentario.

8 Hoja de estilos por defecto | Sync Staff { 10.16.10 at 11:06 }

[...] un post de hace unos meses, hablé de la importancia de la declaración del DOCTYPE al inicio del código de una página Web con el fin de asegurarnos de que  el código se [...]