About this HTML beautifier
HTML copied from a page source, a CMS, or an email builder is often one long line or a tangle of inconsistent indentation. This beautifier reads the markup and writes it back with each block element on its own line, nested elements indented, and short elements such as a title or a list item kept on a single line. Inline elements like links, bold text, and spans can stay inside their sentence. The contents of pre and textarea are never touched, and script and style blocks are re-indented as a whole. It also reports unclosed and stray tags.
How to format HTML
- Add your HTML. Paste markup into the box, press Open an HTML file, or press an example.
- Choose the mode and style. Pick Beautify or Minify, choose Indent with, and tick the options you want.
- Press Format HTML. The formatted markup appears with tag warnings, counts, and the most used elements.
- Copy or download. Press Copy HTML, or Download to save it as an .html file.
Frequently asked questions
Can formatting change how my page looks?
Rarely. Browsers ignore extra whitespace between block elements, and the contents of pre and textarea are kept exactly. With inline elements kept on one line, the spaces between words also stay as they were.
What do the tag warnings mean?
An unclosed warning means an element such as a div was opened but its closing tag is missing. A stray warning means a closing tag has no matching opening tag. Elements whose closing tag is optional in HTML, such as li and p, are not flagged.
What does keeping inline elements on one line do?
Links, strong, em, span, and similar elements stay inside the text they belong to, so a paragraph reads naturally. Untick it to put every element on its own line, which is useful for inspecting deeply nested markup.
How are attributes written?
Every attribute value is wrapped in double quotes, and attributes without a value, such as required, are kept as they are. Tick sort attributes to list them alphabetically, which makes two versions of a tag easier to compare.