How to use the HTML formatter

1Paste your markup into the HTML box, or press Example.
2Set Indent, Attributes (wrap only when long, or one per line) and Wrap lines at. Tick Indent <head> and <body> if your style guide indents them under <html>.
3Press Format HTML. The footer shows how many lines the code had before and after.
4Press Copy, or Download to save formatted.html.

Example

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>

Indent: 2 spaces. Block elements (ul, li) get their own lines; the inline <a> stays inside its <li>.

Indentation options

Each nested block element is indented one level: 2 spaces, 4 spaces or a tab. Two spaces keep deeply nested templates readable on narrow screens; tabs let each reader choose the width in their editor. Blank lines controls whether empty lines you already had are kept (up to one or two) or removed.

By default <head> and <body> aren't indented under <html>, because every line of the page would otherwise start one level deep. Tick Indent <head> and <body> if your team prefers it.

Attribute wrapping

Long tags with many attributes are hard to scan. Attributes decides what happens:

Wrap only when long keeps attributes on the tag line until it passes the Wrap lines at width.
Each on a new line puts every attribute on its own line, which makes diffs of templates much clearer.
Each on a new line, > on its own also moves the closing > down, like many JSX style guides.
Aligned when wrapped lines wrapped attributes up under the first one.

Attribute values themselves are never changed.

Inline vs block elements

Whitespace inside text matters to the browser, so the formatter treats elements differently. Block elements (div, p, ul, li, table, section) start on a new line. Inline elements (a, span, b, em, img) stay inside the text flow, because a line break between two inline elements renders as a space: <b>A</b><b>B</b> shows "AB", but with a line break between them it shows "A B".

<pre> and <textarea> contents are left exactly as they are. CSS in <style> and JavaScript in <script> are formatted with the same indent settings.

Formatting email templates

HTML emails are built from nested tables with inline styles, which makes them hard to read and easy to break. Formatting helps you find the cell you need to edit. Two cautions: keep Wrap lines at on Don't wrap, because some email clients treat long quoted-printable lines differently from what you see; and check the email again after editing, since Outlook's renderer is less forgiving than a browser. Preview the result in the HTML viewer before sending a test.

Is my text private?

This tool runs entirely in your browser. Your text is not uploaded to our servers.

Sources

Questions about the HTML formatter

Will formatting change how my page renders?

Almost never. The exception is whitespace between inline elements: a new line between two inline tags can add a visible space. The formatter avoids splitting inline content for that reason.

Can it fix broken HTML?

No. It indents what is there. Unclosed tags produce odd indentation, which is often a useful hint about where the problem is, but you have to fix the markup yourself.

Does it format embedded CSS and JS?

Yes. The contents of <style> and <script> blocks are formatted with the same indent. JSON in <script type="application/ld+json"> is indented too.

HTML Formatter