Visualizzatore e formattatore HTML

Vedi come viene reso un frammento HTML, riformattalo e controlla struttura e annidamento.

Web
Anche attivandoli, l'anteprima resta in un'origine separata e non può leggere nulla di questa pagina.
Elementi
Profondità massima
Tag più usati
Immagini senza alt
Errori di annidamento


            

Il codice colorato qui sopra, come frammento da incollare altrove: i colori sono negli attributi style e non serve alcun foglio di stile.

A cosa serve

Capita spesso di avere un frammento di HTML — una risposta di un servizio, il contenuto di un campo, un pezzo di template — e di voler sapere due cose: come viene reso, e se è scritto bene. Questo strumento risponde a entrambe, mostrando l'anteprima accanto al sorgente riformattato.

Perché l'anteprima sta in un riquadro separato

Rendere HTML altrui dentro la pagina significherebbe far girare i suoi eventuali script con i permessi del sito: potrebbero leggere i cookie, compreso quello di sessione di un amministratore che stesse usando lo strumento. Sarebbe costruirsi una vulnerabilità in casa, per comodità.

L'anteprima vive quindi in un riquadro isolato, in un'origine separata dalla nostra. Gli script sono disattivati per impostazione predefinita e si possono abilitare esplicitamente: anche in quel caso restano confinati e non possono leggere nulla di questa pagina.

Il controllo dell'annidamento

I browser correggono da soli il markup malformato: un <div> non chiuso viene chiuso dove serve, e la pagina sembra funzionare. Il modo più affidabile per accorgersene è confrontare ciò che il browser rimette in circolo con ciò che è stato scritto: se differiscono, qualcosa è stato riparato — e quindi era rotto. Accanto trovi anche il conteggio grezzo delle aperture contro le chiusure, che dice quale tag guardare.

La formattazione

Il rientro segue l'annidamento, e il contenuto di script, style, pre e textarea viene lasciato esattamente com'è: lì lo spazio è contenuto, non presentazione, e riformattarlo cambierebbe ciò che si vede.

Domande frequenti

L'anteprima è confinata in un riquadro isolato senza accesso a questa pagina, e gli script sono disattivati finché non li abiliti. Anche abilitandoli, restano in un'origine separata e non possono leggere i cookie del sito.

Perché il browser li ha già corretti da sé. Il confronto fra ciò che hai scritto e ciò che il browser rimette in circolo è proprio il modo per accorgersi di una riparazione silenziosa.

L'anteprima è una pagina a sé: i riferimenti relativi non trovano nulla, mentre quelli assoluti vengono caricati dal browser come farebbe qualunque pagina.