Validar blog en W3C Validator

La difícil tarea de validar un blog en la W3C (ver W3C Validator) se puede tornar aún más compleja si desconocemos algunos de los aspectos más básicos a tener en cuenta al momento de añadir código a nuestra plantilla.

A continuación listaré una serie de algunos consejos que a mi criterio resultan bastante importantes si por lo menos deseamos no tener unos 1000 errores en la plantilla.

Primero unas observaciones al usar el Validador de la W3C y otras genéricas:

- Cuando pongas la url de tu blog a ser examinada marca el check de la opción "Show Source" para ver el código fuente de los errores y se te muestre la plantilla completa (previo clic en More Options si no ves la serie de opciones).

- Todo error arrastra muchos errores de validación de modo que si logras corregir un error prueba nuevamente el validador de la W3C para ver cuántos errores menos tienes.

- Revisa regularmente tu plantilla si la validaste recientemente para asi evitar acumular errores ya que toda nueva entrada posteada o edición de código es una potencial fuente de errores.

- Cuidado con el uso del tag more de Wordpress, si usas more sin cerrar un tag (por ejemplo: strong) todo puede fallar.

- No uses párrafos dentro de listas. En lo personal evito usarlas, son bastante limitantes en cuanto a código válido.

Listo, comencemos con los errores (y sus soluciones claro):

1. ERRORES DEBIDO A JAVASCRIPT

Suele dar un error del tipo:

Character "<" is the first character of a delimiter but occurred as data

Clásico error de que se ha incurrido en una sintaxis errónea al momento de empezar la definición de una etiqueta, lo más probable es que se trate de una función javascript que está escribiendo html, por ejemplo:

document.write(’<style type="text/css">.tabber{display:none;}<\/style>’);

El problema allí originado es por el <\/ de la parte final dado que en html debería ser solo </ pero se escribe de esa manera para que sea interpretado como un slash (/) en Javascript. Es obvio que éste document write se encontrará en la cabecera (head) del código del blog por lo que deberemos encontrar algo como ésto:

<script type="text/javascript">
document.write(’<style type="text/css">.tabber{display:none;}<\/style>’);
</script>

Ahora nuestro trabajo es reemplazar todo eso por html básico, lo cual sería simplemente:

<style type="text/css">.tabber{display:none;}</style>

2. OMISIÓN DE TYPE EN JAVASCRIPT O CSS

Es informado mediante el siguiente mensaje de error:

Required attribute "type" not specified.

Es cuando no hemos definido un type dentro de un Javascript (o un CSS) y no hemos definido su tipo, por ejemplo inicios de código como siguen:

<script src="http://static.woopra.com/js/woopra.js"></script>

<style>.tabber{display:none;}</style>

Lo correcto es en realidad:

<script type="text/javascript" src="http://static.woopra.com/js/woopra.js"></script>

<style type="text/css">.tabber{display:none;}</style>

Respectivamente. Aqui una anotación extra para el caso de Javascript. Algunos realizan un OMITAG bastante conocido al terminar su tag script pues lo hacen así (ver el final el tag mal cerrado):

<script type="text/javascript" src="http://static.woopra.com/js/woopra.js">

Cuando lo correcto es (como se mostró líneas arriba)

<script type="text/javascript" src="http://static.woopra.com/js/woopra.js"></script>

O en su defecto:

<script type="text/javascript" src="http://static.woopra.com/js/woopra.js" />

3. DUPLICACIÓN DE ID’s

Por ejemplo:

ID "header" already defined

Debemos recordar que los ID’s son justamente eso "identificadores" y se diferencian de las clases (class) en que no pueden existir más de uno con el mismo nombre. Si tienes dos ID’s en div’s distintos con el mismo nombre debes suprimir alguno o redefinirlo como clase.

En el ejemplo dado existe una duplicación de ID’s que es bastante evidente revisando el código de la plantilla (solo basta con dar clic en el número de línea del validador, si han marcado el check de View Source) que en este caso fue:

<div id="header">
<div id="header">

4. ERROR EN LA CONSTRUCCIÓN DE ATRIBUTOS

Determinado por el mensaje de error siguiente:

XML Parsing Error: attributes construct error.

XML Parsing Error: Couldn’t find end of Start Tag a line

Es un error básico de construcción, lo más seguro es una doble comilla en un atributo de un tag html, una doble comilla mal cerrada o un tag mal cerrado, etc. En el caso del blog que anduve revisando la causa fue ésto último:

<a href="http://www.unawebcualquieraxyz.com" <img src="" alt="" /> </a>

Ese error por ejemplo es "gracias" a no cerrar un tag:

<a href="http://www.unawebcualquieraxyz.com"><img src="" alt="" /> </a>

5. FINAL INCORRECTO DEL TAG IMG

El mensaje de error mostrado es el siguiente:

End tag for "img" omitted, but OMITTAG NO was specified

XML Parsing Error: Couldn’t find end of Start Tag a line XXX

Ocasionado debido a una mala clausura de la etiqueta img, lo normal es que algunos usen algo como ésto:

<img src="http://www.tecnologiadiaria.com/imagen.gif" alt="imagen">

Lo correcto es (con slash antes del tag de clausura):

<img src="http://www.tecnologiadiaria.com/imagen.gif" alt="imagen" />

Consejo análogo para las etiquetas <br /> en lugar del incorrecto <br> y <hr /> en lugar del incorrecto <hr>. Que funcione no quiere decir que esté correcto.

6. FINAL INCORRECTO DE UN TAG CUALQUIERA

Mensajes de error mostrados:

XML Parsing Error: Opening and ending tag mismatch

Debido a la falta del slash (/) en el tag cualquiera de la línea indicada.

7. AUSENCIA DEL ATRIBUTO ALT EN IMÁGENES

Nos es informado mediante:

Required attribute "ALT" not specified

Esto es debido a la ausencia del atributo alt en las imágenes. Si no saben qué es eso no se compliquen, es un texto cualquiera que sale al poner el cursor del mouse sobre una imagen. Si quieren lo dejan como vacío pero nunca lo omitan, al final lo pueden dejar de cualquiera de las siguientes maneras:

<img src="http://www.tecnologiadiaria.com/imagen.gif" alt=""/>

8. ATRIBUTOS INAPROPIADOS

Algunos ejemplos:

There is no attribute "property"
There is no attribute "rel"

Sucede cuando asignamos atributos a elementos de HTML que no le corresponden, por ejemplo el atributo alt a un párrafo o el rel o property a un span. Para eliminar este error lo normal es evitar estos atributos inadecuados con sus respectivos valores del tag correspondiente, por ejemplo supongamos el siguiente:

<span class="knxdt" rel="nofollow" property="valorX">

Lo correcto sería solo:

<span class="knxdt">

Removemos sus atributos y sus valores, por lo general estos errores suelen deberse a la plantilla en sí propios del creador del theme, por eso es bueno testear siempre un tema al momento de instalarlo y ver cuántos errores tiene. No todos pueden deberse a la plantilla, hay otros debido a los posts.

9. AUSENCIA DEL DOCTYPE

Aunque Wordpress lo coloca por defecto, en las páginas web lo suelen olvidar y sale un error de este tipo:

Fatal Error: No DOCTYPE specified!

El Doctype es un parámetro inicial que indica a la web sobre qué estándar está construido tu blog o página, esto sirve porque se dan mediante versiones que se van actualizando y cosas que antes eran permitidas en las nuevas versiones no lo son necesariamente (por ejemplo el <br> antes permitido y ahora ya no).

10. DOCTYPE NO SOPORTA ELEMENTO X

Si tu Doctype especificado no soporta un tipo de elemento X te aparecerá lo siguiente:

document type does not allow element "X" here

Donde X puede ser por ejemplo un tipo style o cualquier otro en una zona donde no debería ir.

11. ERROR DEBIDO A VIDEOS YOUTUBE Y FLASH

Son del tipo:

document type does not allow element "XXXX" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag

Para validar este tipo de códigos ya escribí una entrada en particular.

Espero que les sirva y no olviden que validar sus blogs aliviana la carga debido a la ausencia de errores, además que reduce la posibilidad de que se vean mal en otros navegadores (llámese IE6). Por otro lado ayuda a una mejor indexación debido a que comprende el que los bots de Google rastreen mejor el contenido estructuralmente hablando, en especial para aquellos bloggers de cara al SEO.

Si tienes muchos errores no te preocupes, tal vez algunos de ellos se reduzcan usando la opción Clean up Markup with HTML Tidy (ver check en las opciones del validador de la W3C).

Solo como anotación les sugiero que no pongan a modo de comentarios solo enlaces para solucionar problemas ya que el sentido de este post es ayudarlos de un modo más general y en caso aqui no se haya tratado un tipo de error y ustedes lo tienen, entonces pueden citarlo en sus comentarios y lo podremos revisar e incorporar al post.

Que les sirva y si lo lograron postéenlo aqui y si no sigan intentandolo y verán que sí se puede. Como premio de tener un blog válido la W3C les da unos botones. Lol.

Son bastante feos pero que tienen algo de mérito, pueden ver también aqui la lista completa.

Enlace: http://validator.w3.org/

Si te gustó ésta entrada vota por ella, es gratis. Gracias.

Puedes leer también:

• Video: La muerte de un EMO
• KnxDT Bookmarks Wordpress Plugin
• Descargar Parche para MSN Multisesion o Multi Messenger 8.1
• La mejor universidad del Perú - Ranking definitivo
• Cómo abrir correo de Hotmail Messenger con Firefox

Comentarios