HTML Formatter & Beautifier - Beautify HTML Online

About the HTML Formatter playground

The HTML Formatter takes compact or inconsistently indented markup and rewrites it with clean indentation that reflects the document tree. It places block elements on their own lines, indents nested children, and tidies attribute spacing so the structure of a page becomes immediately clear. Everything happens in your browser, so your markup, including any inline data or template fragments, is never uploaded anywhere.

HTML (HyperText Markup Language) is the structural foundation of every web page, using nested elements and attributes to describe content for browsers. Markup is frequently minified for production or generated by templates, leaving it as one long, unreadable line. Reformatting restores the visual hierarchy so you can quickly find an element, verify nesting, and spot unclosed tags. Well-formatted HTML also makes code review and accessibility audits considerably easier.

HostedHTML Formatter runtime

mainentry file

single fileworkspace

stdinprogram input

How it works

Write

The main file is the entry point for each run.

Give it input

Use the Input panel to pipe standard input to your program when it needs data.

Run

Run sends your code to a fresh hosted runtime and streams the result into the output panel.

Keep or share

Your draft stays in this browser, and Share creates a separate snapshot link.

External resources

html.spec.whatwg.org— Format reference

Messy input

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

Formatted output

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

Document skeleton

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Page</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Form messy input

<form action="/submit" method="post"><label for="email">Email</label><input id="email" type="email" name="email" required><button type="submit">Send</button></form>

Form formatted output

<form action="/submit" method="post">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required />
  <button type="submit">Send</button>
</form>

Table formatted

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget</td>
      <td>$9.99</td>
    </tr>
  </tbody>
</table>

Semantic layout formatted

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h2>Title</h2>
    <p>Body text.</p>
  </article>
</main>
<footer>
  <p>&copy; 2026</p>
</footer>

Select dropdown messy input

<select name="size"><option value="s">Small</option><option value="m" selected>Medium</option><option value="l">Large</option></select>

Select dropdown formatted output

<select name="size">
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
  <option value="l">Large</option>
</select>

Figure with media formatted

<figure>
  <img src="chart.png" alt="Sales chart" />
  <figcaption>Quarterly sales</figcaption>
</figure>

Input

Output

Start typing to auto-process

HTML Formatter

Write

Give it input

Run

Keep or share

Editing

Navigation

Selection