HTML Viewer and Formatter

See how an HTML fragment renders, reformat it, and check its structure and nesting.

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.
                    

                    
                    
                

            

        


        

    



    


    



    
        
    

    
        
    

    
        
    

    
        
    

    




        

            
What it is for


You often end up with a fragment of HTML — a service response, the contents of
a field, a piece of a template — and want to know two things: how it renders, and
whether it is well formed. This tool answers both, showing the preview next to
the reformatted source.



Why the preview sits in a separate frame


Rendering someone else's HTML inside the page would run any scripts it
contains with the site's permissions: they could read cookies, including the
session cookie of an administrator who happened to be using the tool. That would
be building a vulnerability into the product for convenience.


The preview therefore lives in an isolated frame, in an origin separate from
ours. Scripts are disabled by default and can be enabled explicitly: even then
they stay confined and cannot read anything from this page.



The nesting check


Browsers silently repair malformed markup: an unclosed <div>
gets closed wherever it needs to be, and the page appears to work. The most
reliable way to notice is to compare what the browser gives back with what was
written: if they differ, something was repaired — and so it was broken. Alongside
you also get a raw count of openings against closings, which tells you which tag
to look at.



Formatting


Indentation follows nesting, and the contents of script,
style, pre and textarea are left exactly
as they are: there, whitespace is content rather than presentation, and
reformatting it would change what you see.

        


    


    



    
Frequently asked questions


    

            

                

                    
                

                

                    
The preview is confined to an isolated frame with no access to this page, and scripts are disabled until you enable them. Even then they stay in a separate origin and cannot read the site's cookies.

                

            

            

                

                    
                

                

                    
Because the browser has already fixed them. Comparing what you wrote with what the browser gives back is precisely how a silent repair becomes visible.

                

            

            

                

                    
                

                

                    
The preview is a page of its own: relative references resolve to nothing, while absolute ones are fetched by the browser as any page would.