Textnify

HTML Formatter

Turn minified or messy HTML into neatly indented markup you can read, review and edit.

Your text stays in this browser tab. Nothing is uploaded, saved or logged.

How the HTML Formatter works

Block elements such as div, ul, table and section go on their own lines and are indented one level for each level of nesting. Text and inline elements such as a, span, strong, em and code stay together in a flowing line, which is wrapped at the width you choose, and a tag is never broken across lines. A block that holds only a short piece of text stays on one line, as in <li>Item</li>.

Whitespace between tags is treated as a browser would: runs of spaces and line breaks collapse to one space, and a non-breaking space is kept. The contents of <pre> and <textarea> are left exactly as written. The code in <script> and <style> is re-indented to match the page but never reformatted, so use a code formatter for JavaScript and CSS themselves. Comments are kept unless you remove them.

Sloppy markup is read leniently: optional end tags such as </li>, </p> and </td> are added, a stray closing tag is ignored and elements left open are closed at the end. Formatting HTML that is already formatted normally leaves it unchanged. This is a formatter, not a validator, so it does not report errors, and it refuses markup nested more than 400 levels deep.

How to use it

  1. Paste your HTML.
  2. Choose the indentation and the width at which text wraps.
  3. Copy the formatted HTML or download it as an .html file.

Example

A single line of HTML, indented, with the missing end tags added.

Input

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title></head><body><div class="card"><h2>Title</h2><p>Some <b>bold</b> text and a <a href="/more">link</a>.</p><ul><li>One<li>Two</ul></div></body></html>

Result

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <div class="card">
      <h2>Title</h2>
      <p>Some <b>bold</b> text and a <a href="/more">link</a>.</p>
      <ul>
        <li>One</li>
        <li>Two</li>
      </ul>
    </div>
  </body>
</html>

Frequently asked questions

Does formatting change how the page looks?

It should not. Only whitespace between tags changes, and the tool follows the rules a browser uses for whitespace. The one exception is content in an element styled with white-space: pre, which is not detected; wrap such text in <pre> if its spacing matters.

Will it format the JavaScript and CSS inside the page?

It re-indents the <script> and <style> blocks to fit the page but does not reformat the code inside them. Use a dedicated code formatter for that.

Why were closing tags added?

HTML lets you leave out some end tags, such as </li>, </p> and </td>. The formatter writes them in so that the structure is explicit and the indentation is right.

Does it check that my HTML is valid?

No. It repairs and lays out what it finds but does not report errors. Use an HTML validator to check a page against the standard.