Corso di HTML / Individuare errori e validare documenti HTML

La convalida HTML aiuta a trovare errori di markup che un browser può correggere silenziosamente, come attributi formattati in modo errato, tag di chiusura inaspettati o ID duplicati. Dopo aver corretto i problemi segnalati, verificate sempre il contenuto e le interazioni effettive della pagina in un browser.

Salvare e controllare prima la pagina

Salvate il file HTML corrente e apritelo in un browser. Controllate se intestazioni, paragrafi, link, immagini e moduli compaiono dove vi aspettate. Una pagina visibile non è una prova che la sua marcatura sia valida: i browser possono correggere determinati errori e mostrare un risultato diverso dalla struttura pianificata.

Eseguire il Nu HTML Checker

Il Nu HTML Checker può controllare un URL pubblico, un file caricato o markup inserito. Per un documento locale o non pubblicato, utilizzate il caricamento del file o l'inserimento diretto. Non caricate file sorgente contenenti password o dati personali su un servizio di convalida pubblico. Le regole attualmente convalidate per tag e attributi sono introdotte in Sintassi HTML.

1. Salvate l'ultima versione del file HTML.
2. Scegliete il metodo di input appropriato e avviate il controllo.
3. Leggete ogni messaggio e verificate la posizione segnalata, così come i tag di apertura e chiusura circostanti.
4. Correggete il file, salvatelo e quindi avviate nuovamente la verifica.

Iniziate dal primo errore segnalato se vengono mostrati più messaggi. Un singolo attributo formattato in modo errato può causare più messaggi successivi. La riga in cui viene rilevato un errore non deve essere necessariamente quella che lo ha causato; ad esempio, una virgoletta non chiusa può far sembrare che il tag successivo sia non valido. Assicuratevi di caricare la revisione salvata invece di convalidare più volte un file vecchio.

Ad esempio, questo codice ripete un id:

<label for="email">E-mail</label>
<input id="email" name="email" type="email">
<label for="email">Conferma e-mail</label>
<input id="email" name="email_check" type="email">

Cambiate l'ID del secondo campo in email-check e aggiornate l'attributo for dell'etichetta in modo che corrisponda. Quindi verificate che l'errore di ID duplicato sia scomparso e che ogni etichetta indirizzi il focus al proprio campo. La mancanza di un tag di chiusura non è sempre un errore: alcuni elementi, inclusi li in determinati contesti, possono omettere il loro tag di chiusura secondo le regole HTML.

La verifica degli esempi completi con il Nu HTML Checker ha restituito Duplicate ID “email”. per il documento errato e nessun errore per la correzione. Confrontate separatamente le interazioni delle etichette; ulteriori diagnosi possono variare con gli aggiornamenti del validatore o in base al contenuto dei file.

Confrontare un documento errato con la sua correzione

L'esercizio di convalida seguente ripete intenzionalmente un ID. Salvatelo come invalid.html e controllatelo usando la modalità di immissione del testo o di caricamento file del Nu HTML Validator. Questo è un caso di test fallito e non un codice da utilizzare direttamente.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Esercizio di convalida dei documenti</title>
</head>
<body>
  <h1>Esercizio di convalida delle etichette</h1>
  <form method="get">
    <p><label for="email">E-mail</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email">Conferma e-mail</label>
      <input id="email" name="email_check" type="email"></p>
    <button type="submit">Verificare i valori inseriti</button>
  </form>
</body>
</html>

Cercate il messaggio diagnostico per l'uso doppio di email come ID. Un browser può comunque mostrare due campi, ma l'ID duplicato impedisce un'associazione univoca di ogni etichetta al suo campo. Il documento corretto modifica il secondo campo e l'obiettivo dell'etichetta in email-check.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Esercizio di convalida dei documenti</title>
</head>
<body>
  <h1>Esercizio di convalida delle etichette</h1>
  <form method="get">
    <p><label for="email">E-mail</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email-check">Conferma e-mail</label>
      <input id="email-check" name="email_check" type="email"></p>
    <button type="submit">Verificare i valori inseriti</button>
  </form>
</body>
</html>

1. Salvate la correzione come valid.html e convalidate l'ultimo file anziché la copia precedente.
2. Fate clic su ogni etichetta e confrontate quale campo di input riceve il focus. Se si modifica un ID senza aggiornare l'attributo for, l'associazione rimane errata.
3. Dopo aver risolto la diagnosi, verificate sempre le destinazioni, il contenuto e l'uso della tastiera. Registrate i risultati per sintassi e facilità d'uso separatamente.

Non confondete un esempio intenzionalmente fallito con una formattazione errata nell'articolo stesso. Un blocco di codice può mostrare la stringa che riproduce un errore; il documento di convalida è il documento indipendente creato da questo esempio.

La convalida è solo un tipo di verifica

Un controllore della sintassi non può garantire che un link conduca all'articolo corretto, che il testo alternativo descriva correttamente un'immagine o che un server elabori correttamente un modulo. Aprite i link, utilizzate la pagina con una tastiera e verificate una finestra di visualizzazione stretta. In caso di assenza di media, esaminate i percorsi, le risposte del server e i formati supportati, nonché la marcatura. Applicate sia controlli di sintassi sia veri test di navigazione in Creazione di un piccolo sito web multipagina.

Distinguete ciò che avete verificato: un caricamento di file controlla il file, mentre un controllo URL esamina il documento effettivamente restituito dal server. In WordPress un tema circonda il corpo dell'articolo, quindi controllare un frammento di manoscritto e controllare la pagina completamente pubblicata può dare risultati diversi. Separate i problemi nell'articolo da quelli introdotti dal tema o da un plugin.