HTML Formatter
Clean up and indent HTML.
Input
Clean HTMLLn 1, Col 11 lines, 1.12 KB
48 lines, 1.43 KB
An HTML formatter, validator and fixer in one page
Paste your HTML and it is checked as you type. You can format it, minify it, preview it, search its structure or pull the text and links out of it. If something is broken, the tool shows exactly where and, in most cases, fixes it with one click.
- Format and minify. Turn a messy one-line page into clean, indented markup with 2, 3, 4 or 8 spaces, or tabs. Or squeeze it down with Minify for production. Text inside
preandtextareais left exactly as you wrote it, and the code insidescriptandstyleis only indented, never rewritten. - Finds mistakes as you type. Unclosed tags, stray closing tags, repeated attributes, repeated ids and unfinished comments are flagged with the line and column. The Issues tab lists everything in one place, and the error card under the input shows the first few.
- One-click fixes. Press Apply fix for a single problem or Fix all to clear the lot. It can add a missing closing tag, remove a stray one, add
alt=""to images, addrel="noopener noreferrer"totarget="_blank"links, and add a missing doctype,lang,titleor viewport tag. Undo brings your original back. - Live preview. See the page the way a browser shows it, at full width, tablet or phone size. Scripts are switched off in the preview, so pasted code can't run.
- Tree view with search. Open and close any element, and search tags, attributes or text. Press the target button on a row to jump to that spot in your source.
- Pull out text, links, images and headings. Extract lists the visible text, every link (marked internal or external), every image with its alt text, and the heading outline. Copy any list in one click.
- Output settings. Set a line length, put attributes on separate lines, sort attributes A to Z, switch between double and single quotes, lowercase tag names, write
<br />or<br>, and strip comments. - Size and structure stats. Compare the input, formatted and minified size and gzipped size, then see your element count, nesting depth, word count and most used tags.
How this HTML formatter compares with other online tools
Most online beautifiers only re-indent the text. The table below describes what you usually get from a basic one and what this tool adds.
| Feature | Typical online formatter | This tool |
|---|---|---|
| Your code | Some tools send the text to a server to process it. | Everything runs in your browser. Nothing you paste or open is uploaded. |
| Mistakes | Formats what it can and says nothing about broken markup. | Lists every problem with its line and column, and fixes most of them in one click. |
| Checks beyond tags | Not included. | Flags missing alt text, a missing title, lang or viewport, repeated ids, and old tags like font and center. |
| Seeing the result | A separate page, or no preview at all. | A sandboxed preview at full, tablet and phone width, next to the code. |
| Finding things | Scroll, or use the browser find box. | A searchable tree that jumps to the matching line, plus lists of links, images and headings. |
| Output settings | Indent size, and sometimes line length. | Indent of 2, 3, 4, 8 or tab, line length, attribute wrapping and sorting, quotes, tag case, comments. |
| Minifying | A different tool, or not offered. | Same page, same input, with before and after size including gzip. |
| Large files | The page slows down or the box cuts your text off. | Open files up to 25 MB, with undo, redo and a full screen editor. |
How to format and fix HTML
- Paste your HTML into the Input box, drop a .html file onto it, or press Open file. The badge shows Clean HTML, or the number of errors and warnings, as you type.
- If there are problems, read the line and column in the card under the input. Press Apply fix for the first one, or Fix all to clear every fixable problem.
- Press Format (Ctrl or Cmd + Enter) for readable markup or Minify (Ctrl or Cmd + Shift + Enter) for the smallest size.
- Open Settings to change indentation, line length, attribute order, quotes and comment handling.
- Copy the result or download it as a file. Use the Preview, Tree, Issues, Extract and Stats tabs for everything beyond formatting.
Common HTML mistakes and what the fix does
| Problem | Example | Fix |
|---|---|---|
| Unclosed tag | <div><span>Hello</div> | The missing </span> is added. |
| Stray closing tag | <p>Hi</p></span> | The extra </span> is removed. |
| Closing a void tag | <br></br> | The </br> is removed. |
| Repeated attribute | <a href="/" href="/home"> | The second href is removed. |
| Image with no alt | <img src="a.png"> | alt="" is added for you to fill in. |
| Unsafe new-tab link | <a target="_blank"> | rel="noopener noreferrer" is added. |
| Unfinished comment | <!-- note | The closing --> is added. |
| Missing page basics | <html><head></head> | Doctype, lang, title and viewport are added. |
HTML formatter FAQ
Is my HTML uploaded anywhere?
No. Parsing, formatting, fixing, extracting and the size stats all run in your browser, and the text is not sent to a server. The preview runs in a sandboxed frame with scripts turned off, so pasted code cannot run or reach the rest of the page.
Will formatting change how my page looks?
It is built not to. Text inside pre and textarea is kept exactly as written, the code inside script and style is indented but not changed, and inline elements such as links and bold text stay on the line with the words around them. Adding line breaks between block elements is safe, but a line break between two inline elements can show up as a space in some layouts, so check the Preview tab when the result matters.
What is the difference between formatting and minifying?
Formatting adds line breaks and indentation so a person can read the file. Minifying removes optional whitespace to make it smaller for sending. Both keep the same content. The Stats tab shows the byte count of each version, including the gzipped size, which is what most servers actually send.
What does Fix all change, and is it safe?
It applies only the repairs that have one obvious answer, such as closing a tag, removing a stray closing tag, or adding alt, rel, lang, a title or a viewport tag. It does not guess at things that need your decision. Repeated ids, extra h1 headings and old tags like font are reported but left for you to change. Every fix can be undone with one click.
Why does it warn about a missing alt attribute?
Screen readers read the alt text aloud, and search engines use it to understand the image. Decorative images should have an empty alt (alt="") so they are skipped. Fix all adds the empty attribute so the warning goes away, and you can then write a real description for images that carry meaning.
Why does it flag a repeated id?
An id must be unique on a page. When two elements share one, links to that anchor, label targets and scripts that look the element up by id only reach the first. Because the right fix depends on your page, the tool shows both locations and leaves the rename to you.
Can I format a fragment, not a full page?
Yes. You can paste a single component, a list item or a table row. The page-level checks for doctype, lang, title and viewport only apply when the input contains an html or head element, so a fragment is never nagged about them.
How big a file can I open?
Files up to 25 MB, in .html, .htm, .xhtml, .vue or .txt. Very large files are slower to highlight, but formatting and the other tabs still work. If the page feels slow, use the Tree, Issues or Extract tabs instead of scrolling the raw text.