Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 17 · Semana 6

Validar y depurar HTML

Hoy · Hoja de ruta

  1. 1. Aprende: Los niveles de comprobación de un documento, qué ve cada uno y qué no ve ninguno.
  2. 2. Haz: Localiza y repara los veinte fallos deliberados de un documento.
  3. 3. Comprueba: El validador del W3C devuelve cero errores.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Por qué un botón nativo suele ser mejor que un div con ARIA?
  2. ¿Qué debe ocurrir al recorrer una página únicamente con Tab?
  3. Ordena el diagnóstico: mirar el resultado, revisar Problemas y validar el documento.

Volvemos a la frase de la sesión 2

Que una página se vea bien no demuestra que su HTML esté bien.

Los navegadores se recuperan de casi cualquier error para no fallar delante del usuario. Eso es cómodo y, a la vez, es lo que oculta el código incorrecto. Necesitamos herramientas que no perdonen.

Cada comprobación ve cosas que la anterior no
  1. El navegador · solo delata lo que no consigue disimular
  2. HTMLHint · avisa mientras escribes, dentro del editor
  3. El validador del W3C · dictamina si el documento cumple la especificación
  4. Tu criterio · lo único que juzga si el marcado significa lo correcto

HTMLHint

Mira el panel Problems. No ignores automáticamente los mensajes: para cada uno, tres preguntas.

  1. ¿Qué elemento provoca el problema?
  2. ¿Qué regla estoy incumpliendo?
  3. ¿Cómo debería solucionarse?

Formatear el documento

VS Code puede formatear HTML con Shift + Alt + F, o desde la paleta con Format Document. Compara:

<main><section><h2>Productos</h2><p>Texto</p></section></main>

con:

<main>
    <section>
        <h2>Productos</h2>

        <p>
            Texto
        </p>
    </section>
</main>

Las dos son idénticas para el navegador. La segunda es la única legible para una persona, y el código también se escribe para personas: para tu compañero de revisión, para el profesor y para ti dentro de tres semanas.

El validador del W3C

El flujo de trabajo correcto es este:

Cómo se depura un documento
  1. Escribir
  2. Previsualizar
  3. Revisar el panel Problems
  4. Validar en el W3C
  5. Entender los errores
  6. Corregir

El flujo que no queremos

Validar, copiar el error en una IA, pegar cualquier respuesta, repetir hasta que se ponga verde. Se termina antes y no se aprende nada, porque el paso que importa —entender— es justo el que se ha saltado.

La herramienta debe ayudarte a comprender el documento, no a esquivarlo.

Válido no significa correcto

Un validador detecta Un validador no detecta
Etiquetas sin cerrar o mal anidadas Que hayas usado div donde tocaba nav
Atributos que no existen Que un alt diga «foto» en lugar de describir algo
id duplicados Que hayas saltado de h1 a h4
Anidaciones prohibidas Que un catálogo esté marcado como tabla

Un documento entero hecho de <div>, sin un solo encabezado y con todas las imágenes con alt="foto", pasa el validador con cero errores. Es válido y es malo. La validez es el suelo, no el techo.

Tarea 14 · HTML forense

Este documento contiene veinte fallos deliberados. Cópialo en forense.html:

<html>
<head>
<title>PixelStore
</head>
<body>
<div class="cabecera">
<img src="C:\Users\pixel\logo.png">
<div class="menu">
<a href="C:\Users\pixel\web\index.html">Inicio</a>
<a href="productos.html">Productos</a>
<a href="https://proveedor.example.com" target="_blank">Proveedor</a>
</div>
</div>

<h1>PixelStore</h1>
<h4>Novedades del catálogo</h4>

<p id="destacado">Portátil Nova 14 <b><i>en oferta</b></i></p>
<p id="destacado">Teclado para Programación avanzada</p>

<img src="grafico-consumo.webp">

<table>
<tr><td>Modelo</td><td>RAM</td><td>Precio</td></tr>
<tr><td>Básico</td><td>8 GB</td><td>19 €</td></tr>
</table>

<form>
Correo: <input type="text">
<div onclick="enviar()">Enviar</div>
</form>

<p>© 2026 PixelStore
</body>
</html>

Tu trabajo:

  1. Ábrelo en el navegador y anota qué se ve mal antes de mirar el código. Fíjate en si algún texto aparece con caracteres extraños.
  2. Pásale HTMLHint y anota qué encuentra.
  3. Pásalo por validator.w3.org y anota qué encuentra que HTMLHint no encontró.
  4. Localiza al menos quince de los veinte fallos y repáralos.
  5. Entrega una tabla justificativa:
Fallo detectado Línea Quién lo detectó A quién perjudica Corrección aplicada

La columna «quién lo detectó» es la importante: al terminar tendrás la prueba, escrita por ti, de que las herramientas encuentran menos de la mitad.

Objetivo mínimoEncuentra quince fallos y documenta herramienta, impacto y corrección.
Si lo tienesLocaliza los veinte y clasifícalos en sintaxis, semántica y accesibilidad.
RetoIntroduce tres fallos nuevos en una copia para que otro compañero los diagnostique.
Estoy atascado · llevo ocho y no encuentro más

Recorre el documento con una lista en la mano, en este orden, en lugar de buscar «a ver qué veo»:

  1. El esqueleto: ¿están las cinco piezas de la sesión 3?
  2. Los enlaces: ¿alguna ruta describe tu disco duro? ¿Algún target="_blank" sin protección?
  3. Las imágenes: ¿todas tienen alt?
  4. Los encabezados: ¿empiezan en h1 y bajan de uno en uno?
  5. Los identificadores: ¿hay algún id repetido?
  6. La anidación: ¿se cierran en orden inverso al que se abrieron?
  7. La tabla: ¿tiene caption, thead, th y scope?
  8. El formulario: ¿etiquetas, name, tipos y botón de verdad?
  9. La estructura: ¿hay header, nav, main y footer, o solo div?
Ver los veinte fallos

Esqueleto

1 · Falta <!doctype html>. · 2 · Falta lang="es". · 3 · Falta <meta charset="UTF-8">: por eso «Programación» se ve mal. · 4 · Falta <meta name="viewport">. · 5 · <title> sin cerrar.

Enlaces e imágenes

6 · src de la primera imagen con ruta de disco local. · 7 · href del enlace de inicio con ruta de disco local. · 8 · target="_blank" sin rel="noopener noreferrer". · 9 · La primera imagen no tiene alt. · 10 · La segunda tampoco, y además es un gráfico: su alt debe llevar los datos.

Texto y estructura

11 · Salto de jerarquía: de h1 a h4. · 12 · id="destacado" duplicado. · 13 · Anidación cruzada: <b><i>…</b></i>. · 14 · Último <p> sin cerrar. · 15 · Cabecera y menú son div: deberían ser <header> y <nav> con una lista. · 16 · No hay <main> ni <footer>.

Tabla y formulario

17 · La tabla no tiene <caption>, ni <thead>/<tbody>, ni <th scope>. · 18 · El campo de correo no tiene <label>. · 19 · No tiene name y usa type="text" en vez de type="email". · 20 · El botón de envío es un <div onclick>.

El validador del W3C detecta la sintaxis: el doctype que falta, la codificación no declarada, el <title> abierto, las imágenes sin alt, el id duplicado y la anidación cruzada. No dice nada de la jerarquía de encabezados, ni de la tabla muda, ni del falso botón, ni de la sopa de div. Poco más de la mitad la tienes que ver tú.

Antes de cerrar · 2 minutos, sin mirar

  1. Nombra dos fallos graves que un validador no detecta.
  2. ¿Por qué «válido» no es lo mismo que «correcto»?
  3. ¿Qué pasos tiene el flujo de depuración, y cuál es el que no se puede saltar?
Ver respuestas

1 · Por ejemplo, usar div donde tocaba un elemento semántico, o un alt que no describe nada.

2 · Porque la validez comprueba la sintaxis, no el significado.

3 · Escribir, previsualizar, revisar Problems, validar, entender y corregir. El que no se puede saltar es entender.