OnlineConverTools
Sign in

HTML Formatter

Format and beautify HTML

About HTML Formatter

HTML Formatter re-indents a page or a fragment with js-beautify, the engine behind beautifier.io, in your browser. Nested elements get 2 spaces per level, and the content of <head> and <body> is indented too. Inline <script> and <style> blocks are formatted as JavaScript and CSS. Void elements such as <br> and <img> do not open a level, attributes are kept as written, and the content of <pre> and <textarea> is left exactly as typed, because whitespace there is visible. Long lines are not wrapped. It does not validate HTML: unclosed tags are formatted without a warning.

Example

A one-line snippet: the <pre> content keeps its spaces, the script is formatted.

Input

<div><p>Hello <b>world</b></p><pre>  a
   b</pre><script>if(x){go()}</script></div>

Output

<div>
  <p>Hello <b>world</b></p>
  <pre>  a
   b</pre>
  <script>
    if (x) {
      go()
    }
  </script>
</div>

How to format HTML code

  1. 1Paste HTML, a full document or a snippet, into "Input".
  2. 2Click "Format".
  3. 3Review the indented markup in "Output".
  4. 4Click "Copy" or "Download" ("formatted.html").

Formats and limits

Input
HTML document or fragment, as text
Output
Indented HTML, saved as formatted.html
Indentation
2 spaces per level; blank lines kept, at most one in a row; no line wrapping
Left untouched
Content of <pre> and <textarea>, attribute values

Where your HTML is processed

js-beautify is loaded into the page when you first click "Format" and works on your device, so your markup is not uploaded. If the page displays an error message, our error log receives that message, after quoted passages, long numbers, and addresses have been stripped from it, plus the tool's name and your browser's name and version.

Frequently asked questions

Can formatting change how my page looks?

No, in most pages. Inline elements such as <b> stay on their line, and text in <pre> and <textarea>, where every space shows, is copied as typed. Line breaks are added between block elements like <div> and <p>, where they are not rendered.

Does it format embedded CSS and JavaScript?

Yes. Code inside <style> is formatted with the CSS rules and code inside <script> with the JavaScript rules, both indented one level deeper than their tag, as in the example above.

Does it fix broken HTML?

No. It indents what you give it without checking it: a missing closing tag is not added and no error is shown, so the indentation after it may look off. That shift can help you spot the problem.

Tips and tricks

  • ✓To shrink HTML instead of expanding it, use Code Minifier in HTML mode.

Related tools