HTML Formatter

Beautify or minify HTML

This HTML formatter, also called an HTML beautifier, does two jobs. Beautify takes markup that is crammed onto one line or indented at random and gives every block element its own line, indented by how deep it sits. Minify does the opposite: it removes the comments and the whitespace that only help people read the code, so the file gets smaller. Both directions work on the text you paste. The tool does not load your page in the browser, so no script in it runs and no image or font is fetched.

Beautify keeps short inline content together. A paragraph with a link and some bold text stays on one line, because those elements flow with the text. Long tags can be split so each attribute gets its own line. Elements whose end tag HTML lets you leave out, like li and p, are indented the way a browser reads them, and the tags themselves stay exactly as you wrote them. For special characters inside text, the HTML entity converter encodes and decodes entities. To build table markup from scratch, use the HTML table generator.

Which whitespace matters in HTML

Browsers do not show most of the whitespace in HTML. MDN's guide to whitespace explains the rules: in running text, a sequence of spaces, tabs and line breaks collapses to a single space, and spaces at the start and end of a line are removed. Whitespace between block elements, such as two paragraphs or two list items, takes up no space at all. That is why a formatter can add line breaks and indentation without changing the page.

The same guide points out one exception: whitespace between inline or inline-block elements shows up as a space, just like the space between words. So this tool never puts a line break between two inline elements that touch, such as <b>a</b><i>b</i>, and when minifying it keeps one space where there was whitespace between inline content. It decides what is inline from the default styles of the elements. If your CSS makes list items or divs inline-block, new line breaks between them can create small gaps, and minifying can remove gaps you relied on.

Elements that are kept exactly

The HTML standard calls script and style raw text elements, and textarea and title escapable raw text elements: their content is read as text, not as tags. In pre and textarea every space and line break is shown. The standard also notes that a single newline right after the start tag of pre or textarea is ignored, so the tool copies those contents character for character, including that first newline.

With Indent CSS and JavaScript on, the lines inside style and script move in to match the markup: the shared indentation is replaced, and the indentation inside the code stays. Two kinds of scripts are left alone. One is a script with a template literal, text in backticks that can span lines, because moving those lines would change the text. The other is a script whose type is not JavaScript or JSON, such as a template, where the whitespace may be part of the output. To shrink CSS and JavaScript, use the CSS and JS minifier.

Void elements and self-closing tags

The HTML standard lists 13 void elements. They only have a start tag, and an end tag must not be written for them:

<area><base><br><col><embed><hr><img><input><link><meta><source><track><wbr>

On a void element a slash before the closing bracket, as in <br />, is allowed and has no effect. On SVG and MathML elements the slash does mark the element as self-closing. On other HTML elements it means nothing at all: <div/> opens a div, and everything after it ends up inside. The tool keeps the slash where you wrote it, treats <path/> inside an svg as closed, and lists a slash on a normal element like div or span as a spot to check.

One detail of the parsing rules: a slash right after an unquoted attribute value belongs to the value. <a href=/home/> has the href /home/, and <path d=M0/> is not closed. The tool reads it the same way and, when it writes a self-closing tag, puts a space before the slash.

Comments and conditional comments

Minify removes comments while Remove comments is on. Conditional comments are always kept. Microsoft's documentation describes two forms: downlevel-hidden, written <!--[if IE]> ... <![endif]-->, and downlevel-revealed, written <![if !IE]> ... <![endif]>. Internet Explorer 5 and later read the condition; other browsers treat the first form as an ordinary comment. The same documentation says that, as of Internet Explorer 10, conditional comments are no longer supported in standards mode. They still turn up in older pages and templates, and removing them could change what the program they target shows, so they stay.

Worked example

A small page of 451 bytes, written on one line, goes in. With the default options (2 spaces, Keep inline elements inline), Beautify gives 25 lines and 19 elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
    <!-- Main styles -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header class="site-header">
      <h1>Corner <em>Bakery</em></h1>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="#menu">Menu</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <p>Fresh bread every morning.<br>Closed on public holidays.</p>
      <pre>Mon-Fri  7:00-18:00
Sat      8:00-14:00</pre>
    </main>
  </body>
</html>

The heading and the paragraph stay on one line because em, br and the text flow inline. The opening hours inside pre keep their spaces and their line break, so the second line starts at the left edge. The formatted file has 581 bytes. Minify that result and it shrinks to 431 bytes, about 26% smaller: the comment is removed and all indentation goes, while the space in "Corner Bakery" and the pre block stay as they were.

How to use the HTML formatter

1. 1Choose Beautify or Minify, then paste your HTML, drop a file on the box or press Open file.
2. 2For Beautify, pick the indent and when to wrap attributes. For Minify, choose whether to remove comments and collapse whitespace.
3. 3The result updates as you type. For a large file, press Format HTML or Minify HTML.
4. 4Read Check these spots for unclosed or stray tags, then press Copy HTML or Download .html.

Sources

• WHATWG HTML Living Standard: The HTML syntax (void elements, raw text elements, self-closing slash, newline after pre and textarea)
• WHATWG HTML Living Standard: Phrasing content (the inline elements)
• MDN: Handling whitespace in HTML and CSS
• Microsoft Learn: About conditional comments (Internet Explorer)

Built by Tobias. Updated October 20, 2026.

Frequently asked questions