How to format HTML

Q: What is the keyboard shortcut on this site?

Ctrl + Enter, or Cmd + Enter on a Mac, while the cursor is in the input panel. Tab inside the panel inserts two spaces instead of moving focus, so you can edit comfortably.

Three ways to do it: paste it into a formatter, set your editor to format on save, or run Prettier across a whole folder. Here is each, in order of effort.

Using the formatter on this site

Get the markup into the left panel

Paste it, type it, or press Open file and pick an .html file from your disk. The file is read by your browser, not uploaded. If you have nothing to hand, Sample loads a deliberately scruffy example so you can see what changes.

Set the indent

Two spaces is the default and matches most style guides. Four gives more visual separation. A tab lets each reader choose their own width. If the file is going into an existing project, match whatever that project already uses — consistency beats preference.

Decide about comments

Keep comments is on by default. Leave it on while you are working. Turn it off when you want to see the markup unannotated, or when you are preparing a file to hand to someone and the comments are internal.

Press Format

The arrow between the panels, or Ctrl + Enter from inside the input box. The result appears on the right, along with a character count and the percentage difference.

Take the output

Copy for the clipboard, Download for a file. If you want to run a second operation on the result — validate it, then minify it — press Send result back to input and switch modes.

Formatting in your editor instead

For code you work on regularly, formatting should happen automatically. The setup takes five minutes once and then you never think about it again.

VS Code

VS Code formats HTML out of the box. Open the command palette and run Format Document, or press Shift + Alt + F on Windows and Linux, Shift + Option + F on macOS. To make it automatic, add this to your settings:

settings.json

{
  "editor.formatOnSave": true,
  "html.format.wrapLineLength": 100,
  "html.format.indentInnerHtml": true
}

Prettier

Prettier is the de facto standard across the JavaScript ecosystem and handles HTML well. Install it as a dev dependency and run it over your files:

Terminal

npm install --save-dev prettier
npx prettier --write "src/**/*.html"

Add a .prettierrc to fix the settings for everyone on the project, so the formatting does not depend on whose machine ran it.

Sublime Text, JetBrains, Vim

Sublime: install HTML-CSS-JS Prettify through Package Control. JetBrains IDEs format with Ctrl + Alt + L and let you configure HTML style under Editor → Code Style → HTML. Vim and Neovim users generally reach for prettier through conform.nvim or null-ls.

Formatting from the command line

Useful when you have a directory of files rather than one, or when you want formatting enforced in CI.

Format a whole folder with Prettier

npx prettier --write "**/*.html"

Check without writing — for CI

npx prettier --check "**/*.html"

The second form exits with a non-zero status if any file is not formatted, which is how you make a build fail rather than letting unformatted code merge. tidy, available on most systems, is the older alternative and also repairs structure:

HTML Tidy

tidy -indent -wrap 100 -modify page.html

Tidy rewrites markup as well as reformatting it — it will add missing tags and change some structures. That is occasionally what you want and occasionally a surprise. Work on a copy the first time you run it against something you care about.

Formatting markup inside other languages

HTML rarely lives on its own. A few practical notes.

Template languages. Jinja, Liquid, Twig, Blade and Handlebars all embed their syntax inside text nodes and attribute values, which most HTML formatters pass through unharmed. The exception is a template that opens a tag in one branch of a conditional and closes it in another — no HTML parser can handle that, because the file is not valid HTML in any single state.

JSX and template literals. Do not use an HTML formatter on these. Use Prettier, which understands the host language and formats the markup as part of it.

HTML inside a CMS field. Format it here, then paste it back. Be aware that some editors reformat on save and will undo your work — in those, the raw HTML view is usually the only place formatting survives.

Questions about this

What is the keyboard shortcut on this site?

Ctrl + Enter, or Cmd + Enter on a Mac, while the cursor is in the input panel. Tab inside the panel inserts two spaces instead of moving focus, so you can edit comfortably.

How do I format HTML on a phone?

The same way — the panels stack vertically on a narrow screen and everything works. The one thing that is genuinely harder on a phone is very large files, because the parsing runs on your device.

Can I format several files at once?

Not on this page, which works one file at a time. For a directory, use Prettier from the command line as shown above.

My formatted file looks different from my colleague's. Why?

Different tools make different choices, and so do different settings of the same tool. The answer is not to argue about which is better but to commit a config file — .prettierrc or an .editorconfig — so the project decides rather than the person.

Try it on your own file

The formatter, minifier and validator are all on the front page.

Open the formatter