How to format HTML
- Paste your HTML into HTML: a full page, a template or a fragment copied from your browser's developer tools.
- Pick 2 or 4 spaces for Indent.
- Copy the formatted HTML or download it as an .html file.
What the formatter changes
- Each block element, like div, ul, li and main, starts on its own line, indented one step deeper than its parent.
- Inline elements, like a, strong, em and span, stay inside the line of text they belong to.
- CSS in style tags and JavaScript in script tags are formatted with the same indent.
- Text, attributes and the order of elements stay as you wrote them.
Where messy HTML comes from
Most hard-to-read HTML is generated: minified output from a build step, markup saved from a website, email templates exported from a newsletter tool or content pasted out of a CMS. Formatting it is usually the first step before editing it by hand or comparing two versions with a diff tool.