Skip to content
Free tool

Online HTML Formatter: Beautify HTML & CSS code

The HTML Formatter, also called an HTML Beautifier, turns minified or messy HTML and CSS into indented, readable code. For example, it turns a single line like body{margin:0;font-family:Arial,sans-serif}… into neatly indented CSS rules, using 2 or 4 spaces or tabs. It detects the language automatically. Free, no sign-up, and your code stays in your browser.

Built by Luca Stanek

Code ready? Take your site online with fast, reliable web hosting.

Take your site live

Formatted code

The formatted code will appear here once you paste something on the left.

Paste your code on the left or load an example. The result appears instantly.

Your code stays in your browser: it is neither uploaded nor saved.

Example result

What this HTML & CSS Formatter does to your code

Code as it comes from a minifier or editor, and the result with 2-space indentation.

HTML

Input:

<nav class="navbar"><ul><li><a href="/">Start</a></li><li class="active"><a href="/tools">Tools</a></li></ul></nav><main><h1>Willkommen</h1><p>Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>, der sich nicht um   Leerzeichen schert.</p><img src="logo.png" alt="Logo"></main>

Result:

<nav class="navbar">
  <ul>
    <li><a href="/">Start</a></li>
    <li class="active"><a href="/tools">Tools</a></li>
  </ul>
</nav>
<main>
  <h1>Willkommen</h1>
  <p>
    Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>,
    der sich nicht um Leerzeichen schert.
  </p>
  <img src="logo.png" alt="Logo">
</main>

CSS

Input:

body{margin:0;font-family:Arial,sans-serif}.btn,.link{color:#fff;background:#0a84ff;padding:8px 16px}.btn:hover{opacity:.8}@media (max-width:600px){.btn{display:block}}

Result:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.btn,
.link {
  color: #fff;
  background: #0a84ff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .8;
}

@media (max-width: 600px) {
  .btn {
    display: block;
  }
}

Overview

What is an HTML Formatter?

An HTML formatter, also called an HTML beautifier, puts HTML and CSS code into a readable layout: one structure per line, with consistent indentation. This formatter detects the language automatically, indents with 2 or 4 spaces or tabs, opens files up to 2 MB, and changes only whitespace and line breaks, apart from a missing final CSS semicolon. It runs for free in your browser, with no upload.

Format HTML

Block elements appear on separate, indented lines, and body text wraps at 100 characters. You can also put each attribute of long tags on its own line.

Format and beautify CSS

Selectors, declarations, and braces appear on separate lines, including inside @media. Long value lists such as transition are split across multiple lines.

Language detected automatically

Tags suggest HTML; curly braces, @-rules or properties with colons suggest CSS. You can also select HTML or CSS manually.

Warnings with line and column

The tool reports unclosed tags and brackets with a line and column; clicking highlights the location in the input. It is not a validator.

Result with syntax highlighting

You'll also see the number of lines, as well as elements or rules and declarations. Results over 150,000 characters appear without colors.

In your browser, no upload

Your code is neither uploaded nor stored. You can open files up to 2 MB and copy or download the result.

How it works

How to format HTML and CSS online

Five steps, with no sign-up or installation.

Step 1

Paste code

Paste HTML or CSS into the field on the left, open a file (.html, .htm, .xhtml, .css, or .txt, up to 2 MB), or load the HTML or CSS example.

Step 2

Check language

Leave the language set to Automatic, or select HTML or CSS. The detected language appears below the result.

Step 3

Choose indentation

Indent with 2 spaces, 4 spaces, or a tab. For HTML, choose whether long tags wrap their attributes or stay on one line.

Step 4

Check notices

Warnings and errors show the line and column. Click the adjacent link to highlight the location in your input.

Step 5

Apply result

Copy the formatted code or download it as formatted.html or formatted.css.

Rules

How the HTML & CSS Formatter formats code

Block elements

div, ul, table, and similar elements appear on separate lines, with their contents indented. Short elements like a paragraph stay on one line.

Body text

Multiple spaces become one, and long paragraphs wrap at 100 characters. Spaces between inline tags are preserved.

Long tags

If a tag doesn't fit on one line, each attribute gets its own line. You can turn this off.

Unchanged

The contents of pre and textarea, comments, attribute values, and text stay as they are. style is formatted as CSS; script may only be reindented.

CSS: Selectors, declarations, and braces appear on separate lines; a missing final semicolon is added. Limitations: The code is not validated, JavaScript is not reformatted, and SCSS and Less are not supported.

Discover more

More tools

Compare text online (Diff Checker)

Compare text online: Compare two texts, configs, or code versions, see differences line by line and word by word, and copy them as a Unified Diff. Runs entirely in your browser.

Built by Dimitri Heissler

JSON Formatter

Format, minify, and validate JSON with syntax highlighting, error messages, and downloads, entirely in your browser.

Built by Jakub Martyniak

XML Formatter & Validator

Validate, format, minify, and automatically repair XML (unescaped characters, missing tags, missing declaration)—100% in your browser, without uploading.

Built by Justin Schuessler

Regex Tester

Test regular expressions live against the native JavaScript engine—with match highlighting, capture groups, and replace mode, all in your browser.

Built by Jakub Martyniak

URL Encoder & Decoder

Encode and decode URLs and text online: compare encodeURIComponent, encodeURI, and form encoding, with a query parameter table and UTM link builder. Runs entirely in your browser.

Built by Dimitri Heissler

.htaccess Generator & htpasswd Generator

Create Apache .htaccess and .htpasswd files online: 301 redirects, HTTPS, password protection with bcrypt, WordPress rules, error pages, caching, GZIP, and hotlink protection. Runs entirely in your browser.

Built by Dimitri Heissler

Markdown Editor

Write Markdown online with a live preview: GitHub READMEs and Discord messages, tables from Excel, and PDF or HTML export. Entirely in your browser.

Built by Dimitri Heissler

SQL Formatter Online (Format & Beautify SQL)

Format, beautify, and minify SQL online for MySQL, MariaDB, and PostgreSQL, with indentation and keyword casing. Runs entirely in your browser, with no uploads.

Built by Luca Stanek

Color Picker

Convert colors between HEX, RGB, HSL, HSV, and CMYK in real time, find the closest CSS named color, and check WCAG contrast against black and white—all in your browser.

Built by Justin Schuessler

FAQ

Frequently asked questions

Quick answers about formatting HTML and CSS with this tool.

An HTML formatter, also called a beautifier, puts code into a readable layout: one structure per line, with consistent indentation. Useful for minified code, source code from a browser, or code from an editor without a formatting feature. This formatter handles HTML and CSS.

Paste the code on the left; the result appears immediately on the right. Choose 2 spaces, 4 spaces, or a tab for indentation, and decide whether to wrap attributes in long tags. Then copy the result or download it as formatted.html.

Paste your CSS: The tool recognizes it by curly braces, @-rules, or properties with colons, but you can also select CSS manually. Each rule gets separate lines for the selector, declarations, and braces, including inside @media. Long value lists such as transition are split across lines, and a missing final semicolon is added. The download is named formatted.css.

No. Only spaces and line breaks change. Tags, attributes, values, text, and comments stay the same. The only exception: In CSS, a missing semicolon is added after the final declaration.

The formatter only changes whitespace, indentation, and line breaks in the source code to make it easier to read. To style text in HTML, use tags such as strong, em, or br. The tool neither adds nor changes those tags.

The contents of pre and textarea remain unchanged because every space matters there. CSS in style is formatted; script may be reindented but is not reformatted.

No, it doesn't validate or minify. It only formats HTML and CSS: JavaScript inside script isn't reformatted, and SCSS and Less aren't supported. It does warn you about unclosed tags, closing tags without an opening tag, and unmatched curly braces, with line and column numbers. An unterminated comment, quoted string, or tag produces an error message instead of a result.

No. Everything runs in your browser, with no upload or storage. You can open files up to 2 MB: .html, .htm, .xhtml, .css, or .txt.

Any more questions?

Contact Support
Building a website?

Your website needs reliable hosting

A ZAP-Hosting VPS reliably gets your site online.

4.4/5 Trustpilot32,000+ Active serversSince 2010
View hosting

No setup. No risk. Online in seconds.

Flexible TermCancel anytimeOnline in 60 seconds

Looking for more tools? View all developer tools