HTML Formatter / Beautifier

Minified or hand-edited HTML is hard to read and harder to debug. The formatter puts each block element — sections, headings, paragraphs, lists, tables — on its own line with consistent indentation, while text and inline tags such as links and bold stay together in their sentence. Inline CSS and JavaScript can be re-indented too.

How to use this tool

1. Paste your HTML.
2. Pick 2 spaces, 4 spaces or tabs, and a line length for wrapping long text (0 turns wrapping off).
3. Choose when attributes go on separate lines and whether to re-indent inline style and script code.
4. Copy the formatted HTML; the note below it lists unclosed or stray tags with their line and column.

Formula

block element → own line, children one level deeper; inline content → one line, wrapped only at existing spaces; <pre>, <textarea> → copied exactly

In HTML a line break counts as a space, so adding one between two inline tags (for example <b>a</b><i>b</i>) would put a visible space between the words. The formatter therefore only adds line breaks around block elements, where browsers ignore whitespace, and only wraps text where a space already exists. End tags that HTML lets you omit, such as </li> or </p>, are not added.

Example

The sample page comes out as 32 lines: <html>, <head> and <body> each on their own line, <header>, <nav> and <main> indented beneath, the sale paragraph kept on one line with its <strong> and <time> inline, both list items on their own lines without inventing </li>, the <pre> block untouched, and the script body re-indented by its braces.