Logo de Mosaic
El texto central de HTML
Validar el HTML

24. Validar el HTML

Mark Norman Francis. 26 de septiembre de 2008. Publicado en: estándares, web, w3c, html, validador

Ahora ya habéis escrito unas cuantas páginas en HTML y parece que se ven bastante bien, pero hay unas cuantas cosas que no son del todo correctas. ¿Cuál es la mejor manera de encontrar aquello que no funciona y garantizar que estas páginas (y todas las páginas que escribáis en el futuro) se vean correctamente con todos los navegadores sin ningún error?

La respuesta es la validación. Hay muchas herramientas disponibles, del W3C y de otros sitios, que os permiten validar el código de vuestros sitios web. Los tres validadores más habituales que utilizaréis son:

En este apartado explicaremos el primero de estos tres validadores y la manera de utilizarlo y cómo interpretar los tipos de resultados típicos que da. El comprobador de enlaces es muy obvio, y sobre el validador del CSS no habrá que explicar mucho nada más una vez que hayáis leído este apartado y los apartados relativos al CSS que encontraréis más adelante en este curso.

Ved también

Podéis ver los contenidos del módulo "CSS" de este curso.

Los contenidos de este apartado son los siguientes:

24.1. Errores

En general, en la programación informática hay dos tipos de problemas con el código:

La mayoría de los lenguajes de programación detectan muy fácilmente el primer error, ya que el programa no se ejecuta o no se compila hasta que se soluciona. Esto provoca que encontrar y solucionar estos tipos de problemas en los momentos de desconcierto en los que os preguntáis: "¿por qué no hace lo que debería hacer?" sea mucho más fácil.

HTML no es un lenguaje de programación. Los errores de sintaxis de una página web no hacen normalmente que el navegador web se niegue a abrir la página (a pesar de que XHTML suele ser más estricto que HTML, por lo menos cuando se sirve como datos application/xhtml+xml o text/xml, según se quiera; y algunos doctypes rechazarán el uso de ciertos tipos de elementos HTML). Ésta es una de las razones principales de la rápida adopción y difusión de la web.

El primer navegador web, WorldWideWeb (creado por Tim Berners-Lee) era también un editor, y permitía crear páginas web sin tener que aprender HTML. Este editor creaba HTML no válido. Esto se podría haber solucionado, pero estableció un precedente importante que aún existe en todos los navegadores web actuales: es más importante que la gente pueda acceder al contenido que quejarse de errores que la gente no entenderá o que no podrá solucionar.

24.2. ¿Qué es la validación?

Los navegadores web aceptarán las páginas web malas (el término que utilizamos aquí es "no válidas") y harán todo lo que puedan para reproducir el código intentando adivinar cuáles eran las intenciones del autor, pero también se puede comprobar si el HTML se ha escrito correctamente; de hecho, tal como veréis a continuación, vale la pena hacerlo. Eso se conoce como "validar" el HTML.

El programa de validación compara el código HTML de la página web con las normas de su doctype y dice si no se han respetado estas normas y dónde.

Ved también

Podéis ver el doctype en el apartado 14 del módulo "Fundamentos de HTML".

24.3. ¿Por qué validar?

Algunos desarrolladores de webs opinan que si una página web se ve bien en los navegadores, el hecho de que no se valide no tiene ninguna importancia. Consideran que la validación es un objetivo ideal, pero ni mucho menos, obligatorio.

Esta actitud no deja de ser sabia. La especificación HTML no es perfecta, y ahora incluso ha quedado un poco anticuada. Algunos detalles que son perfectamente correctos (como por ejemplo empezar una lista ordenada en un punto diferente de 1) no son válidas en HTML.

Ved también

Podéis ver cómo empezar una lista ordenada en un punto diferente de 1 en el apartado 16 de este módulo.

Sin embargo, tal como dice el dicho:

"Aprende las normas para así saber cómo infringirlas correctamente."

Hay dos razones muy potentes para validar el HTML mientras lo vais escribiendo.

La validación es vuestro sistema de alerta precoz ante la introducción de problemas en vuestras páginas que entonces se pueden manifestar de maneras realmente interesantes y difíciles de determinar. Cuando un navegador encuentra código HTML no válido, debe tomar una decisión bien fundamentada sobre cuáles eran vuestras intenciones, y los diferentes navegadores pueden llegar a respuestas diferentes.

24.4. Los diferentes navegadores interpretan el HTML no válido de una manera diferente

El HTML válido es el único contrato que tenéis con los fabricantes de los navegadores. La especificación de HTML dice cómo lo deberíais escribir vosotros y cómo deberían interpretar vuestro documento los navegadores. Actualmente, la conformidad de los navegadores con los estándares ha llegado al punto en el que, si escribís un código válido, todos los navegadores principales interpretarán vuestro código de la misma manera. Con el HTML eso sucede prácticamente siempre, mientras que los demás estándares se pueden encontrar con algunas otras diferencias aquí y allí con respecto a su aceptación.

Pero ¿qué sucede si enviáis un código no válido a un navegador? ¿Qué consecuencias tiene? La respuesta es que entra en acción la gestión de errores del navegador para decidir qué hay que hacer con el código. Básicamente, lo que hace es decir: "De acuerdo, este código no se puede validar, pero ¿cómo podemos presentar esta página al usuario final? Llenaremos los huecos de la manera siguiente".

Suena muy bien, ¿no? Si la página contiene algunos errores, ¿el navegador llenará los huecos por vosotros? Pues no exactamente, porque cada navegador hace las cosas a su manera. Por ejemplo:

<p><strong>Este texto debería estar en negrita</p>
<p>¿Este texto debería estar en negrita? ¿Cómo queda el HTML cuando
 se representa?</p>
 
<p><a href="#"></strong>Este texto debería ser un enlace</p>
<p>¿Este texto debería ser un enlace? ¿Cómo queda el HTML cuando se
 representa?</p>

Los errores son que el elemento strong se encuentra anidado incorrectamente a través de múltiples elementos de bloque y que el elemento de ancla no se ha cerrado. Cuando se intenta verlo con diferentes navegadores, éstos interpretan el código de maneras muy diferentes:

Nota

Podéis encontrar la versión original de este ejemplo en el artículo de Hallvord Steen "Same DOM errors, different browser interpretations"; si lo leéis, encontraréis un tratamiento mucho más detallado de los errores del HTML e información sobre las herramientas de depuración.

Ninguno de los comportamientos de los diferentes navegadores es incorrecto; todos intentan reparar los errores de vuestro código incorrecto. La conclusión es, pues, que hay que evitar siempre que sea posible el etiquetado no válido en vuestra página.

24.4.1. El "quirks mode"

Otra cosa que deberíais conocer es lo que se conoce como "Quirksmode" o "mode quirks" (peculiaridades). Es el modo al que pasa el navegador cuando encuentra una página con un doctype incorrecto, o sin doctype. En este modo, el navegador hace todo lo que puede para saber qué serie de reglas debe utilizar para validar el código y repara los errores lo mejor que sabe. Este modo existe realmente para permitir la visualización de las páginas más antiguas, y no se debe utilizar nunca para crear una página nueva.

24.5. Cómo validar las páginas

Ahora que ya hemos explorado toda la parte teórica que hay detrás de la validación del HTML, ya podemos pasar a la parte más sencilla: la validación en sí. Bien, de hecho, no es exactamente así. Poner una URL en un validador y ver si la página es válida o no es muy fácil; descubrir qué es lo que está mal y solucionar los errores no es siempre tan fácil, porque los mensajes de error en ocasiones son algo crípticos. A continuación veremos algunos ejemplos.

Lo que miraremos en este subapartado es lo siguiente (también os lo podéis descargar o ver su HTML):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
      <title>Validating your HTML</title>
   </head>
   <body>
      <h2>The tale of Herbet Gruel</h2>
      <p>Welcome to my story. I am a slight whisp of a man, slender and fragile,
       features wrinkled and worn, eyes sunken into their sockets like rabbits
       cowering in their burrows. The <em>years have not been kind to me</em>,
       but yet I hold no regrets, as I have overcome all that sought to ail me,
       and have been allowed to bide my time, making mischief as I travel to and
       fro, 'cross the unyielding landscape of the <a href="http://outer-rim-
       rocks.co.uk" colspan="3">outer rim</a>.</p>

      <h3>Buster</h3>
      <p>Buster is my guardian angel. Before that, he was my dog. Before that,
       who knows? I lost my dog many moons ago while out hunting geese in the
       undergrowth. A shot rang  out from my rifle, and I called for Buster to
       collect the goose I had felled. He ran off towards where the bird had
       landed, but never returned. I never found his body, but I comfort myself
       with the thought that he did not die; rather he transcended to a higher
       place, and now watches over me, to ensure my well-being.
       
      <h3>My possessions</h3>
      <p>A travelling man needs very little to accompany him on the road:</p>
      <ul>
         <li>My hat full of memories</li>
         <li>My trusty walking cane</li>
         <li>A purse that did contain gold at one time</li>
         <li>A diary, from the year 1874<li>
         <li>An empty glasses case</li>
         <li>A newspaper, for when I need to look busy</li>
      </ul>
   </body>

Archivo fuente: "example_validation.html"

Esta página tan sencilla está formada por tres títulos, tres párrafos, un enlace y una lista no ordenada. Utiliza el doctype XHTML 1.0 Strict como serie de reglas de validación. El documento contiene algunos errores, que descubriréis más adelante con el validador de HTML del W3C.

24.5.1. El validador de HTML del W3C

Como ya hemos comentado, el W3C ofrece un validador en línea. Os será muy útil poder cambiar entre diferentes pestañas para ir alternando entre el validador y este apartado mientras vais siguiendo este ejemplo.

Tened en cuenta que también podéis validar páginas con el validador del W3C directamente desde el navegador Opera sencillamente haciendo clic con el botón derecho del ratón o con un "Ctrl" + clic y seleccionando la opción "Validate" (validar).

Veréis que el validador tiene tres pestañas en la parte superior del interfaz:

Sea cual sea el método que utilicéis, el resultado debería ser el mismo; creemos que lo más sencillo es comprobar la página de ejemplo que tenemos aquí copiando todo el código anterior y pegándolo en una tercera pestaña. Si lo hacéis, deberíais obtener el resultado que podéis ver en la figura 1:

Resultats de la validació del document de mostra: 17 errors!

Figura 1. Resultados de la validación del documento de muestra, ¡17 errores!

Puede parecer muy preocupante, especialmente si os digo que en este documento ¡no hay realmente 17 errores! No os desesperéis; dice que hay más errores de los que hay realmente porque normalmente un error al principio de la página tiene un efecto en cascada, que hace que el validador informe de más errores a medida que va bajando por la página, ya que parece que hay más elementos que no están cerrados o que no están correctamente anidados. Sólo es necesario que penséis en el significado del mensaje de error y que encontréis los errores obvios de etiquetado. La siguiente tabla muestra todos los errores que hemos reparado para poder validar la página, junto con las deducciones para averiguar qué era lo que no funcionaba y la solución aplicada.

Mensaje de error Deducción Reparación
Tabla 1. Los errores reparados para validar la página de ejemplo
Línea 8, columna 461: no hay ningún atributo "colspan" Sabemos que hay un atributo colspan y que es un HTML válido; por lo tanto, ¿por qué dice que no lo hay? Esperad; quizá quiere decir que se utiliza en un elemento en el que no se debería utilizar. Evidentemente, se utiliza en un elemento a. ¡Mal! Hemos eliminado el atributo colspan del elemento a.
Línea 13, columna 7: el tipo de documento no permite el elemento "h3" aquí; falta una etiqueta de apertura de "object", "applet", "map", "iframe", "button", "ins", "del". <h3>My possessions</h3> A primera vista también parece extraña, ya que el elemento h3 está cerrado y en este contexto está permitido. Debéis tener en cuenta que, a menudo, este mensaje de error significa que hay un elemento no cerrado cerca... Hemos añadido una etiqueta de cierre p a la línea que hay sobre el título en cuestión.
Línea 19, columna 40: el tipo de documento no permite el elemento "li" aquí; falta una etiqueta de apertura de "ul", "ol", "menu", "dir". <li>A diary, from the year 1874<li> Éste es muy fácil; en la línea indicada podéis ver rápidamente que la etiqueta li final no tiene la barra inclinada de cierre (/) Hemos añadido una barra inclinada de cierre a la línea en cuestión.
Línea 23, columna 9: no está la etiqueta de cierre para "html", pero se ha especificado OMITTAG NO. </body> En este caso también es muy fácil ver que falta la etiqueta html final. Incluso la explicación del mensaje de error empieza diciendo que quizá habéis olvidado cerrar un elemento. Hemos añadido el elemento html final que faltaba.

Después de corregir estos errores, el validador da un mensaje bastante satisfactorio, tal como muestra la figura 2:

Missatge satisfactori que diu que ja s'han reparat tots els errors

Figura 2. Un mensaje satisfactorio que dice que ya se han reparado todos los errores.

Eso es todo lo que había que hacer. Sólo necesitáis no poneros nerviosos y que recordéis el doctype que utilizáis para validar la página.

Descargaos o mirad la versión correcta del HTML en: " example_validation_fixed.html"

Resumen

Después de leer este apartado, deberíais poder trabajar con comodidad con el validador en línea de W3C para validar vuestro HTML. Esto, sin embargo, es sólo la punta del iceberg con respecto a la validación; a continuación encontraréis una lista con unas herramientas más complicadas que os pueden ayudar cuando vuestras páginas se vayan haciendo grandes y se vayan complicando.

Preguntas de repaso

  1. ¿Qué sucede cuando un navegador analiza un HTML no válido?

  2. ¿Qué problema hay?

  3. ¿El uso de un conjunto de marcos en un documento validado con el doctype HTML 4 Strict generará un error?

Otras herramientas que podéis utilizar

El menú de depuración de Opera

Bookmarklet de validación general

La extensión Web Developer de Firefox

La barra de herramientas del desarrollador de IE

Safari tidy

HTML tidy

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :