HTML Formatter
Indent & prettify HTML with Prettier — live, with whitespace-sensitivity control, precise code-frame errors and before/after stats.
About this ToolHow it works, benefits & use casesTap to collapse
Indent and tidy up tangled or minified HTML with Prettier’s html parser, running fully in your browser. Paste your markup and it reformats live into clean, nested, readable structure. You decide the print width and tab width, switch between tabs and spaces, and set the whitespace sensitivity — CSS (the default, which respects each element’s display value), Strict (treat all whitespace as significant), or Ignore (collapse it freely). A bracket-same-line toggle controls whether the closing > of a multi-line tag sits on its own line or hugs the last attribute. Because it genuinely parses the document, malformed markup is reported with a precise line and column and a code-frame snippet with a caret, rather than producing broken indentation. A before/after line and byte count appears below, plus an "already formatted" confirmation. No upload, no sign-up.
How to Use
- 1Set your preferences in the Options panel: print width, tab width, tabs or spaces, whitespace sensitivity, and the bracket-same-line toggle.
- 2Paste your HTML into the input box, or click Load example to load a single-line sample document.
- 3The formatted, indented HTML regenerates live as you type or change options.
- 4Press Format HTML to confirm the result; any error appears with its line, column, and a caret code-frame.
- 5Copy the formatted HTML, download it as formatted.html, or share the URL with your input and options encoded in it.
Key Benefits
- Powered by Prettier’s html parser for accurate, consistent indentation
- Whitespace sensitivity modes (CSS, Strict, Ignore) for correct rendering behaviour
- Bracket-same-line option to control where the > of multi-line tags lands
- Parser-based errors with line, column, and a caret code-frame snippet
- Before/after line and byte stats, plus an "already formatted" confirmation
- Live reformatting as you edit or adjust options, with a shareable URL
- Runs entirely in-browser — your markup is never uploaded
Common Use Cases
- Expanding minified or single-line HTML into a readable, indented document
- Standardising the formatting of templates and partials before committing
- Cleaning up HTML pasted from a build output, email, or CMS export
- Choosing the right whitespace sensitivity to avoid breaking inline-element spacing
- Reviewing how Prettier would re-indent a deeply nested layout
Options
Put > of multiline tags on the last attr line
0 characters · live
Paste HTML above to format it live.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- ARIA Label GeneratorGenerate accessible names and preview what a screen reader announces
- Screen Reader Text GeneratorGenerate sr-only / visually-hidden text + CSS, with a focusable variant
- Skip Link GeneratorGenerate skip links + reveal-on-focus CSS and focus-managed targets
- Semantic HTML ConverterConvert div soup to semantic HTML with a landmark map & divitis score
- Accessible Form BuilderBuild WCAG-accessible forms with labels, fieldsets, errors & autocomplete
- Hreflang Tag GeneratorBuild correct, bidirectional hreflang sets for international SEO with a full ISO language/region database, a linter for the mistakes Google flags (en-UK, missing return tags), and HTML, XML sitemap, HTTP header & Next.js output
It tells Prettier how to treat whitespace around elements. CSS (the default) bases the decision on each element’s default display value, so inline elements keep meaningful spaces. Strict treats all whitespace as significant and avoids adding or removing any. Ignore collapses whitespace freely for the cleanest indentation, at the risk of altering inline spacing.
When a tag has so many attributes that it wraps across multiple lines, this option decides where its closing > goes. Off (the default) puts the > on its own line; on places it at the end of the last attribute line. It is a style preference that mirrors Prettier’s bracketSameLine setting.