HTML Formatter

How it works

Page sources, email templates and exports from website builders usually arrive as HTML on a single line or with indentation all over the place. Paste the code into the left panel and the right panel puts every block tag (div, ul, li, table, p) on its own line, indented one step for each level of nesting. You can now see which </div> closes which <div> and where a list ends. CSS inside <style> and JavaScript inside <script> are formatted with the same indentation. Content inside <pre> and <textarea> is not touched, because every space there shows up on the page. Inline tags such as a, span and strong stay on the same line as their text. Long lines wrap at 120 characters by default; set Long lines to Keep as they are if you do not want that. The result line tells you how many lines became how many. Set What should happen? to Minified and the tool goes the other way: comments and the whitespace between tags are removed, while <style> and <script> contents are left alone in that mode.

This tool is also known as html formatter, html beautifier, html prettify, format html online, indent html, html code formatter, angular html formatter, angular template formatter.

What is HTML?

HTML (HyperText Markup Language) is the markup language that gives a web page its structure: headings, paragraphs, lists, tables, links and images are each marked with a tag (<h2>, <p>, <ul>, <a>), and tags nest inside each other to form a tree. Browsers collapse most spaces and line breaks between tags, so the same page can be written on one line or neatly indented; indentation exists only to show that tree to people.

What is Block and inline elements?

Block elements (div, p, ul, table, h1-h6) start on a new line and take the full width available; inline elements (a, span, strong, img) sit inside the flow of text. For formatting this matters: a line break between block elements changes nothing on screen, but a line break between two inline elements is rendered as a space. That is why a formatter keeps inline elements on the same line as their text.

What is the difference between formatting and minifying HTML?

Formatting adds indentation and line breaks so people can read the code; the file grows and the page looks the same. Minifying does the opposite: it removes comments and needless whitespace between tags and can also compress the CSS and JavaScript inside; the file shrinks but is hard to read. Neither touches the content of <pre>. A common setup is to keep the indented source and publish the minified copy.

Formatting is not validation

The tool tidies HTML but does not check it: an unclosed tag, wrongly nested elements or a misspelled attribute are not reported. Official validation is done with the W3C validator, and that service sends your code to its own server; this page sends nothing anywhere, so it does not do that job.

Indentation still exposes mistakes: when a <div> is never closed, every tag below it sits one level too deep and the end of the document shows an odd run of closing tags. Formatting does not change how the page looks, with one exception: a line break added between two inline elements is shown by the browser as a space. That is why long lines are wrapped between words in running text.

Indented or minified?

Indented HTML is for reading and editing: understanding a template, tracking down a bug, sending code to a colleague. Minified HTML is for shipping: email templates have size limits and every kilobyte counts for page speed.

The Minified option on this page compresses the HTML itself: comments are removed (except conditional comments for old Internet Explorer), whitespace between tags is dropped, and <pre> and <textarea> are protected. To minify the embedded CSS and JavaScript as well, keep comments, or see a before-and-after byte count, use the HTML minifier.

Frequently asked questions

How do I format one-line HTML?

Paste the code into the left panel on this page. Every block tag gets its own line and is indented according to its nesting. Copy the result or download it as an .html file.

Does formatting change how the page looks?

Not between block tags, because browsers ignore the whitespace there. A line break added between inline elements such as span or a is shown as a single space, so the formatter keeps inline elements on one line wherever it can. Content inside <pre> and <textarea> is never touched.

Does it show errors in my HTML?

No, this is not a validator. Unclosed tags show up as indentation drifting to the right, but they are not reported as errors. For official validation use the W3C validator, which sends your code to its own server.

Is my code sent anywhere?

No. Formatting runs inside your browser; the HTML you paste never leaves this page and is not stored anywhere.

Can I format an Angular template with this?

Yes. An Angular component template is HTML, so paste the contents of the .component.html file into the left pane. Structural directives such as *ngIf and *ngFor, property bindings in square brackets, event bindings in parentheses and {{ }} interpolation are attribute and text content to the formatter and are kept exactly as written; only the whitespace between block tags changes. The TypeScript class in the .component.ts file is not HTML — paste that into the JavaScript formatter on this site instead.