Curso HTML 17. Estándares, validación y calidad del código

1. Introducción a los estándares web

Los estándares HTML son especificaciones normativas publicadas por el World Wide Web Consortium (W3C) y por WHATWG.
Su objetivo principal es garantizar interoperabilidad, accesibilidad y consistencia en la interpretación de las páginas web por parte de navegadores y agentes de usuario.

W3C HTML5 Recommendation: Define la sintaxis, elementos, atributos y comportamiento de HTML5.
WHATWG Living Standard: Evoluciona continuamente, incorporando cambios y correcciones de forma dinámica.

2. Beneficios de respetar los estándares

Compatibilidad: Navegadores modernos y futuros interpretan mejor un código estándar.
Accesibilidad: Permite a lectores de pantalla y dispositivos de asistencia entender correctamente la semántica.
Mantenibilidad: Equipo y automatismos (linters, validadores) pueden detectar y corregir errores.
SEO & Rendimiento: Los motores de búsqueda valoran marcado semántico y limpio.

3. Validación con el servicio W3C

La W3C Markup Validation Service analiza tu documento HTML y muestra errores y avisos.
También puedes usar la herramienta de línea de comandos vnu.jar para integrarlo en procesos CI/CD.

Ejemplo de validación online:

Subes tu archivo o apuntas a una URL. El validador devolverá una lista de errores.

Ejemplo de línea de comandos:

# Ejecutar vnu.jar localmente
java -jar vnu.jar --errors-only mi-pagina.html

4. Calidad del código HTML: normas y buenas prácticas

Doctype mínimo: Asegúrate de usar la declaración HTML5:
```
      
```
Codificación de caracteres: Defínela siempre:
```
      
```
Uso de etiquetas semánticas: Evita divs innecesarios; emplea <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
Atributos en minúsculas y comillas: Todos los atributos deben ir en minúscula y entre comillas dobles.
```
      
```
Alt siempre presente: Todos los <img> deben llevar alt para accesibilidad.
Validación de enlaces: Utiliza rutas relativas o absolutas correctas; comprueba que no existan enlaces rotos.
Indentación y legibilidad: Espacios o tabuladores de forma consistente, 2 o 4 espacios recomendados.
Comentarios semánticos: Usa comentarios sólo para explicar zonas complejas, no para ocultar código.
```
  
  

      
```

5. Errores típicos y cómo resolverlos

Error común	Mensaje del validador	Solución
Etiqueta no cerrada	End tag for “p” seen, but there were open elements.	Agregar </p> al final del párrafo.
Atributo redundante	The attribute “border” may not appear in tag “table”.	Usar CSS para estilos en lugar de atributos obsoletos.
Carácter no escapado	Bad character “&”.	Escapar como & o usar entidades HTML.

6. Integración con linters y herramientas CI

Para asegurar calidad continua, incorpora validación en tu flujo de trabajo:

Pre-commit hook con htmlhint o eslint-plugin-html.
Pipeline CI con npm run validate-html y vnu.jar.
Plugins de editores (VSCode, Sublime) para resaltado de errores en tiempo real.

Ejemplo de script en package.json:

{
  'scripts': {
    'validate-html': 'vnu.jar --errors-only src/**/*.html',
    'lint-html': 'htmlhint src/**/*.html'
  }
}

7. Calidad semántica y accesibilidad

Un HTML válido no es suficiente; debe ofrecer semántica y accesibilidad:

Roles ARIA cuando el elemento nativo no exista.
Tabindex lógico para navegación con teclado.
Etiquetas <label> vinculadas a formularios.



  Correo electrónico:

8. Resumen de buenas prácticas

Siempre validación HTML; corrige errores antes de pasar a producción.
Emplear elementos semánticos y atributos ARIA cuando proceda.
Usar herramientas automáticas (linters, CI) para mantener calidad.
Documentar decisiones complejas con comentarios.
Seguir guías de estilo internas (indentación, mayúsculas/minúsculas).

Con estos principios y herramientas podrás garantizar que tu código HTML no solo sea válido,
sino también accesible, mantenible y preparado para el futuro.

Curso HTML 17. Estándares, validación y calidad del código