How block and inline elements are treated
HTML elements fall into two groups. Block elements, such as div, p, ul, section and table, start on a new line, so the formatter puts each on its own line and indents its children. Inline elements, such as a, span, strong, em, img and button, sit inside a line of text, so they stay in the line with their words.
Keeping inline elements in the text matters. A space between two inline elements shows up on the page, and a missing space does too. The formatter does not add white space between inline elements that touch in your source.
Text inside pre and textarea is copied exactly, because white space is part of its content.
When formatting can change how a page looks
Browsers collapse runs of white space, so re-indenting markup normally changes nothing on screen. There are a few places where it can:
- Between inline-block elements such as buttons or images laid out in a row, where a line break between tags renders as a small gap.
- Inside elements styled with
white-space: preorpre-wrap, which keep their line breaks. - In text that a script reads back from the page with
innerHTMLortextContent.
If the page depends on any of these, compare it before and after. Wrapping long lines at 80 or 120 characters moves text between lines but does not change the words.
Style and script blocks
By default the CSS inside style tags and the JavaScript inside script tags are formatted with the same engines as the CSS formatter and the JavaScript formatter. Turn the option off to keep those blocks exactly as written, for example when they contain a template language.
Template tags such as {{ name }}, {% if %} and <% %> are kept as text. The layout around them can be rough, because the formatter does not understand the template language.
Formatting is not validating
This tool lays out what you give it. It does not check that tags are closed or nested correctly, that attributes are valid, or that the page would pass a validator, and it never adds or removes a tag. After formatting, the result is compared with your input, and a note appears if anything other than white space differs. Browsers repair broken HTML silently, so a page can look fine and still have errors. For strict XML-style markup, such as XHTML or SVG, use the XML formatter, which reports mismatched tags.