Re-indent and tidy up HTML markup so nested tags are easy to read.
1
How to Use the HTML Formatter
Paste your HTML into the box.
Click "Format".
Review the re-indented markup and click "Copy to Clipboard".
How the Formatter Lays Out Your Markup
The tool splits the input into comments, doctype declarations, tags and runs of text, trims the whitespace around each piece, and writes every piece on its own line. Indentation is two spaces per level and follows these rules:
An opening tag is written at the current level, and everything after it moves one level deeper.
A closing tag moves back one level before it is written, so it lines up with its opening tag.
Void elements such as br, img, input, meta, link and hr, and any tag ending in a slash, do not increase the level because they have no closing tag.
Comments and text are placed at the current level without changing it.
<div class="card">
<h2>
Rates
</h2>
<p>
Price:
<b>
₹450
</b>
<br>
per bag
</p>
<!-- note -->
</div>
The structure is now easy to scan: the h2, the paragraph and the comment are clearly children of the div. Notice that even short inline elements such as b get their own lines, and the br does not push the following text deeper.
Good Uses for It
Reading markup copied from a browser's page source, an email template or a CMS export where everything sits on one line.
Spotting a missing closing tag. If the last line of the output is not back at the left margin, some element was opened and never closed.
Checking nesting before pasting a snippet into a template, for example confirming that a button really sits inside the form you expect.
Limitations
Optional closing tags confuse the indentation. HTML allows li, p, td and some other elements to be left unclosed, but this formatter expects every non-void tag to be closed, so each unclosed li pushes the rest of the document one level further right.
Putting inline elements on separate lines can add visible spaces. Two adjacent links or spans with no space between them in the original may appear separated by a space once the output is used in a page. Treat the output as a reading aid, or check the page after pasting it back.
Content of pre and textarea elements is re-indented like everything else, which changes how it displays.
Inline scripts and styles are treated as text. Code inside them that contains a less-than sign followed by a letter can be mistaken for a tag, and attribute values containing a greater-than sign can split a tag in the wrong place.
Frequently Asked Questions
It re-indents your HTML so each nested tag lines up under its parent, making deeply nested markup easier to read and review.
No, it only re-indents based on the tags you provide — it doesn't validate or auto-close mismatched tags, so malformed HTML may format unpredictably.
No, this is a lightweight, dependency-free formatter meant for quick tidy-ups. Extremely complex markup with inline scripts/styles containing angle brackets may not format perfectly.
Tags, attributes, text and comments are kept exactly as written. Only the line breaks and indentation between them change. However, because whitespace between inline elements can be visible in a browser, the formatted version of a paragraph full of links or spans may render with slightly different spacing.
Some element is opened without a matching closing tag. A common cause is list items, paragraphs or table cells written without their closing tags, which HTML allows but this formatter does not detect. Adding the missing closing tags fixes the indentation.