HTML Formatter
Paste HTML to beautify it with clean indentation, wrap long lines or minify it, and check the result in a live preview. Code inside <pre>, <textarea>, <script> and <style> is handled carefully.
Everything runs in your browser. The preview is sandboxed: scripts, forms and pop-ups are blocked.
How to use the HTML Formatter
- Paste your HTML into the input box or open an .html file. Press Sample to try it.
- Choose the indentation and line wrap, and whether the contents of <head> and <body> get an extra indent.
- Press Format HTML. The output updates as you type while Live is on.
- Open the Preview tab to see how the page renders. Scripts do not run in the preview.
- Copy or download the result, or press Minify for a compact version.
Before and after
Input:
<ul class="menu"><li><a href="/">Home</a></li><li><a href="/blog/">Blog</a></li></ul><p>Read the <strong>latest</strong> post.</p>
Formatted with 2 spaces:
<ul class="menu"> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> </ul> <p>Read the <strong>latest</strong> post.</p>
How the formatter treats each kind of content
| Content | What happens | Why |
|---|---|---|
Block elements (div, p, ul, table, section…) | Own line, children indented one level | Whitespace between blocks does not affect rendering |
Inline elements (a, strong, em, span, img…) | Stay on the text line | Adding line breaks inside text would add visible spaces |
<pre> and <textarea> | Copied exactly | Every space and line break inside them is displayed |
<style> | CSS is formatted rule by rule | Readable embedded styles |
<script> | Re-indented as a block, code unchanged; JSON-LD is pretty-printed | Changing JavaScript beyond indentation could break it |
| Comments and DOCTYPE | Kept on their own line | Conditional comments and notes stay intact |
Elements whose end tags are optional in HTML, such as <li>, <p>, <td> and <option>, are closed the same way a browser would close them. The status bar warns about tags that are never closed and closing tags with no matching opening tag, which are the most common causes of broken layouts.
Indentation and line length tips
- 2 spaces is the most common style for HTML because pages nest deeply. Use tabs if your team or editor prefers them.
- Wrap at 80 or 120 characters to split long paragraphs over several lines. Lines only break at spaces in text, never inside a tag or attribute.
- Indent head & body controls whether
<head>and<body>are indented inside<html>. Many style guides leave them flush to save one level. - Formatting is not validation. For full HTML validation, use the W3C Markup Validation Service after tidying the code here.
Frequently asked questions
What does an HTML formatter do?
It re-indents HTML so that each nested block element starts on its own line, one level deeper than its parent. This makes the structure of a page easy to see, helps you spot unclosed tags and makes code reviews simpler. The page looks the same in the browser.
Will formatting change how my page looks?
No in almost all cases. Whitespace between block elements is ignored by browsers, inline elements such as links and bold text are kept on the same line as the surrounding text, and content inside <pre> and <textarea> is never touched. Rare layouts that depend on whitespace between inline-block elements can shift by a few pixels.
Is the live preview safe?
Yes. The preview is shown in a sandboxed iframe without permission to run scripts, submit forms or open pop-ups. Images and stylesheets from absolute URLs load; relative links cannot be resolved because the preview has no base address.
Can I unminify HTML?
Yes. Paste minified HTML, for example from a page's source, and press Format HTML. Every block element is put back on its own line with indentation. Removed comments cannot be recovered.
What does Minify do?
Minify removes comments (except conditional comments), collapses runs of spaces and line breaks into a single space and drops whitespace between block elements. Content in <pre>, <textarea> and <script> is kept as it is, and embedded CSS is minified.
Is my HTML uploaded?
No. Formatting and the preview happen entirely in your browser. Your code is never sent to a server.