Validadores de código HTML y CSS

Validadores de código HTML y CSS

Print Friendly, PDF & Email
Validadores de código HTML y CSS
Valora esta entrada
Quien tiene boca se equivoca. Incluso los programadores y diseñadores más experimentados cometen errores de sintaxis o vocabulario picando código en lenguaje html, css, javascript y cualquier otro lenguaje de programación.

Nos pasa a todos. Es humano. Y no es una cuestión de dificultad. Todos necesitamos alguna vez alguien revise lo que estamos escribiendo y que nos diga para nuestro alivio… si está todo bien pero ¿te has fijado en la línea 23? Cuidado que no has cerrado la etiqueta o te has dejado una letra en tal lugar.

Es aquí cuando las máquinas acuden a nuestro poder. Pero atención. Debemos dominar nosotros a las máquinas. No ellas a nosotras.

Os presento a continuación las herramientas para validación de código que a mi siempre me salvan del apuro cuando me falla el ojo clínico o tengo dudas de si una etiqueta está deprecated o no.

El W3C dicta el stándard. La indústria hace lo que considera oportuno que sus navegadores interpreten… Veamos pues un ejemplo de cada:

Validador W3C

Validador de código CSS del W3C
Validador de código CSS del W3C
Validador de código HTML del W3C
Validador de código HTML del W3C

El World Wide Web Consortium (W3C) fue creado por Tim Berners Lee en 1994 como una respuesta a la necesidad de estandarizar el código HTML. Tener en cuenta que por aquel entonces ni siquiera existía la estructura básica de un documento HTML y ¡todo era un desorden!

Al W3C le debemos el HTML 3.2, el 4.1, el XHTML, un intento de XHTML 2.0 fallido… y que finalmente se pusiera de acuerdo con la industria para desarrollar el HTML5 (el html5 es más mérito de la indústria que del propio W3C que no tuvo otra opción ante la creación de un lobby llamado WHATWG.

Por lo tanto, y teniendo en cuenta que el W3C es quien redacta los estándares estas deberían ser herramientas fiables. Funcionan realmente bien.

La herramienta tiene un interfaz muy intuitivo. Os permite 3 opciones:

  • Subir la hoja de código
  • Copiar y pegar
  • Indicar directamente la URL cuando se trata de analizar un documento web ya publicado.

Herramientas de optimización de código propuestas por Google

herramientas-optimización-page-speed-insights
Herramientas para la optimización de código propuestas por Google Page Speed Insights

Si alguien tiene la voz cantante en Internet y la Web son las comunidades de desarrolladores que usan herramientas como GHITUB y la propia industria que después hace con los stándares lo que les da la gana.

Si a la industria no le interesa una norma, pues no la tienen en cuenta. Así de fácil y sencillo. Si tenéis curiosidad investigar un poco que pasó con el XHTML 2.0 entre 2002 y 2006. Una guerra apasionante entre el W3c y el WHATG que mencionábamos anteriormente.

Considerar que quien interpreta nuestros documentos webs son los navegadores y que estos normalmente son desarrollados por empresas privadas.  Tenemos el Chrome de Google, Safari de Apple, Explorer de Microsoft, …. Y no tenemos ningún navegador oficial del W3C (¿si existe alguien me puede pasar el enlace?).

En este enlace Google nos indica todo aquello que debemos tener en cuenta para validar, minificar y optimizar nuestro código y nos propone una serie de herramientas que nos llevan a Ghitub y a su vez de nuevo al W3C.

Otro recurso interesante es el validador de datos estructurados de Google. Pero en esto ya profundizaremos más adelante.

¡Hagámosle caso pues!

Entradas relacionadas:

Enlaces en html: la etiqueta a
- 152
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Qué es un favicon y para que sirve
- 101
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Introducción al HTML
- 533
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Etiquetas audio y video de html5
- 25
Resumen de clase de las etiquetas audio y video html5. Apuntes html del certifiado de profesionalidad IFCD01110
La importancia de la etiqueta < title > para el SEO
- 129
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Meta etiquetas en HTML : meta tags
- 479
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Resumen de atributos html para ayudarnos a memorizar
- 196
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Imágenes en html: la etiqueta img
- 358
Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta de html se propuso por primera vez en 1993 por Marc Andreessen. En esta entrada presentamos la etiqueta...
Etiquetas básicas introductoras al html5
- 609
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.