DigiKitApp
🇹🇷 TRQuick Access

HTML Formatter - DigiKitApp

Format compact HTML into readable code.

When should you use this?

Use this when you need to turn cramped or inconsistently indented HTML into readable, properly indented code.

When shouldn't you use this?

If you just want to inspect minified HTML, formatting it is a temporary fix; working from the actual source code is healthier.

Step-by-step

  1. Paste the code into the HTML code field. It can be a full page or a small snippet copied from an email template or a CMS.
  2. Click Run.
  3. Check that nested tags are now separated by indentation and that you can see where each div closes.
  4. Copy the output into your editor and make your changes there.

Example

A newsletter template exported from your email marketing tool arrives as one long line full of nested tables. You want to change a button's link but can't tell which table cell it lives in. Paste it here and format it, and every table, row and cell settles into its own indentation level, so the link is easy to find. The same trick helps spot stray spans and empty paragraphs in the messy code a CMS visual editor tends to produce.

It helps in code review too. If someone sends you a page's source, the formatted version makes unclosed or misplaced closing tags much easier to spot.

What does the HTML formatter do?

The tool rewrites HTML with each tag and each piece of text on its own line, indented two spaces per nesting level. The indent grows after an opening tag and shrinks at a closing tag; empty tags such as br, img, input, meta and link, and comments, do not open an indent. The content of pre, textarea, script and style blocks is kept as it is.

When using it

  • Text and inline tags (b, a, span) are split onto separate lines. This can add small gaps between words on screen; check the page in a browser before publishing.
  • The tool does not validate HTML. If tags are unclosed or wrongly nested, the indentation will look off, which can help you find the error.
  • The contents of script and style are not formatted; use the JavaScript and CSS formatters for those parts.
  • For large documents, the formatter in your editor (for example Prettier) applies finer rules.

Things to keep in mind

  • Whitespace between inline elements shows up on screen. If formatting adds line breaks between links or spans, small gaps can appear between items that sat flush together. Check the formatted code in a browser before publishing it.
  • Whitespace inside pre and textarea is displayed exactly as written. If that content changes, so does what the reader sees.
  • Script and style blocks inside the page follow their own rules. Tidying them with a dedicated JavaScript or CSS tool gives cleaner results.
  • Formatting doesn't fix invalid HTML. Use a validator to check whether the markup meets the standard.

Frequently asked questions

Is the code/data I enter stored anywhere?

No, nothing is sent to a server or stored; processing happens entirely in your browser.

Does it work with large inputs?

Yes, though performance may degrade with very large inputs (several MB or more).

Is this tool free?

Yes, it's completely free for core use and requires no account.