HTML Formatter and Beautifier

How to use it#

Drop an .html file on the box, or paste the markup into it.
Choose the indent, the line width, and how spacing between inline tags is treated.
Copy the result, or download it as a new file beside the original.

HTML is not XML, and the formatter knows it#

HTML allows a great deal that XML does not. A list item can end where the next one starts, <br> and <img> never close, attribute values can go unquoted, and tag names are not case sensitive. This formatter parses markup the way HTML is defined, so all of that is read correctly and written back out in a consistent form: closing tags where they were implied, quotes on every attribute, and a slash on void elements such as <br />.

Prettier does the formatting, the same formatter many editors and projects run, so the output is what Prettier writes with the same indent and line width. Markup tidied here can go into a project that uses Prettier without a second round of changes.

For markup that genuinely is XML, such as an SVG file, a sitemap, or a SOAP message, the XML formatter keeps the stricter rules and tells you when a document is not well-formed.

Why the spacing setting matters#

In HTML, whitespace between inline elements is visible. <b>one</b><b>two</b> renders as onetwo, while the same tags on two lines render as one two, with a space. A formatter that freely adds line breaks between inline tags changes how the page looks, usually by putting a gap between a link and the full stop after it.

The default keeps the page exactly as it renders. Where it needs to break a line between two inline tags that had no space between them, it breaks inside a tag instead, which is why a closing > sometimes starts the next line. It looks odd and it is deliberate.

Choosing to ignore the spacing gives tidier output, with inline tags broken cleanly across lines, at the cost of possibly adding or removing a visible space. That is usually fine for templates you are about to edit by hand, and a risk for markup you will publish as it is.

The CSS and JavaScript inside#

With the option on, the contents of <style> tags are formatted as CSS and the contents of <script> tags as JavaScript, each with the same indent. Style attributes on individual elements are tidied the same way, and a script tag holding JSON is formatted as JSON. Turn the option off to leave all of it exactly as written.

A syntax error inside a script or a style block does not stop the page from formatting. That block keeps its contents as written and only moves to the new indent.

Frequently asked questions#

Why do some closing tags end up on the next line?

To keep the page looking the same. When two inline tags touch with no space between them, a line break between them would add a visible space, so the formatter breaks inside the tag instead and the > moves to the next line. Set the spacing to ignore if you would rather have tidier lines and can accept a possible change in spacing.

Can it minify HTML?

Not on this page, which goes the other way and so works as an HTML unminifier: paste a page or an email template that arrived as one long line and it comes back indented. The HTML minifier does the reverse. It takes out whitespace and comments and minifies the CSS and JavaScript inside, while keeping the spacing the page shows.

Does formatting change what the page does?

With the spacing kept, no: the formatted page renders the same. The markup is rewritten in a consistent form, so implied closing tags appear and attribute values gain quotes, but those are the same page to a browser.

Why does it say my HTML has an error?

HTML is forgiving but not endlessly so. A closing tag with no matching opening tag, such as a stray </div>, cannot be placed anywhere, and the message gives the line and column where it was found. Browsers quietly drop such a tag; the formatter asks you to fix it rather than guessing what you meant.

Is my HTML uploaded?

No. The formatter runs in this tab, and nothing you paste or drop is sent anywhere.