Developer guide

How to format HTML for readable markup

HTML formatting turns compact markup into an indented structure that is easier to inspect, while whitespace-sensitive content still requires deliberate handling.

Open the HTML Formatter

What HTML formatting changes

An HTML formatter parses markup and prints elements with consistent indentation, line breaks, and attribute layout. It does not validate conformance, sanitize untrusted code, or preview the page.

Readable structure helps reveal missing wrappers, deeply nested components, and unexpected sibling elements. The ToolPixels result remains text, so submitted markup is not executed.

How to format HTML

  1. Paste HTML or open a UTF-8 file.
  2. Choose two spaces, four spaces, or tabs.
  3. Use standard whitespace handling for ordinary HTML.
  4. Choose strict whitespace preservation when custom CSS makes exact spaces significant.
  5. Select Format HTML, review the output, then test the actual page.

A small formatting example

Input

<main><h1>Tools</h1><p>Choose one.</p></main>

Output

<main>
  <h1>Tools</h1>
  <p>Choose one.</p>
</main>

The document hierarchy is now visible without changing the element order.

When whitespace is significant

HTML normally collapses many spaces in rendered text, but CSS such as white-space: pre, inline element boundaries, templating output, and intentionally spaced text can make formatting visible. Strict preservation is safer when those rules are unknown.

Preformatted content also needs care. Script and style contents may remain unchanged even when the surrounding HTML is reformatted.

What to check after formatting

  • Confirm that inline text still has the intended spaces.
  • Check template syntax because PHP and server-side dialects are not plain HTML.
  • Run a separate validator for conformance issues.
  • Review the diff before replacing a maintained source file.
  • Test the rendered page at representative viewport sizes.

Use HTML Formatter in your browser

Format pasted HTML locally with selectable indentation and whitespace sensitivity. The markup stays text and is never run as a preview.

Format HTML now