HTML Formatter
Turn compressed markup into readable HTML. Embedded styles and scripts are formatted in your browser.
Example output is ready. Edit either panel or paste your code to begin.
Local processing · Up to 200,000 input characters
Paste code here. Formatting never executes it.
<section class="card">
<h2>Hello, MRHTML</h2>
<p>Readable HTML starts here.</p>
</section>
<style>
.card {
padding: 24px;
background: #f5f7ff;
}
</style>
<script>
const card = document.querySelector(".card");
card?.classList.add("ready");
</script>
Output is editable. Copy and download use its current contents.
Readable HTML, including embedded code
This formatter uses Prettier’s HTML parser with CSS and JavaScript
plugins. It indents nested elements, lays out long attributes, and formats
recognized code in <style> and <script> elements. Your pasted markup is treated as
text and is never rendered or executed.
How to format HTML
- Paste an HTML fragment or document.
- Choose two spaces, four spaces, or tabs and a preferred line width.
- Select Format HTML or press Ctrl/Cmd+Enter, inspect the output, and copy or download the result.
Example and whitespace behavior
The example turns a compact card component into nested markup and formats its embedded CSS and JavaScript. Prettier uses CSS-aware HTML whitespace rules; inline text and preformatted content may stay on one line to preserve meaning. Line width is a preference, so long strings can exceed it.
Limits and common questions
Input is limited to 200,000 characters. Formatting runs in a worker that you can cancel; jobs stop after ten seconds. Some valid HTML permits omitted closing tags, so this is a formatter rather than a complete HTML validator. Review the result when using custom template syntax. Unsupported embedded languages may stay unchanged.