Enlaces Patrocinados:
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.
October 6th, 2008 at 9:42 am
Yo siempre dejé eso para lo último.. qué mal hago, haber si lo arreglo ! xD
October 6th, 2008 at 10:47 am
los que estamos en Blogger, no podemos hacer nada :S
October 6th, 2008 at 12:31 pm
@Dwhite no es cierto, los que están en blogger mediante la edición de HTML pueden validar el W3C, los que no pueden hacerlo son lo que esta en WordPress.com porque no pueden editar sus plantillas por HTML.
Saludos…
October 18th, 2008 at 6:15 am
[…] (categorias y tags), secciones.. hay muchas formas de encontrar themes impresionantes o formas de cumplir el Validator W3C (tomo nota yo de este asunto que tengo […]
October 30th, 2008 at 7:59 am
A mi me parece mision imposible…
January 15th, 2009 at 12:31 pm
Muchas gracias, muy buena Info.
February 2nd, 2009 at 7:43 am
[…] resultados pronto, os dejo un artículo muy valioso que encontré en tecnologia diaria que habla de cómo validar el blog en w3c, esperemos que valga de algo.. mi blog por el momento dice.. […]
February 3rd, 2009 at 4:59 pm
Descubriendo esta herramienta y aprovechando las cosas que decís, te quería hacer una pregunta: ¿Que hacer con los meta contenidos del comienzo? La opción limpia que te presenta el w3c es muy diferente a como te la plantean en diferentes blogs
February 3rd, 2009 at 11:27 pm
A veces se debe priorizar. Si ves que más ventajas te trae lo otro, pues ni modo, aunque creo que igual cumpliendo los estándares se pueden llegar a hacer las cosas bastante bien.
Saludos.
April 16th, 2009 at 11:52 am
hola acabo de validar compraleonlinea y me parecio estupendo . ya tenemos codigo limpio .
August 1st, 2009 at 10:06 pm
[…] Adicionalmente, aconsejo leer el siguiente articulo del blog Tecnologia Diaria donde explican como validar un blog en W3C Validator […]
October 24th, 2009 at 4:35 pm
Hola que tal buenas tardes tendrás algún correo donde me pueda contactar con ustedes necesito que me ayuden en varios errores y como hacer para solucionarlo
October 24th, 2009 at 8:21 pm
No damos soporte privado, empero puedes dejarnos tus dudas para poder ayudarte y todos aprender.
Saludos, Natalia.
November 13th, 2009 at 3:42 pm
Muy buena tu pagina…Felicidades
que significa el error??:
Line 24, Column 5: multiple comments in comment declaration
November 13th, 2009 at 3:44 pm
Otra pregunta
Como instalar una barra como la que tienes abajo con translate fan page etc….
Gracias!!!!
November 13th, 2009 at 4:20 pm
hola!
Solo pude quitr 2 errores de los 423 que me marcaba en mi blog
los errores que identifique fueron los de la etiqueta alt la cual estaba ausente
solo que a mi me las acepta asi:
es decir el alt antes y no al final…
Veo que los errores se repiten mucho y el mismo
por que???
May 5th, 2010 at 1:51 am
Hola, quería preguntarte: hice el validator, me saltaron muchos errores! me quise morir, pero bueno,el tema a preguntarte es que quise copiar el codigo limpio que muestran al final de la pagina y al querer colocarlo en mi plantilla me salta error.Hay otra manera de hacerlo que no se “a mano” porque no voy a ternimar nunca…. gracias de antemano
Clau
February 8th, 2011 at 10:47 pm
la verdad esque es la parte que mas desconocia
August 3rd, 2011 at 2:14 am
Enserio gracias, esta es una clase maestra, yo por suerte no tenia tantos errores solo 18, pero gracias a tu explicación no solo los arregle si no que ademas entendí por que pasaba cada cosa.
Cuídate harto.
September 7th, 2011 at 2:06 pm
Hola, estoy intentando corregir unos errores que no me dejan funcionar bien la plantilla, algo que no entiendo por qué ocurre, pero bueno. El caso es que los encuentro como en los ejemplos de arriba pero no sé dónde ir a corregirlos, porque no los veo en las plantillas y tampoco en la base de datos.
Por ejemplo me da error en (137)
tengo que quitar lo que va entre paréntesis, creo, pero no lo encuentro…
¿Alguien puede hacer un poco de luz? Gracias.