Incolla l'HTML e visualizzalo in tempo reale a qualsiasi larghezza di schermo, poi ordinalo, riducilo o verifica la presenza di problemi.
Larghezza
HTML
Anteprima
Premi Ispeziona per il conteggio degli elementi, la struttura delle intestazioni e un elenco dei problemi nel markup.
Problemi
Struttura intestazioni
Tag più usati
L'output della console dall'anteprima appare qui quando l'esecuzione degli script è consentita.
Informazioni Visualizzatore HTML
Un modello di email, un frammento da un ticket, un report esportato: a volte serve solo vedere come appare un pezzo di HTML. Incollalo e viene visualizzato mentre scrivi, dentro un riquadro isolato, alla larghezza di schermo che scegli. Accanto all'anteprima puoi riordinarlo, ridurlo, eseguirne gli script con una console e vedere un elenco di ciò che è davvero sbagliato nel markup.
Cosa fa
Anteprima live mentre scrivi; oltre 200.000 caratteri si mette in pausa finché non premi Aggiorna.
Dimensioni di anteprima telefono, tablet, desktop e larghezza piena, più lo schermo intero.
Gli script sono disattivati per impostazione predefinita; attivali e vedi output della console ed errori.
Formatta markup disordinato o minificalo, senza toccare il contenuto di pre, script o style.
Un report di ispezione: conteggio degli elementi, struttura dei titoli e problemi concreti.
Apri un file .html locale, copia il risultato o scaricalo.
Come funziona
1Incolla HTML, apri un file .html o carica l'esempio.
2Scegli una larghezza di anteprima e decidi se gli script possono essere eseguiti.
3Formatta, minifica o ispeziona, poi copia o scarica il risultato.
Perché l'anteprima è in sandbox
L'HTML incollato può contenere script, moduli e link che non hai scritto tu. L'anteprima gira in un iframe sandbox con una propria origine opaca, quindi nulla al suo interno può leggere i cookie di questo sito o la tua sessione, inviare dati a tuo nome o far navigare altrove questa pagina. Gli script restano disattivati finché non li attivi.
Cosa controlla l'ispezione
Legge il markup con un parser HTML standard e riporta solo ciò che ha visto: tag aperti e mai chiusi, tag di chiusura senza apertura, immagini senza testo alternativo, id duplicati, link che aprono una nuova scheda senza rel="noopener", livelli di titolo saltati, risorse caricate via http:// e, per una pagina completa, l'assenza di doctype, title, lang o tag viewport.
Cosa il controllo ignora di proposito
Segnala errori, non lo stile. I tag di chiusura che lo standard HTML permette di omettere, come </p>, </li>, </td>, </tr> e </option>, non vengono mai elencati come non chiusi, e gli elementi vuoti come <br>, <img> e <input> non hanno tag di chiusura. Un alt="" vuoto conta come testo alternativo, ed è corretto per un'immagine decorativa. Un link con target="_blank" passa con rel="noopener" o rel="noreferrer". Un normale link http:// in <a href> non è considerato insicuro; lo sono solo le risorse caricate, come immagini, script, fogli di stile e iframe. Risalire tra i livelli di titolo (da h4 a h2) va bene; viene segnalato solo un salto verso il basso che salta un livello (da h2 a h4). I controlli su doctype, title, lang e viewport partono solo se il testo incollato è una pagina intera, cioè ha un doctype o un tag html, head o body, quindi un blocco di email o un frammento di CMS non viene penalizzato.
Controllare un'email HTML prima di inviarla
Guardala prima a larghezza Telefono (375 px), perché molte persone aprono la posta dal telefono, poi a Tablet (768 px) e Desktop (1280 px). Lascia gli script disattivati: i programmi di posta non eseguono JavaScript, quindi l'anteprima senza script è più vicina a ciò che vede il lettore. Usa URL di immagini assolute con https://, perché né l'anteprima né il programma di posta del destinatario vedono i file sul tuo computer. Minifica rimuove i commenti normali ma conserva i commenti condizionali che iniziano con <!--[if, come <!--[if mso]> ... <![endif]-->. Non conserva la chiusura <!--<![endif]--> dello schema <!--[if !mso]><!-->, quindi non minificare un modello che lo usa, altrimenti Outlook può nascondere tutto ciò che segue. L'anteprima è quella di un browser; Outlook classico per Windows disegna le email con il motore di Word, quindi inviati una prova lì prima di un invio massivo.
Domande
Il mio HTML viene caricato o salvato?
Anteprima, formattazione e minificazione avvengono nel tuo browser. Solo il report di ispezione invia il markup al server, dove viene analizzato e restituito nella stessa risposta: nulla viene scritto su disco o registrato, e i dati di utilizzo contengono solo conteggi.
Perché i miei script non vengono eseguiti?
Gli script sono disattivati per impostazione predefinita perché il codice incollato non è affidabile. Spunta "Esegui script" e l'anteprima si ricarica con JavaScript attivo, sempre dentro la sandbox, e l'output della console compare sotto l'anteprima.
Perché immagini o fogli di stile relativi non si caricano?
L'anteprima è costruita dal testo incollato, non dal tuo computer né dal tuo server, quindi un percorso relativo come images/logo.png viene cercato su questo sito e non viene trovato. Usa URL assoluti oppure aggiungi un tag <base href="..."> che punti a dove si trovano davvero i file.
La formattazione cambia l'aspetto della pagina?
Reindenta solo tra i tag e lascia intatto il contenuto di pre, textarea, script e style. Lo spazio tra elementi inline può a volte spostarsi leggermente, quindi controlla l'anteprima dopo la formattazione.
Quanto può essere grande un documento?
Il report di ispezione accetta fino a 1.000.000 di caratteri ed elenca al massimo 200 problemi. L'anteprima live si mette in pausa oltre 200.000 caratteri per mantenere la digitazione fluida; premi Aggiorna o Ctrl+Invio per aggiornarla.
Posso visualizzare l'anteprima di un modello di email HTML?
Sì. Incolla l'HTML dell'email o apri il file .html, imposta la larghezza su Telefono (375 px) e Desktop (1280 px) per vedere entrambi i layout e premi Ispeziona per trovare immagini senza testo alternativo e risorse caricate tramite http:// non cifrato. L'anteprima usa il motore del tuo browser, mentre ogni client di posta usa il proprio e molti scartano parte del CSS: mostra quindi più o meno ciò che mostra una webmail nel browser, non esattamente ciò che vedrà ogni casella. I client di posta non eseguono JavaScript, quindi lascia disattivato Esegui script. Prima dell'invio vero, manda una prova ai client usati dai tuoi lettori.
È sicuro aprire un file HTML che mi hanno inviato?
Più sicuro che aprirlo direttamente. Apri file lo carica nell'editor del tuo browser, e nulla arriva al server finché non premi Ispeziona. L'anteprima è un riquadro isolato con script e invio dei moduli disattivati, quindi la pagina non può eseguire codice, inviare un modulo né accedere ai cookie di questo sito. Le immagini e i fogli di stile con un indirizzo http(s) completo si caricano comunque, quindi il mittente può capire che il file è stato aperto. Leggi prima il codice, lascia Esegui script disattivato e non digitare mai una password in una pagina ricevuta.
Perché le lettere accentate diventano � quando apro un file?
Apri file legge sempre il file come UTF-8 e ignora l'eventuale tag <meta charset> al suo interno. Una pagina salvata in Windows-1252 o ISO-8859-1, frequente con vecchi editor ed esportazioni di Windows, memorizza lettere come à, è e ù con byte che non sono UTF-8 valido, quindi ognuna appare come il carattere sostitutivo �. Apri il file nel tuo editor, salvalo di nuovo come UTF-8 (Blocco note: Salva con nome, Codifica UTF-8; VS Code: fai clic sulla codifica nella barra di stato, poi Salva con codifica) e riaprilo qui. In alternativa apri il file nel browser, visualizzane il sorgente e incollalo qui: il browser l'ha già decodificato con il charset della pagina.
Perché un modulo o un link che apre una nuova scheda non fa nulla nell'anteprima?
La sandbox non consente mai l'invio di moduli né i pop-up, nemmeno con Esegui script attivo: premere Invia non invia nulla e i link con target="_blank" o le chiamate window.open() vengono bloccati. Così una pagina incollata non può inviare dati né aprire altri siti. I link normali si aprono dentro il riquadro dell'anteprima, e i siti che rifiutano di essere incorniciati appaiono vuoti o rifiutati. Per controllare un modulo, leggi action, method e campi nel sorgente; Ispeziona elenca anche ogni link target="_blank" senza rel="noopener". Prova l'invio reale sul tuo server di sviluppo.