How to use the HTML formatter

Paste a full HTML document or just a fragment into the left box.
The formatted markup appears on the right as you type, with every nested element indented one level.
Choose the indent (2 spaces, 4 spaces or tabs) and the line width at which long lines are wrapped.
Press Copy to copy the result, or Sample to try a small page first.

Example

A navigation list written on one line:

<ul class="nav"><li><a href="/">Home</a></li><li><a href="/docs">Docs</a></li></ul>

becomes:

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/docs">Docs</a></li>
</ul>

Formatting uses Prettier in your browser, so your markup stays on your device and is never sent to a server.

Frequently asked questions

Are inline <style> and <script> blocks formatted too?

Yes. CSS inside <style> and JavaScript inside <script> are formatted with the same rules as the CSS and JavaScript formatters, and indented to match their surrounding tags.

Why are some inline elements kept on one line?

Whitespace between inline elements such as <a>, <strong> or<span> can change how a page renders. Prettier only breaks lines where it is safe, so text and inline tags stay together unless the line is longer than the chosen width.

Will it fix broken HTML?

Not fully. Prettier follows the HTML parsing rules, so some missing closing tags are filled in, but an unexpected closing tag is reported in the status line with its line and column instead of being guessed at.