✅ Validator W3C: Guía paso a paso para validar tu HTML como un pro

Si quieres que tu sitio sea sólido, accesible y fácil de mantener, validar tu HTML con el W3C es un paso clave. En esta guía rápida te muestro cómo usar validator.w3.org, por qué muchas veces te envía al Nu HTML Checker, y cómo interpretar y corregir errores típicos sin drama.

Índice

¿Qué es validator.w3.org y qué valida?

validator.w3.org es el Servicio de Validación de Marcado del W3C. Revisa tu documento contra las especificaciones oficiales de HTML (y algunos perfiles XML/XHTML).

Nota actual: el W3C mantiene el Nu HTML Checker (HTML Living Standard) como la fuente más actual. Muchas rutas del validador clásico te llevan a https://validator.w3.org/nu/. Resultado: obtienes validaciones alineadas con el estándar vivo de HTML.

¿Qué no hace? No mide rendimiento, SEO o CSS (para CSS existe otro validador). Su foco es la validez del marcado HTML y ciertas buenas prácticas relacionadas.

Cuándo usarlo

  • Antes de lanzar a producción.
  • Al migrar plantillas, frameworks o CMS.
  • Tras cambios grandes de contenido o de build (SSR/SSG).
  • Cuando algo “extraño” pasa: layout roto, JS falla por DOM inesperado, lectores de pantalla se pierden.

Cómo validar tu HTML (3 métodos)

1) Por URL

  1. Ve a https://validator.w3.org/ o directo al Nu Checker: https://validator.w3.org/nu/
  2. Pega la URL de la página y clic en Check.
  3. Revisa el reporte y localiza el fragmento con el error.

2) Subiendo un archivo

  1. Exporta tu HTML (ej.: /dist/index.html).
  2. En Validate by File Upload, carga el archivo y valida.

3) Pegando el código

  1. Copia tu HTML.
  2. En Validate by Direct Input, pégalo y valida (ideal para snippets o plantillas parciales).

Opciones y vistas útiles

  • Character Encoding y Doctype: forzar detección si falta en cabecera.
  • Mostrar fuente: ver HTML resaltado en el punto del error.
  • Outline: esquema de encabezados y landmarks.
  • Image report: lista alt y metadatos de imágenes.

Cómo leer el reporte: errores, advertencias e info

  • Error (rojo): rompe el estándar → corrígelo.
  • Warning (amarillo): no bloquea, pero es recomendable corregir.
  • Info (azul/gris): contexto o sugerencia.

Cada entrada incluye:

  • Mensaje claro.
  • Ubicación en el código.
  • Referencia al estándar.

Errores comunes y cómo solucionarlos

  1. Etiqueta sin cerrar / anidamiento inválido → revisa jerarquía.
  2. Atributos obsoletos (align, bgcolor) → reemplaza por CSS.
  3. IDs duplicados → cada id debe ser único.
  4. Falta lang o charset → <html lang="es"> y <meta charset="utf-8">.
  5. Imágenes sin alt → añade descripción o alt="" si es decorativa.
  6. Formularios sin label → asocia label e input.
  7. Atributos aria-* mal usados → verifica roles y estados correctos.
  8. Meta viewport ausente → <meta name="viewport" content="width=device-width, initial-scale=1">.
  9. Bloques interactivos anidados mal → reestructura markup.

Automatiza la validación (CI/CD)

A) vnu-jar (CLI oficial)

java -jar ~/bin/vnu.jar --skip-non-html --Werror ./dist