Does it preserve inline attributes order?

Yes — attributes stay in source order so git diffs stay clean. If you want attributes sorted alphabetically, use HTML Pretty Print which has that option.

Will it break my script or style blocks?

No. Content inside ` `, ` `, and ` ` is left untouched — only the outer HTML indentation changes.

Does the formatter validate my HTML?

No. For validation use the HTML Validator. The formatter indents even invalid HTML — useful for inspecting broken templates.

Can I minify in the same tool?

Separate tools by design. Use HTML Minify to collapse whitespace; use HTML Formatter to expand it. This keeps each tool's output predictable.

HTML Formatter | DevTools Surf

DevTools Surf

Example: HTML Formatter

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

<div class="card"><h2>Hello World</h2><p>This is a <strong>sample</strong> HTML document.</p><ul><li>Item 1</li><li>Item 2</li></ul></div>

Output

<div class="card">
  <h2>Hello World</h2>
  <p>This is a <strong>sample</strong> HTML document.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

About HTML Formatter

Format and indent HTML code. Part of the DevTools Surf developer suite. Browse more tools in the HTML collection.

Use Cases

Frontend devs cleaning up auto-generated HTML markup
Designers reviewing CMS-exported HTML templates
Email developers formatting inline HTML newsletters
Students learning HTML structure through readable output

Tips

Set your preferred indent size before formatting
Paste minified HTML to instantly see its structure
Use formatted output to spot unclosed or mismatched tags

Fun Facts

Tim Berners-Lee wrote the first HTML document in late 1991, containing just 18 tags.
HTML5 was officially recommended by the W3C on October 28, 2014, after over 7 years of development.
The longest-running HTML specification debate was over the <img> tag's alt attribute requirements, spanning nearly a decade.

FAQ

Does it preserve inline attributes order?: Yes — attributes stay in source order so git diffs stay clean. If you want attributes sorted alphabetically, use HTML Pretty Print which has that option.
Will it break my script or style blocks?: No. Content inside `<script>`, `<style>`, and `<pre>` is left untouched — only the outer HTML indentation changes.
Does the formatter validate my HTML?: No. For validation use the HTML Validator. The formatter indents even invalid HTML — useful for inspecting broken templates.
Can I minify in the same tool?: Separate tools by design. Use HTML Minify to collapse whitespace; use HTML Formatter to expand it. This keeps each tool's output predictable.

Related HTML Tools

HTML Pretty Print HTML Validator HTML Viewer HTML Minify HTML Minifier HTML → Plain Text CSS Formatter JSON Formatter