About the HTML Formatter
Minified pages, CMS output and copied snippets tend to arrive as one long line. This formatter reindents the markup so that nested elements step in one level at a time, puts block elements on their own lines, and keeps inline elements such as <a>, <strong> and <span> inside their text so that spacing between words does not change. The CSS in <style> and the JavaScript in <script> tags are formatted too, with the same indent.
Whitespace-sensitive elements are protected: the contents of <pre>, <textarea> and <code> are not touched. Comments and conditional comments are kept. By default <head> and <body> sit at the same level as <html>, which matches most style guides; tick the option to indent them instead.
The formatter is tolerant of HTML that would not pass a validator, because HTML allows unclosed <p> and <li> tags. To find real structural mistakes use the HTML Validator. For a rendered view of the page, open it in the HTML Viewer.
How to use
- Paste HTML on the left or upload a
.htmlfile. - Choose an indent and, if you want long lines broken, a wrap width.
- Copy or download the result. Swap sends it to the HTML Minifier.
Common questions
- Will formatting change how the page renders?
- Whitespace between block elements is insignificant in HTML, so the page looks the same. Inline elements are kept in their text flow to avoid adding or removing spaces between words.
- Does it fix broken HTML?
- No. It reindents what you give it. Use the HTML Validator to find unclosed or mismatched tags first.
- Can it format Blade, Twig, JSX or Vue templates?
- Plain template tags inside HTML usually survive, but JSX and Vue single-file components are better served by the JSX Formatter and Vue Formatter, which understand their syntax.
- Are inline CSS and JS formatted?
- Yes, the contents of style and script tags are formatted with the same indent as the markup.