HTML Formatter with Pre and Script Preserved

How this HTML beautifier formats your markup

Paste minified, generated or hand-written HTML and press Beautify HTML. The formatter reads the markup with a small tokenizer that understands tags, attributes (including quoted values that contain > characters), comments and the doctype, then rebuilds it with consistent indentation of 2 spaces, 4 spaces or tabs. It runs in your browser; the HTML is not uploaded.

It follows the way browsers lay out content rather than putting every tag on its own line. Block elements such as div, section, ul, li, table and p start a new line and indent their children. Inline elements such as a, span, strong, em, code and img stay inside the line of text they belong to, so "Read the <a href="/docs">docs</a> first" is not broken into five lines, and runs of spaces and line breaks in text are collapsed to a single space, which is how the browser renders them anyway. Void elements (br, hr, img, input, meta, link and the rest of the HTML list) have no closing tag and never increase the indent. Custom elements and framework components such as <my-widget> are treated as blocks.

When a block element ends up with a single short line of inline content, it is joined back into one line, for example <h1>Hello <em>world</em></h1>. The join width selector sets the limit at 80 or 120 columns, or turns joining off.

What is never touched: pre, script, style and textarea

Whitespace inside <pre> and <textarea> is part of the content, and re-indenting it would visibly change the page or the value of a form field. JavaScript inside <script> and CSS inside <style> are separate languages, and a naive formatter that treats them as text can break a template literal or a regular expression. This beautifier copies the content of all four elements exactly as written, character for character, and only indents the opening tag. Text such as if (a < b) inside a script is therefore safe, and so is JSON inside <script type="application/ld+json">.

Comments are kept verbatim on their own line, including Internet Explorer conditional comments that some email templates still rely on. The tool also copes with HTML that omits optional end tags: a new <li> closes the previous one, a new <td> or <tr> closes the open cell or row, and a block element such as <div> closes an open <p>, which mirrors simplified versions of the HTML parsing rules. An end tag with no matching start tag is kept but does not change the indentation.

Formatter vs minifier, and what this tool does not do

Beautifying is for reading, reviewing and diffing HTML: inspecting a CMS export, untangling an email template, or making server-rendered output readable before you debug it. For production you usually want the opposite, which is what the HTML Minifier linked below the tool does by stripping comments and whitespace between tags. This formatter does not validate HTML or rewrite your markup: it will not add missing closing tags, reorder attributes or fix invalid nesting, and it does not reformat the CSS or JavaScript it leaves untouched. Formatting is idempotent, so running it twice gives the same result. Because whitespace between inline elements is collapsed but never removed, the rendered page looks the same before and after.