Comunidad de diseño web y desarrollo en internet online

La importancia de DOCTYPE y de validar XHTML y CSS

Conseguir que tu WEB se vea por igual en cualquier navegador, es muchas veces una ardua tarea.
Hacer que lo consigas, es el objetivo de esta serie de tres tips de CSS.

Yo veo tres problemas principales, que son los causantes de esas "diferencias de visualización" que observamos cuando vemos nuestra WEB con distintos navegadores:

  1. Que no escribimos "código limpio", es decir, que somos unos "chapuzas", que no usamos un DOCTYPE, o no lo hacemos correctamente.
  2. Que los navegadores tienen como "predefinidas" algunas maneras de ver los diferentes elementos del xHTML (y esas maneras, no suelen coincidir unas con otras).
  3. Que ciertas reglas de CSS, no son soportadas por algunos navegadores (IE).
En este tip trataremos el primero de los tres puntos.
En dos tip sucesivos, los dos siguientes:

Escribir código "limpio":


En numerosas ocasiones, los problemas se deben a que no escribimos el código de manera adecuada. No cerramos elementos, los cerramos en distinto orden a como los abrimos, o escribimos mal la sintaxis de los mismos.
En ocasiones, también se debe a que usamos, para ciertos fines, elementos que no se deberían usar para ellos (lo que ocurre muchas veces que se usa un tag <table>)

Es muy importante escribir correctamente tanto el código CSS como el xHTML. Y sobre todo, este último, pues no podemos olvidar que xHTML, es la base de la WEB, y el esqueleto sobre el que se aplicará el CSS.

Para que el código xHTML sea adecuado y rígido, existe el DOCTYPE:

El DOCTYPE:

Sin extenderme mucho, es una declaración para hacer que el navegador, entienda qué es lo que va a recibir, y cómo deberá procesarlo.
De esta manera, la misma página, con distintos doctype, o peor aún, sin él, se verá de distinta manera, incluso en el mismo navegador.
Por ello, es necesario elegir adecuadamente un doctype, y seguirlo.

¿Las posibilidades? Unas cuantas, pero mi primer consejo es que se usen Doctype para xHTML.
El segundo: que se elija "xHTML STRICT".
De esta manera, le advertiremos al navegador de que va a recibir código xHTML estándar (W3C).

Si es la primer vez que lees este palabro: "doctype", vas a tener que revisar antes algún que otro manual.
Propongo:

¿Qué pasa si no ponemos doctype?
Pues que tenemos el "desastre" casi garantizado.
El navegador entrará en "QuircksMmode", y hará su "interpretación particular" de nuestra WEB, de manera que muy raramente coincidirá el resultado de los demás navegadores.

¿Cómo declaro el DOCTYPE?
Añadiendo una sencilla primera línea a nuestra página WEB:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Por ejemplo, si usamos xHTML 1.0 Strict, como recomiendo.

¿Qué doctype elijo?
Pues de la lista que puedes encontrar en los links que cité arriba, el que se adapte a tus necesidades.
Pero en principio:
- Si no escribes código xHTML limpio, mejor intenta buscar algún manual.
Si ya sabes HTML, será muy fácil acostumbrarte a la "nueva manera" de trabajar. (mientras, puedes usar HTML4.0 Transitional)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- Si escribes xHTML limpio, imagino que ya estarás usando xHTML 1.0 transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Intenta pasar a usar XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Verás que es más exigente, y que algunas etiquetas y atributos no se usan, pero es el precio del progreso.

Si eres uno de los "machos" y "obsesos" de la validación, intenta validar con: xHTML 1.1 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Verás que es mucho más exigente, y que requiere algún que otro conocimiento, pero si lo consigues (se puede), estarás produciendo páginas WEB altamente rigurosas con los estándares, mucho más compatibles, y plenamente accesibles para los medios que están por llegar.

Para otro tipo de documentos, hay otros doctypes (también listados en los links que puse), como los que implementan MathML, o SVG (o la combinación entre ellos y los primeros)

Y ahora, ¿Cómo comprobar si está todo bien?

VALIDAR LA WEB:

Se trata de verificar que el código (x)HTML de tu WEB es coherente con su doctype.
¿Cómo hacerlo? Pues mediante el validador de la W3C.
Con esta herramienta, podrás determinar si tu página pasa el estándar declarado por el doctype, y de esta manera, asegurar su fidelidad a las normas que tu doctype fijó.

Por ejemplo, el resultado de la validación del xHTML de cristalab, se puede ver aquí.

VALIDAR EL CSS:

Se trata de verificar que el CSS que hemos escrito, es igualmente adecuado y sin errores.
Esto debemos hacerlo para asegurarnos la compatibilidad entre navegadores.
¿Cómo? Pues la W3C también nos ofrece su Validador de CSS, que funciona de manera similar al de (x)HTML

Por ejemplo, el resultado de la validación del CSS de cristalab, se puede ver aquí.



Por ahora, está bien.
Puedes pasar al siguiente tip:
RESETEAR EL CSS.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate