Why whitespace matters in HTML

In HTML, whitespace between inline elements is visible: a line break between two links renders as a space. A formatter that freely adds line breaks can change how a page looks. By default, Prettier only adds or removes whitespace where CSS says it doesn't show, around block elements such as div, p and li. When that would make a line too long, it breaks inside a tag (<a\n href=…) instead of in the text.

Respect inline elements (the default) follows the CSS display of each element.
Keep all whitespace never changes whitespace, for templates where every space counts.
Ignore whitespace treats all whitespace as insignificant: the neatest output, but it can add or remove visible spaces.

How to use the HTML Formatter

Paste HTML, or press Sample.
Set the line width and indentation.
Choose how whitespace is treated and how attributes wrap.
Copy the result or download it.

Examples

A minified list

Input

<ul class="nav"><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul>

Output

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

The links stay on the same line as their li, because breaking there would add visible whitespace.

A page with embedded CSS and JavaScript

Input

<!DOCTYPE html><html><head><title>Hi</title><style>body{margin:0}</style></head><body><h1>Hello</h1><script>const x={a:1};console.log(x)</script></body></html>

Output

<!DOCTYPE html>
<html>
  <head>
    <title>Hi</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>Hello</h1>
    <script>
      const x = { a: 1 };
      console.log(x);
    </script>
  </body>
</html>

A tag with many attributes

Input

<input type="email" name="email" placeholder="you@example.com" required autocomplete="email" aria-describedby="email-help">

Output

<input
  type="email"
  name="email"
  placeholder="you@example.com"
  required
  autocomplete="email"
  aria-describedby="email-help"
/>

The tag is longer than the line width, so each attribute goes on its own line. Void elements such as input are written with />.

Options

Line width: 80 (the default), 100 or 120 characters.
Indent: 2 spaces (the default), 4 spaces or tabs.
Whitespace: Respect inline elements (the default), Keep all whitespace, or Ignore whitespace, as described above.
One attribute per line: Put every attribute on its own line whenever an element has more than one, not only when the tag is too long.
> on the last line: Put the closing > of a wrapped tag at the end of the last attribute instead of on its own line.

Limitations

Template syntax (Handlebars, Jinja, PHP) inside HTML may not be formatted correctly; Vue and Angular templates need their own parsers.
Invalid nesting is reported where the parser can't recover; some mistakes are silently corrected, as browsers do.

Frequently asked questions

Is my HTML uploaded?

No. Prettier runs in a background thread in your browser; nothing you paste is sent anywhere.

Why didn't it put every element on its own line?

Because that would change how the page looks: a line break between inline elements, such as links or spans, renders as a space. Choose Ignore whitespace if you don't mind that.

Why does the output have odd-looking line breaks inside tags?

When inline content is too long, Prettier breaks inside a tag (before > or an attribute) rather than in the text, because whitespace inside a tag is never visible. This keeps the page identical.