El validador de marcado del W3C
Encuentre y corrija errores HTML con el servicio de validación de marcado del W3C
El validador de marcado del W3C es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Qué comprueba el validador
El W3C Markup Validator (validator.w3.org) analiza el HTML conforme a la especificación oficial e informa de cada incumplimiento: etiquetas sin cerrar, anidamiento no válido (un <p> dentro de otro <p>), atributos obligatorios ausentes (img sin alt), elementos no reconocidos y muchos casos más.
Por qué importa la validación
El HTML no válido puede mostrarse hoy en cualquier navegador, pero cada navegador puede recuperarlo de forma diferente; lo que parece correcto en Chrome puede fallar en Firefox. El HTML válido produce una representación predecible y coherente, y evita comportamientos inesperados en lectores de pantalla, rastreadores de búsqueda y clientes de correo.
Tres formas de enviar contenido
Puede validar mediante URL (pegue la URL de la página), mediante la carga de un archivo o mediante entrada directa (pegue el HTML). La URL es la mejor opción para páginas en producción; la entrada directa resulta útil durante el desarrollo, cuando el archivo todavía no está disponible en ningún sitio.
Lectura de los resultados
Los errores indican un número de línea, un fragmento del marcado problemático y una explicación. Corríjalos de arriba abajo, ya que muchos errores son consecuencias en cadena de un único error anterior. Después de corregir los primeros, vuelva a ejecutar el validador para comprobar cuántas advertencias siguen siendo legítimas.
Advertencias frente a errores
Los errores son incumplimientos de la especificación que pueden romper la representación. Las advertencias son patrones sospechosos que técnicamente son válidos, pero probablemente no intencionados (nombres de atributos que parecen errores tipográficos, indicios de accesibilidad). Trate los errores como obligatorios de corregir y las advertencias como dignas de investigación.
Errores comunes
Falta el atributo alt en img. Etiqueta autocontenida sin cerrar (<br> en lugar de la forma heredada <br/>, que también es válida). Hay un id duplicado en la página. Etiqueta de formulario sin un atributo for que coincida con el id de un campo de entrada. Elementos interactivos anidados (un botón dentro de un a). Estos cinco casos representan la mayoría de los resultados del validador.
Validación de plantillas
Si su HTML se genera mediante plantillas, valide el resultado final (la página renderizada) en lugar del código fuente de la plantilla. Un marcador de posición {{ }} no es HTML válido; solo importa lo que produce el motor. Ejecute el validador en CI sobre páginas renderizadas a partir de una compilación de prueba.
CLI de html-validate
Para integrarlo en CI, utilice el paquete npm html-validate: npx html-validate "public/**/*.html" valida todas las páginas de una compilación. Configure las reglas en .htmlvalidate.json. Utilícelo para hacer que las compilaciones fallen cuando se produzcan regresiones de validación.
Stylelint y linting en el código fuente
El linting durante la escritura (stylelint para CSS, eslint-plugin-jsx-a11y para React) detecta muchos problemas antes de que lleguen al validador. Combínelo con una validación integral en CI para contar con una defensa por capas: detecte la mayoría de los problemas pronto y el resto antes del despliegue.
Lo que la validación NO detecta
La validación comprueba la corrección del marcado, no la semántica. Una página en la que todos los encabezados sean <h6> contiene HTML válido, pero tiene una semántica deficiente. Las auditorías de accesibilidad de Lighthouse y la revisión manual detectan problemas semánticos que el validador no detecta.
Advertencia sobre Quirks Mode
La ausencia de <!doctype html> activa Quirks Mode: los navegadores utilizan una capa heredada de compatibilidad que rompe el CSS moderno. El validador señala la ausencia del doctype como el primer error; nunca despliegue una página sin la declaración doctype.
Validación continua
Ejecute la validación en cada PR mediante GitHub Actions: instale html-validate, ejecútelo sobre el sitio compilado y haga que el PR falle si hay errores. Los errores nuevos se detectan durante la revisión en lugar de acumularse durante meses hasta resultar abrumadores de corregir retroactivamente.
Comprobación de conocimientos
¿Por qué es tan importante para W3C Markup Validator que falte la declaración <!doctype html>?
Resumen
W3C Markup Validator analiza el HTML según la especificación e informa sobre el marcado no válido. Utilícelo mediante la interfaz web para comprobaciones puntuales y mediante la CLI de html-validate en CI para obtener cobertura continua. Problemas comunes: ausencia de alt, ids duplicados, ausencia del doctype y elementos interactivos anidados. La validación detecta errores de marcado; combínela con Lighthouse y una revisión manual para garantizar la calidad semántica y de accesibilidad.
Preguntas frecuentes
¿La lección «El validador de marcado del W3C» es gratis?
Sí — el texto completo de «El validador de marcado del W3C» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El validador de marcado del W3C»?
Encuentre y corrija errores HTML con el servicio de validación de marcado del W3C Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El validador de marcado del W3C»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El validador de marcado del W3C
- Auditoría HTML con Lighthouse
- Pa11y y axe para pruebas de accesibilidad
- Pruebas de instantáneas HTML