HTML Formatter & Beautifier
Paste messy HTML to tidy it (clean indents, one tag per line) or shrink it (everything on one line). The status line tells you if a tag was left open or closed in the wrong place, and gives you the line number. Everything runs on your own device — what you paste never leaves your browser.
How this HTML formatter works
The tool reads your HTML one character at a time and splits it into pieces: opening tags, closing tags, empty tags, plain text, notes, the doctype line, and the four blocks whose contents are copied word for word. It then writes those pieces back out, moving one step to the right every time a tag opens and one step back when it closes, so how far a line sits from the left tells you how deep it is nested. Because it works on the pieces instead of throwing anything away, nothing in your file is lost — your attributes keep their order, their quotes and their spacing, and your notes come through untouched. Minify does the opposite: it drops the spaces and line breaks between tags so the file becomes one short line, while keeping every space that a visitor would actually see.
Beautify vs. minify vs. the structure check
| Button | What it does | Use it when… |
|---|---|---|
| Beautify | Adds line breaks and indents (2 spaces, 4 spaces or a tab). | You need to read or fix HTML that arrived on one long line. |
| Minify | Removes the spaces between tags; keeps the spaces people can see. | You want the smallest file to send or store. |
| Structure check | Runs every time you type and names the first tag problem, with its line number. | A tag is out of place and you cannot find which one. |
The check runs on its own, so you get it in both modes. It looks only at whether your tags open and close in the right order — it is not a full HTML validator and will not tell you whether an attribute name is real or whether your page meets every rule in the standard.
A worked example
Here is a small menu the way a build tool would leave it — everything on one line, no spaces to spare:
<ul class="menu"><li><a href="/">Home</a></li><li><a href="/tools/">Tools</a></li></ul>Press Beautify with 2-space indents and you get this:
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/tools/">Tools</a></li>
</ul>Notice three things. Each list item is on its own line and sits two spaces in from the list, so you can see it belongs to the list. The link stays on the same line as its list item, because splitting it would put a space on the finished page that was not there before. And the closing tags line up under their opening tags, which is what makes a missing one jump out. Press Minify on the tidied version and you get the first line back again, character for character:
<ul class="menu"><li><a href="/">Home</a></li><li><a href="/tools/">Tools</a></li></ul>HTML tag reference
Not every tag is treated the same way, and that is on purpose. This is the full list of what the formatter does with each kind of tag.
| Kind of tag | Which ones | What the formatter does |
|---|---|---|
| Empty ("void") tags | area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr | These 14 tags hold nothing inside them. The tool never adds a closing tag for them and never indents anything under them. |
| Copied-word-for-word blocks | <script>, <style>, <pre>, <textarea> | Everything between the opening and closing tag is copied exactly. Spaces, tabs and line breaks inside are never touched, because changing them would change your code or your page. |
| Tags that sit in a line of words | <a>, <b>, <br>, <code>, <em>, <img>, <small>, <span>, <strong>, <sub>, <sup> | These stay on the same line as the words around them. Moving them to their own line would add a space on the finished page, so the tool does not do it. |
| Normal tags | <div>, <p>, <ul>, <table>, <section>, <header>, <form> | Each one starts a new line, and everything inside it moves one step to the right. This is what makes the shape of the page easy to see. |
| Notes for people | <!-- a note --> | Notes are copied word for word, including the old <!--[if IE]> kind that only Internet Explorer used to read. |
| The first line | <!DOCTYPE html> | Tells the browser this is a modern HTML page. It is copied word for word and always sits on its own first line. |
| Tags you may leave open | li, p, tr, td, th, dt, dd, option, thead, tbody | HTML lets you skip the closing tag on these, so a missing one is normal and is never reported as a mistake. |
What the structure check will tell you
- A tag that is never closed — you get the name of the tag and the line it was opened on.
- A closing tag in the wrong place — for example closing a paragraph while a bold tag is still open. You get both line numbers.
- A closing tag with nothing to close — usually a leftover from a copy and paste.
- A copied-word-for-word block that never ends — a script or style block with no closing tag swallows the rest of the page, and this is the fastest way to spot it.
Only the first problem is shown, because in HTML one misplaced tag usually causes every warning after it. Fix the first one, and the rest normally clear on their own.
Common uses
- Reading a page you saved or copied from "view source", which almost always comes back on one line.
- Cleaning up an e-mail template or a CMS block before you check it into version control, so the next change shows a small, readable difference.
- Shrinking a snippet before pasting it into a place with a size limit, then tidying it again later to work on it.
- Finding the one unclosed
divthat has pushed half of your layout into the wrong place.
Privacy
The formatter runs entirely on your own device. Your HTML is read and rewritten inside your own browser, is never sent to a server, and is not saved or logged — so it is safe for work files and anything private, and it keeps working with the network switched off once the page has loaded.
Frequently asked questions
- What does an HTML formatter or beautifier do?
- It puts your HTML back into a shape a person can read. Pages that come out of a build tool, a template engine or a "view source" copy are often squeezed onto one very long line with every space removed. The formatter puts each tag on its own line and moves the tags inside a tag one step to the right, so you can see at a glance which piece belongs inside which. It does not change your content: tag names, attributes, quotes, notes and text all come through exactly as you wrote them. Only the spaces and line breaks between tags are rewritten, and you pick whether those are 2 spaces, 4 spaces or a tab.
- Will tidying or shrinking my HTML change how the page looks?
- It is built so that it does not. A browser treats any run of spaces, tabs and line breaks inside a page as a single space, so moving tags onto new lines is normally safe. The one place it is not safe is between tags that sit inside a line of words, such as a bold tag next to a link: adding a line break there would show up as an extra space on the finished page. This tool keeps a whole run of those tags together on one line, and it keeps a real space where you had one. It also never touches the spacing inside script, style, pre and textarea blocks, because that spacing is part of what those blocks mean.
- Why is the code inside script, style, pre and textarea left alone?
- Because in those four blocks spacing carries meaning, and re-indenting them could break your page. A pre block shows text exactly as typed, so every space you see is deliberate, and a textarea shows its content in an editable box, so a stray tab would appear in the box. A style block is CSS and a script block is JavaScript, neither of which is HTML at all, so an HTML tool has no business rearranging them. This tool reads the opening tag, copies everything up to the matching closing tag character for character, and carries on. That is also why a "less than" sign inside your JavaScript never confuses it.
- What does the structure check look for, and is it a validator?
- It is a quick sanity check, not a full validator. As you type, it walks through your tags and keeps track of which ones are still open. It tells you three things: a tag that is opened and never closed, a closing tag that does not match the tag it is meant to close, and a closing tag with nothing open to match it. Each one is reported with the line number so you can jump straight to it. It knows that empty tags such as br and img need no closing tag, and that HTML lets you leave li, p, tr and td open, so it will not warn about those. It does not check whether your attribute names are real or whether your page meets the full HTML standard.
- Do empty tags like br and img need a closing slash?
- No. In HTML, the 14 empty tags — area, base, br, col, embed, hr, img, input, link, meta, param, source, track and wbr — cannot hold anything inside them, so there is nothing to close. Writing a slash before the closing bracket is allowed and is ignored by every browser, which is why so much older code has it: it came from XHTML, where the slash was required. Both styles work, so this tool leaves whichever one you wrote exactly as it is. What it will never do is invent a closing tag for one of them, because a closing tag for an empty element is a real mistake that some tools will complain about.
- Is my HTML sent anywhere?
- No. The whole tool is a small piece of plain JavaScript that runs on your own device. What you paste stays in the page in front of you: there is no upload, no server behind it, nothing is saved and nothing is written to a log. That makes it safe for work files, half-finished pages, e-mail templates and anything with a customer name or a key in it. It also means it keeps working with the network switched off once the page has loaded, and that a very large file is only limited by your own device, not by an upload limit.