4.7 HTML: validación del código

4.7 HTML: validación del código

El lenguaje HTML es un lenguaje, y como tal, tiene su vocabulario, sus palabras con sus significados, y su gramática, sus reglas que nos indican cómo podemos combinar sus palabras para formar textos complejos.

Cuando escribimos en español, podemos cometer faltas de ortografía (cuando hablamos, no se notan mucho).

Además, también hay reglas gramaticales que debemos cumplir, como por ejemplo la regla de concordancia de género y número entre un sustantivo y sus adjetivos, o la concordancia de número entre el sujeto y el verbo.

En HTML ocurre lo mismo, podemos cometer errores y estos errores pueden afectar de forma dramática a la visualización de la página. ¿Cómo podemos estar seguros de que nuestro código HTML es correcto y no contiene errores?

Muy fácil, mediante la validación del código fuente.

Pero antes de ver cómo se valida el código fuente de una página web, debemos de hacer memoria y recordar que el lenguaje HTML fue desarrollado por Tim Berners-Lee en el año 1990 tomando como base SGML.

Desde su nacimiento, el lenguaje HTML ha ido cambiando: se han añadido y quitado etiquetas y atributos, y el funcionamiento de algunas etiquetas ha ido cambiando con el paso del tiempo. Te tendría que contar algo de la historia del lenguaje HTML para que lo entiendas mucho mejor, pero eso lo haré en otro vídeo.

Ahora sólo nos interesa saber que existen diferentes versiones de HTML. En la actualidad, las tres versiones principales que conviven son HTML 4.01, XHTML 1.0 y HTML5, aunque ya se empieza a hablar de HTML5.1.

Lo primero que tienes que hacer cuando comiences a escribir una nueva página web, es decidir qué versión de HTML vas a utilizar.

La versión de HTML que utilizas en una página web se indica con la instrucción DOCTYPE al principio del código.

Esto del DOCTYPE es junto con el juego de caracteres uno de los mayores misterios para mucha gente que lleva años y años haciendo páginas web.

Mucha gente no sabe para qué sirve el DOCTYPE ni qué valor debe poner. Prueba de ello es este estudio en el que se analizaron 1.788.294 páginas web y se encontraron 13.941 valores distintos de DOCTYPE. No existen tantos DOCTYPEs oficiales, esto muestra que en muchas ocasiones la gente al final acaba inventándose su propio DOCTYPE.

Te estarás preguntando, ¿Qué valor de DOCTYPE debo usar en mis más páginas web?

Como te he dicho antes, depende de la versión de HTML que estés utilizando.

En varios sitios web, como está página del W3C, puedes encontrar una lista con las declaraciones de DOCTYPE recomendadas.

Si utilizas la versión 4 de HTML, debes utilizar este DOCTYPE.

Si te inclinas por XHTML, debes utilizar este otro DOCTYPE.

Y por último, en HTML5, te lo han puesto bien fácil. No deberías tener problemas para recordar este DOCTYPE.

¿Y qué son esos tres DOCTYPES que aparecen en la versión de HTML 4.01 y en XHTML 1.0? Eso son variantes que existen dentro de una misma versión, y para una nueva página web te debes olvidar de ellas, debes usar la variante estricta.

Las otras variantes, la transicional y la de marcos (frameset) son necesarias cuando estás realizando la migración de un sitio web con una versión antigua de HTML a una versión moderna y necesitas conservar ciertas características desaconsejadas.

Recuerda que el DOCTYPE debe ser la primera línea en tu código HTML.

¿Y cómo realizo la validación del código fuente? Existen varias herramientas gratuitas disponibles online, aunque también existen otras herramientas más sofisticadas de pago.

Mi favorita es la herramienta oficial que ofrece el World Wide Web Consortium, el W3C, http://validator.w3.org/, el organismo internacional que vela por el correcto desarrollo de la Web.

Su servicio de validación es muy sencillo de utilizar y te permite validar una página web introduciendo su URL si la página está publicada en la Web, también puedes subir el fichero con el código fuente, y por último, también puedes copiar directamente el código fuente. Sin embargo, este no es el único servicio de este estilo y otros que te recomiendo son el validador del Web Design Group, y el validator.nu que ofrece algunas opciones muy interesantes.

¿Y es muy importante esto de la validación? ¿Qué pasa si no valido mis páginas web?

Pues bien sencillo, en muchas ocasiones, que una página web se visualice de distinta forma en distintos navegadores se debe a que la página web contiene errores.

Eso te lo explico en otro vídeo, HTML5: ¿Por qué es importante escribir código correcto?, que está dividido en tres partes y que te aconsejo que veas para entenderlo y estar convencido de la importancia de la validación.

Para terminar, te voy a hacer una demostración de validación, vamos a validar la página principal del sitio web de este curso, de la Universidad de Alicante, el sitio donde trabajo, y de La Moncloa, el gobierno de mi país.

Esta es la página principal del servicio de validación de lenguaje de marcado del W3C. Como vamos a validar tres páginas que están publicadas en Internet, voy a usar la primera pestaña, que me permite introducir la dirección, la URL de la página web que quiero validar.

Introduzco la dirección del sitio web de este curso, idesweb.es, y le doy al botón “Check”, comprobar, validar. Cuando me sale aquí este mensaje en color verde significa que la validación ha sido correcta. En algunas situaciones me puede aparecer alguna advertencia, como en este caso que me dice que hay un warning. Pero este warning se debe a que la página está realizada con HTML5 y el validador me avisa de que estoy usando características experimentales ya que HTML5 no es, por ahora, una recomendación oficial. Así que hay cosas que pueden cambiar.

Volvemos a la página principal del validador y ahora voy a validar la página principal de la Universidad de Alicante. Introduzco su URL y le vuelvo a dar al botón “Check”. Fijaros que no estoy activando ninguna de estas opciones adicionales, para una validación simple no las necesito. Le doy al botón de validar, espero unos segundos y “ta chán”. Problemas. Se me indica que se han encontrado algunos errores mientras se validaba este documento que tiene la versión HTML5 y en concreto se han encontrado 6 errores y 2 advertencias. Para ver los errores, desplazo la página hacia abajo y me aparece el informe de errores: me aparece la línea, la columna y el mensaje de error. Y un fragmento del código donde está el error. Estos mensajes de error me ayudan a localizar mis errores en mi código y a resolverlos.

Un consejo muy importante: nunca comenzar a resolver, a solucionar los errores por el último, eso es un error. Hay que ir siempre al primer error, ya que en muchas ocasiones, al corregir el primer error desaparecen el resto de errores.

Por último vamos a validar la última página web que es la de La Moncloa: www.lamoncloa.gob.es. Le damos a validar, y esperamos, esperamos. “Ta chán”, también contiene errores, y 38 errores. Y a continuación nos aparece el listado con los 38 errores que se han detectado. Como he explicado antes, hay que corregir los errores desde el principio, desde el primero. Y al corregir un único error, podrían desaparecer todos los de la página. Es decir, que en esta página, realmente quizás haya menos de 38 errores. Podemos ver que el primer error se debe a que aquí hay un valor del atributo id que ya ha sido definido. Las especificación de HTML nos indica que el valor del atributo id debe ser único en la página web. Y se nos indica justo debajo la otra línea del código donde ya se ha definido ese atributo id.

En la página de La Moncloa ocurre algo curioso. Si copiamos la dirección y nos vamos y visitamos la página de La Moncloa, lo curioso que os quiero enseñar es que se han puesto la medalla, se han puesto la insignia de que el HTML de esta página es válido. Y ya hemos comprobado que no, que no es válido. Pero bueno, qué se puede esperar de un político, verdades no muchas.

Como has podido ver, validar una página web se hace en pocos segundos, así que no tienes excusa para no hacerlo.