# HTML Formatter

Format HTML fragments with this HTML Formatter. Paste markup and the tool puts block elements such as div, section, p, ul and table on their own lines with two space indentation, collapses stray whitespace in inline content, formats inline CSS and JavaScript, and keeps pre and textarea content untouched. Ideal for web developers and designers cleaning up pasted, generated or minified markup for reading and review.

## Frequently asked questions

### How does the HTML Formatter decide where to break lines?

An element that contains block level children, such as div, section, article, header, footer, nav, main, form, p, h1 to h6, ul, ol, table or blockquote, is expanded so each child sits on its own line, indented by two spaces. Elements without block children stay on one line.

### Why is my full HTML document returned on one line?

The html, head and body elements are not block level tags in the formatter's rules, so a document wrapped in them stays inline apart from the doctype. Paste the content inside body, or the fragment you are working on, to get it expanded.

### What happens to whitespace?

Inside inline content, runs of spaces, tabs and line breaks collapse to a single space, which matches how browsers render them. Content of pre and textarea elements keeps its whitespace exactly.

### Are inline scripts and styles formatted?

Yes, style blocks are formatted as CSS and script blocks as JavaScript, or as JSON for JSON and JSON-LD types. Scripts with other types, such as text templates, are kept exactly as written.

### How are void elements written?

Self-closing tags such as <br/> are written with a space before the slash, as <br />. Void elements written without a slash, such as <img src="a.png">, keep their original form.

### Are attributes changed?

No, attributes, their quotes and their order are kept exactly as written. Only the whitespace between elements is rearranged.

### Are comments preserved?

Yes, HTML comments and the doctype are kept and placed on their own lines. Their content is copied exactly, including commented out markup.

### Does the formatter fix invalid HTML?

No, it does not validate or repair markup. Unclosed tags are formatted as well as possible, so run a validator when you need to find structural errors.

### Why is the result wrapped in an html code fence?

The result is returned as a Markdown code block marked html, so it renders highlighted in Markdown. Copy the lines between the fences when you paste it into an .html file.

### How much HTML can I format?

Up to 5 MB per run; larger input is rejected with a message. The output is identical to the HTML option of the Code Formatter.

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20OneClick%20Pro)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=oneclickpro)