HTML formatter
Indent HTML, including the JavaScript and CSS inside <script> and <style>, while leaving <pre> and <textarea> untouched.
Input
Result
The result will appear here.Server-rendered pages, email templates and HTML pulled out of a scraper usually arrive as one long line. This re-indents the markup with js-beautify's HTML beautifier and hands every inline <script> and <style> block to its JavaScript and CSS formatters, so the embedded code becomes readable too. Whitespace-sensitive elements are respected: the contents of <pre> and <textarea> stay exactly as they were, and inline elements such as <b> and <a> stay within their line of text.
How it works
- Long lines wrap at the column you choose; set it to 0 to never wrap.
- Attributes stay on the tag line by default, or go one per line — aligned, or with the closing bracket on a line of its own.
- <head> and <body> sit flush with <html> by default, the usual convention; switch on the indent option to nest them one level.
Where your data goes
Nowhere. This tool runs entirely in your browser: the text you paste is processed by the page and is never transmitted to a server or written to a log.
This tool is free and needs no account. Its results exist only in your open page and are not saved anywhere.
What it costs
This tool is free, with no sign-in and no points.
Common questions
- Will formatting change how my page renders?
- In almost every case, no. Whitespace between block elements does not affect layout, and inline elements are kept on their line so no gap appears between words. Content in <pre> and <textarea>, where whitespace is visible, is never touched.
- Does it work on JSX, Vue or Handlebars templates?
- js-beautify recognises Handlebars {{ }} and Django-style {% %} tags well enough to keep them intact. JSX and Vue single-file components need a formatter that actually parses them, such as Prettier, or the embedded expressions may be re-spaced incorrectly.
- Why does the output still have broken nesting?
- The beautifier re-indents what it is given and does not repair it. An unclosed <div> is indented as if it were still open, so the indentation of the output shows you exactly where the mistake is. Run the W3C validator if you need a formal verdict.
The open-source behind it
This tool runs on beautifier/js-beautify, released under MIT. If you need the same behaviour inside your own program, that is the library to reach for.
beautifier/js-beautifyAlso known as
- html formatter
- html beautifier
- format html online
- html pretty print
- indent html
- html prettify