HTML Formatter

What HTML Formatter does

Format, minify, sort attributes, and validate HTML with optional accessibility checks.

How to use it

1. Paste HTML or open a file. Indentation defaults to 2 spaces. One attribute per line, alphabetical attribute sorting, comment removal, and ID overuse advice are enabled by default; each can be turned off. Elements with a single attribute stay on one line.
2. Edit your input in the HTML tab, then switch to Formatted or Minified above the shared HTML window. Results update automatically as you type or change options. Result tabs are read-only and can be selected, copied, or saved. Validation reports appear under HTML and Formatted.
3. Every tab shows source line numbers. Validation locations match the HTML in the active tab; if formatting fails, the report refers to HTML. No word wrap is checked by default: long lines stay on one row and scroll horizontally. Uncheck it to wrap text across multiple rows without changing the HTML. Review errors, warnings, and size statistics, then copy or save the result.
4. Select an issue location to scroll to and highlight its code. Filter issues by severity or category, and follow each rule documentation link for more detail.

Formats and limits

• HTML documents and fragments up to 2 MB. Choose HTML, Angular, or Vue template mode. Formatting line width defaults to 80 characters and is a target, not a hard limit; Word wrap only affects the display.
• Syntax highlighting colors tags, attributes, values, comments, and template expressions in the editable HTML and read-only results. Colors and issue highlights never become part of copied or saved HTML.
• CSS and JavaScript are preserved by default. Enable their separate formatting or minification options to transform inline style and script blocks. JavaScript minification keeps variable names and unused code. External files, data scripts such as JSON-LD, preprocessors, and Vue script setup blocks are preserved. Invalid embedded code reports an error with its block location.
• Minify collapses ordinary text whitespace but preserves inline word spacing and decoded attribute values. Line breaks inside attributes become HTML character references so multiline bindings stay on one source line. Scripts, styles, preformatted text, and retained comments can still require multiple lines.
• Comment removal is optional and preserves conditional comments and comments inside preformatted content. Attribute sorting preserves original attribute values.
• Minified shows bytes saved and percentage reduction using UTF-8 sizes. If character references or other changes make output larger, it shows the size increase instead.
• Validation uses HTML-Validate. Accessibility checks cover common static issues; they do not replace a full accessibility audit. ID overuse warns when at least five elements have IDs and more than half of all elements have IDs.
• Expand Document checks to enable checks individually for an HTML5 doctype, required element content, empty page titles, and required attributes. The doctype check is intended for complete pages; leave it off for snippets.
• Expand HTML quality and JavaScript checks to flag deprecated elements or attributes, repeated CSS classes, inline styles, buttons without a type, media autoplay, skipped heading levels, inline JavaScript event handlers, and javascript: URLs. These optional checks start off.
• Embedded CSS and JavaScript, HTML and accessibility checks, Document checks, and HTML quality and JavaScript checks all start collapsed. Select a panel heading to expand it. Collapsing a panel keeps its selected options enabled.

Privacy

Processing stays in this tab. HTML is shown as text, never executed, uploaded, or stored. Formatting, validation, word wrap, and syntax highlighting preferences are remembered in this browser. Reset options restores defaults without clearing your HTML.

Related tools

• JSON Formatter - format and explore JSON data.
• Text Diff - compare original and formatted HTML.
• Markdown Previewer - write Markdown and view sanitized HTML.