HTML Formatter

Indent and tidy HTML with Prettier, including embedded <style> and <script> blocks.

Code FormattersRuns in your browserFree, no sign-up

Options

Indentation

Line width

The column Prettier tries to wrap at. Not a hard maximum.

Closing bracket on same line

Puts > of a multi-line tag on the last attribute line.

HTML input

Formatted HTML

Output appears here as you type.

Ctrl + Enter to run

About the HTML Formatter

Indenting markup makes nesting visible, which is how you spot the unclosed `<div>` that is pushing your footer inside the sidebar. Browsers recover from broken structure silently and inconsistently, so the rendered page often looks almost right while the DOM is not what you intended.

Formatting generated or vendor markup is the common case — output from an email builder, a CMS, or a page saved from the browser. Be careful with template files: a formatter sees Handlebars or Jinja as plain text and can move a tag across a control-flow boundary.

Frequently asked questions

Will formatting change how my page renders?

No. The formatter uses Prettier with CSS-aware whitespace sensitivity, which means it consults each element's default display value before adding a line break. Inline elements such as <span>, <a> and <b> are never split in a way that would introduce or remove a rendered space.

Does it format CSS and JavaScript inside the HTML?

Yes. Embedded <style> and <script> contents are handed to Prettier's CSS and JavaScript printers, so a single pass tidies all three languages consistently.

Can it fix broken HTML?

Partially. Prettier parses forgivingly and will often reformat markup with unclosed tags, but it is a formatter rather than a repair tool — it does not insert missing tags or correct nesting. For validation, use the W3C validator alongside this.