Try HTML formatting examples

Load a case to replace the current input and inspect the output above. Examples are formatted as text in this page; they are not rendered as HTML or executed.

Nested HTML

<section><h2>Example</h2><ul><li>One</li><li>Two</li></ul></section>

✅ Tags receive two-space indentation and line breaks in this sample.

Embedded script

<div><script>const message="<tag>";if(message){console.log(message);}</script><p>Done</p></div>

⚠ JavaScript spacing and line breaks change. Formatting does not execute or validate the script.

Embedded style

<style>.card{color:red;padding:0 4px;}@media(max-width:600px){.card{display:block;}}</style><div class="card">Hello</div>

⚠ CSS is reformatted. Check selectors, cascade and the actual page after copying.

Preformatted text

<pre>  first
    second

  &lt;tag&gt;	end</pre><p>After</p>

✅ The inner spaces, tabs and blank lines in this pre block stay identical in this sample; surrounding markup changes.

Custom element

<user-card data-name="Ada"><span slot="name">Ada</span></user-card>

⚠ This short custom-element sample stays unchanged; component behavior and rendering are not tested.

Vue template

<template><my-card v-if="ready" :title="name"><span>{{ name }}</span><input v-model="name" /></my-card></template>

⚠ This template sample stays unchanged. The tool does not compile Vue or validate directives and expressions.

Unclosed tags

<div><p>Unclosed<span>text</div>

⚠ Output is produced without a validation error; the missing closing tags are not repaired.

Inline whitespace

<p><span>A</span><span>B</span> C</p>

⚠ This sample stays unchanged. Whitespace-sensitive layout still needs a browser check.

Compatibility observed in these examples

These results describe the exact examples above, not every document. Keep the original source and test the resulting page before publishing.

Input	Observed result / limitation
Nested HTML	✅ Tags receive two-space indentation and line breaks in this sample.
Embedded script	⚠ JavaScript spacing and line breaks change. Formatting does not execute or validate the script.
Embedded style	⚠ CSS is reformatted. Check selectors, cascade and the actual page after copying.
Preformatted text	✅ The inner spaces, tabs and blank lines in this pre block stay identical in this sample; surrounding markup changes.
Custom element	⚠ This short custom-element sample stays unchanged; component behavior and rendering are not tested.
Vue template	⚠ This template sample stays unchanged. The tool does not compile Vue or validate directives and expressions.
Unclosed tags	⚠ Output is produced without a validation error; the missing closing tags are not repaired.
Inline whitespace	⚠ This sample stays unchanged. Whitespace-sensitive layout still needs a browser check.

HTML formatting: changes and limitations

Paste HTML or load a case below the editors to compare the source with two-space indentation and new line breaks. Copy the output or download index.html. Embedded JavaScript and CSS may also be reformatted.

The formatter processes source text, not a rendered page. A successful result does not validate HTML, repair missing tags, remove unsafe code or prove identical rendering. Keep the original and review the output before publishing.

Usage Boundaries & Limitations

Formatting changes whitespace and indentation; inline-element spacing can affect the displayed page.
The pre sample preserves its inner text, but one example is not a guarantee for all whitespace-sensitive documents.
Custom elements and Vue templates are text inputs, not compiled or tested components. Large input may block the interface while synchronous formatting runs.

Frequently Asked Questions (FAQ)

What does this HTML formatter change?▼

It adds indentation and line breaks to this page’s nested-HTML example. It also reformats embedded JavaScript and CSS. The compatibility table shows what happened in each sample.

Is an HTML formatter also an HTML validator?▼

No. The unclosed-tags example returns output without a validation error and keeps missing closing tags. Use a separate HTML validator and test the page.

Are pre blocks and Vue templates guaranteed unchanged?▼

No universal guarantee is made. The displayed pre content and Vue template stay identical in these samples; check your own document and use the Vue compiler for template validation.

Recommended Technical Guides

Resolving Inline-Block Whitespace Collapse in HTML Formatting→Script & Style Embedded Language Formatting Engines in HTML→Semantic HTML Markup Cleaning & Search Engine Crawling Benefits→