Curso de HTML / Encontrar errores y validar un documento HTML

La validación HTML ayuda a localizar errores de marcado que un navegador puede reparar silenciosamente, como atributos mal formados o identificadores duplicados. Después de corregirlos, sigue siendo necesario revisar el contenido, los destinos y las interacciones en el navegador. Mostrar una página sin errores visibles no demuestra que su estructura sea correcta.

Guardar y revisar antes de pasar el comprobador

Guarda la versión actual y abre el documento. Comprueba encabezados, párrafos, enlaces, imágenes y controles. Si el resultado parece razonable, recuerda que el navegador puede haber construido una estructura distinta de la que pretendías.

La revisión de la sintaxis de HTML permite interpretar etiquetas y atributos. Un cierre opcional permitido por las reglas no es lo mismo que un cierre incorrecto. Tampoco debes diagnosticar toda etiqueta breve como un error sin conocer su contexto.

Elegir el documento que vas a validar

Nu HTML Checker admite una URL pública, un archivo o texto pegado. Para un documento local o sin publicar, utiliza el archivo o la entrada directa. No envíes a un servicio público fuentes que contengan contraseñas o información personal.

Guarda primero el archivo, elige el modo de entrada y ejecuta la revisión. Examina el primer mensaje y su ubicación, además de las líneas anteriores. Una comilla sin cerrar puede hacer que varios elementos posteriores parezcan incorrectos.

Corrige la fuente, vuelve a guardarla y entrega al comprobador la revisión actual. Validar repetidamente una copia antigua no permite evaluar tu corrección. Las indicaciones exactas pueden cambiar con las actualizaciones del comprobador.

Identificar una asociación rota por un ID duplicado

Este fragmento repite id="email" y utiliza el mismo destino en dos labels:

<label for="email">Email</label>

<input id="email" name="email" type="email">

<label for="email">Confirm email</label>

<input id="email" name="email_check" type="email">

El hecho de que se vean dos campos no crea dos identificadores diferentes. Para corregirlo, cambia el segundo ID a email-check y modifica también el for de su etiqueta. No cambies solo uno de los dos, porque dejarías otra asociación incorrecta.

Comparar un documento incorrecto y su corrección

Guarda el siguiente ejemplo como invalid.html. El ID repetido es intencionado para reproducir el error; no es una versión que debas desplegar tal como está.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document-validation practice</title>
</head>
<body>
  <h1>Label-validation practice</h1>
  <form method="get">
    <p><label for="email">Email</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email">Confirm email</label>
      <input id="email" name="email_check" type="email"></p>
    <button type="submit">Inspect entered values</button>
  </form>
</body>
</html>

Busca la indicación relativa al identificador email duplicado. Después guarda el siguiente documento como valid.html y valida esa nueva versión:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document-validation practice</title>
</head>
<body>
  <h1>Label-validation practice</h1>
  <form method="get">
    <p><label for="email">Email</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email-check">Confirm email</label>
      <input id="email-check" name="email_check" type="email"></p>
    <button type="submit">Inspect entered values</button>
  </form>
</body>
</html>

La corrección asigna un identificador distinto al segundo campo y actualiza la etiqueta correspondiente. Comprueba que desaparece el diagnóstico del ID duplicado. Luego selecciona cada label y observa qué campo recibe foco: el resultado del comprobador y la asociación durante el uso son comprobaciones distintas.

Los bloques que reproducen errores pueden contener marcado incorrecto como texto de enseñanza. No confundas ese caso deliberado con una estructura accidentalmente rota del propio artículo.

Decidir qué corregir primero

Corrige una causa y vuelve a comprobar antes de tratar todos los mensajes como problemas independientes. Al conservar una copia del archivo y una lista de cambios puedes reconocer qué modificación eliminó o introdujo un diagnóstico.

Separar sintaxis, contenido y uso

Un comprobador no garantiza que un enlace lleve al artículo adecuado, que una alternativa describa bien una imagen ni que un servidor acepte un formulario. Prueba enlaces y teclado; para medios ausentes, revisa rutas, respuestas y formatos además del marcado.

Una validación por archivo revisa ese archivo; una validación por URL revisa lo que devuelve el servidor. En WordPress, el tema y los plugins añaden estructura alrededor del cuerpo del artículo. Por eso un fragmento de manuscrito y una página completa pueden producir resultados distintos: identifica dónde se originó cada problema antes de cambiar contenido ajeno.

El proyecto de un sitio de varias páginas combina la comprobación de los archivos con sus rutas, metadatos y controles. Mantén separados los resultados sintácticos y los de funcionamiento para saber qué has confirmado realmente.