Free · Fast · Privacy-first

Format HTML for WordPress

WordPress sits behind a large fraction of the web, and the HTML it produces takes many shapes depending on which editor wrote it.

⚡

Preserves Gutenberg block comment delimiters

🔒

Formats classic editor autop output cleanly

✨

Treats PHP tags as opaque content

⚡

Browser-only with no upload of post content

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this HTML Formatter to your website

Drop the HTML Formatter into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/html/html-formatter?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="HTML Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/html/html-formatter?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="HTML Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

WordPress HTML Conventions and How a Formatter Should Handle Them

WordPress produces several distinct flavours of HTML depending on the editor, the active theme, and the plugins installed. The Gutenberg block editor stores each block as an HTML comment delimiter followed by the block markup, which lets the editor re-parse the post into editable blocks while still producing valid HTML for the front end. Classic editor content typically arrives as plain HTML wrapped by the autop function, which automatically adds paragraph tags around runs of text separated by blank lines. Theme template files use a mix of HTML and PHP, where PHP tags appear inline within the HTML to inject dynamic content. A formatter that handles WordPress HTML correctly must respect all three patterns without breaking any of them.

FixTools formats WordPress HTML by parsing the input as standard HTML5, treating Gutenberg block comment delimiters as ordinary HTML comments which are preserved exactly, applying depth-based indentation to the structural elements regardless of which editor produced them, and treating PHP open and close tags as opaque text content within the surrounding HTML. The PHP code itself is not formatted, but the HTML around it is indented normally, which produces readable theme templates without any risk of breaking the PHP. The block comment delimiters are preserved in their exact position because Gutenberg uses them to identify block boundaries when the post is reopened in the editor.

For posts created in the Gutenberg block editor, formatting the post HTML is most useful when you are debugging a rendering issue, migrating content to another platform, or auditing the structure of a post for SEO or accessibility. The block editor stores its blocks in a parseable format that survives formatting, so a formatted post can be pasted back into the block editor and will re-parse into the same blocks. This makes formatting safe even for posts that will continue to be edited in the block editor after the formatting pass.

For theme template files, formatting is most useful during onboarding to an unfamiliar theme, when reviewing a theme for a security audit, or when refactoring template structure. The PHP tags within the template remain functionally unchanged, while the HTML structure around them becomes obvious. Note that theme files should be edited in your local development environment with proper version control, not directly through the WordPress admin theme editor; the formatter is a reading and editing aid, not a deployment mechanism.

HTML Living Standard (WHATWG)MDN: HTML element reference

How to use this tool

💡

Paste WordPress HTML and click Format. The output preserves Gutenberg block comments and PHP tags while applying clean structural indentation to the surrounding markup.

How It Works

Step-by-step guide to format html for wordpress:

1
Copy your WordPress HTML
Copy the HTML from the WordPress post editor in code mode, from an export file, or from a theme template in your local development environment.
2
Paste into the formatter
Paste the HTML into the FixTools input panel. Gutenberg block comments, PHP tags, and autop wrappers are all handled correctly without special configuration.
3
Click Format
Click Format to apply depth-based indentation. Block delimiters and PHP tags are preserved exactly while the surrounding HTML structure becomes readable.
4
Use the formatted output
Use the formatted output for editing, auditing, or documentation. Paste it back into the Gutenberg editor if needed; the block parser will re-parse the formatted HTML into the same blocks.

Real-world examples

Common situations where this approach makes a real difference:

Migrating WordPress content to a static site generator

A developer migrating a WordPress blog to Next.js formats each post export through FixTools first. The formatted output reveals the Gutenberg block structure clearly, which informs the mapping from WordPress blocks to Next.js components. The migration completes faster and with fewer errors than it would have against compressed source.

Auditing a third-party WordPress theme for accessibility

An accessibility auditor formats every template file in a third-party WordPress theme to scan for missing alt attributes, improper heading hierarchies, and missing form labels. The formatted versions make the issues obvious within minutes, while the compressed source would have required hours of careful reading.

Debugging a Gutenberg block rendering issue

A developer formats the post HTML of a page where a custom Gutenberg block renders incorrectly. The formatted output reveals that the block delimiter comment is malformed, which is why the block editor cannot parse the block back into its editable form. Fixing the delimiter restores both the front-end rendering and the editor parsing.

Cleaning up classic editor autop output

A blog owner formats a long classic editor post that the autop function has compressed into a few long paragraphs. The formatted version exposes the actual paragraph structure, which the owner uses as the basis for restructuring the post into proper Gutenberg blocks for improved future maintainability.

When to use this guide

Use this when you have WordPress post HTML, theme template HTML, or any markup exported from a WordPress site that needs readable indentation.

Pro tips

Get better results with these expert suggestions:

Format Gutenberg posts before migrating to another platform

When migrating WordPress content to another CMS, format the post HTML first to make the structure visible. The migration mapping from WordPress blocks to the target platform components is much easier when the source block structure is obvious in the formatted output. Compressed Gutenberg output frequently leads to migration errors where blocks are missed or mapped incorrectly, because the block delimiters are hard to scan against a continuous line of text.

Format theme templates for security audits

When auditing a WordPress theme for security issues, format every template file first. The formatted templates make it obvious where user input is interpolated into HTML, where escaping functions like esc_html and esc_attr are called and where they are missing, and where dynamic content might allow injection. A security audit against compressed theme source frequently misses issues that would be obvious in formatted source, simply because the reading load is too high to maintain consistent attention across long files.

Format before pasting into the Gutenberg editor

When pasting HTML content from another source into the Gutenberg editor, format it in FixTools first. The block editor handles formatted HTML better than compressed HTML, particularly when the content includes nested lists or tables that the editor needs to parse into its own block structures. Formatted input produces cleaner blocks in the editor and reduces the manual cleanup work after pasting.

Use formatted output for documentation of custom themes

When documenting a custom WordPress theme for handoff to a client or another developer, include formatted examples of the key template files. The formatted documentation communicates the theme structure clearly, which makes future maintenance significantly easier. Documentation based on compressed source is less useful because each reader has to format the source mentally before they can engage with it.

Keep Gutenberg block comments intact

Do not delete or modify the wp:block comment delimiters in formatted Gutenberg output. The block editor uses them to parse the post back into editable blocks.

Format theme files in your editor, not in WP admin

Edit theme files locally with version control, not through the WordPress admin theme editor. Use FixTools to read and clean the source before committing.

Run formatted posts through the validator

After formatting, run the post HTML through the FixTools HTML validator to catch any structural issues that the original compressed form may have hidden.

FAQ

Frequently asked questions

No. Gutenberg block delimiter comments are preserved exactly as written, including the wp: prefix and the JSON-like attribute payloads that some blocks include. The block parser in the Gutenberg editor can re-parse the formatted HTML into the same blocks because the delimiter comments are unchanged. You can format a Gutenberg post, paste it back into the editor, and continue editing without any loss of block structure or attributes. This applies to both core blocks and custom blocks registered by themes or plugins.

Yes. PHP open and close tags are treated as opaque text content within the surrounding HTML, which means the PHP code passes through the formatter unchanged while the HTML around it is indented normally. This produces readable theme templates without any risk of breaking the PHP. Inline echo statements, control structures spanning multiple lines, and complex template tag calls all pass through correctly because the formatter does not attempt to interpret the PHP. Format the HTML structure and use a PHP-aware tool such as PHP_CodeSniffer for the PHP code itself.

Yes, although REST API responses are JSON rather than HTML, so the JSON should first be formatted with the FixTools JSON formatter. If the JSON contains rendered HTML strings inside fields such as content.rendered, extract those strings, unescape any JSON-specific escaping, and paste the HTML through the FixTools HTML formatter. This two-step process produces a fully readable view of the API response that is useful for debugging custom themes, plugins, or client integrations with the REST API.

Yes, formatted theme files are dramatically easier to review and maintain than compressed ones. The standard approach is to format with a project-wide tool such as Prettier with the PHP plugin, configured to run on pre-commit, so every committed change lands in a consistent format. FixTools is well-suited for ad-hoc formatting of files you are reading or auditing outside the commit flow, particularly when you are looking at a theme that does not have a project-wide formatting setup of its own.

No, formatting does not affect SEO because search engines render and index the visual page output, not the source HTML formatting. Browsers and crawlers treat whitespace between block-level elements as insignificant, so the rendered DOM is identical for formatted and compressed HTML. The SEO benefits of cleaner HTML come from better semantic structure, accurate heading hierarchies, descriptive alt attributes, and well-formed schema markup, all of which become easier to verify and improve once the source is formatted. Formatting enables better SEO work even though it isn't SEO work itself.