Home / Developer tools / HTML pretty print

HTML Pretty Print

Read HTML the way an editor shows it, with line numbers and colors. Good for code review, for finding the line in an error message, and for sharing a clear copy.

Formatted HTML


  
  

  

 





What you see


The code is formatted first, then drawn with line numbers and colors, so the structure is easy to follow:


    

  • Purple: tag names, and the doctype.
    • 

  • Amber: attribute names.
    • 

  • Blue: attribute values.
    • 

  • Orange: character entities such as & and  .
    • 

  • Gray italic: comments.
    • 



Why line numbers help


Validators and error messages point to a line and a column. When you pretty print first, line 87 is the same line for everyone who reads the result. With a minified page every error sits on line 1. The HTML formatter gives the same layout as plain text that you can edit.


Copy a clean version


The Copy button copies the code as plain text, without line numbers or colors. The only options on this page are the indent and the line width. For quotes, void tags, attribute layout and more, use the formatter.


Good for


    

  • Reviewing a snippet that was pasted into a chat or a ticket.
    • 

  • Learning how a page or a template is organized.
    • 

  • Showing a clear piece of markup in a tutorial or a bug report.
    • 



Related tools: the HTML beautifier for compressed input, the HTML minifier for the opposite job, the CSS pretty print and the JavaScript pretty print. The HTML formatting guide explains common conventions.



Frequently asked questions


What is HTML pretty print?
It means formatting HTML so it is easy to read, with indentation and each block element on its own line, and here also line numbers and colors.


Does the copy include line numbers?
No. The Copy button copies clean plain text.


What do the colors mean?
Purple is tag names, amber is attribute names, blue is attribute values, orange is entities, and gray italic is comments.


Can I change the layout?
You can change the indent and the line width here. The HTML formatter has all the other options.