What an HTML formatter does
A formatter rewrites the layout of your markup and leaves its meaning alone. Elements are indented by depth, each block element starts on its own line, long text is wrapped, and attributes get a consistent style. The browser shows the same page, and you can read the code.
Before and after
<div class="card"><h2>Title</h2><p>Some <b>bold</b> text and a <a href="/more">link</a>.</p><ul><li>One</li><li>Two</li></ul></div>
<div class="card">
<h2>Title</h2>
<p>Some <b>bold</b> text and a <a href="/more">link</a>.</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
How it treats whitespace
HTML is not like most code: spaces between inline elements are visible. The formatter keeps this in mind:
- Block elements such as div, p, ul, li, table and section are put on their own lines, with their content indented.
- Inline elements such as a, span, strong, em, img and button stay inside the text they belong to, so a space that you see on the page is not added or lost.
- Text has runs of spaces and line breaks reduced to one space, which is what the browser does, and long text is wrapped at the line width you choose.
- pre and textarea are copied exactly as they are, because their spaces and line breaks are part of the content.
Options
- Indent: 2 spaces, 4 spaces or a tab.
- Line width: wrap text at 80, 100 or 120 characters, or never.
- Attributes: wrap them onto separate lines when a tag is too long, never, or always when there is more than one.
- Void tags: keep as written, or use <br> or <br /> everywhere.
- Quotes: keep attribute quotes, or use double quotes everywhere.
- Keep short elements on one line, such as a list item with a short text.
- Format CSS in style tags and re-indent inline scripts.
- Lowercase tag and attribute names and clean up spacing in class attributes.
- Remove comments. Conditional comments for old Internet Explorer are kept.
What it checks
While it reads your code, the tool reports an element that is never closed, a closing tag that has no opening tag, a comment or attribute quote that is not closed, and a missing doctype in a full page. Optional closing tags, such as the end of a li or p, are understood and not reported.
Related tools: the HTML beautifier for compressed pages, the HTML minifier for smaller files, and the HTML pretty print view with line numbers and colors. Read the HTML formatting guide for conventions, and the HTML minification guide when you publish. You may also need the CSS formatter, the JavaScript formatter or the YAML formatter.