Online HTML Code Pretty Format | Beautify your HTML instantly

Make messy or minified HTML readable again. Our Online HTML Code Pretty Format tool reformat HTML with consistent indentation, line breaks, and optional attribute wrapping. It supports embedded CSS and JavaScript, lets you pick indentation size (tabs or spaces), and shows a live preview so you can verify output before copying.

Features

  • Fast, client-side formatting (no server upload)
  • Supports HTML, inline CSS & JavaScript
  • Choose indentation: 2, 4 spaces or tabs
  • Option to wrap long attributes for improved readability
  • Live preview
  • Copy to clipboard & download formatted file

This tool focuses on readable output: predictable indentation, sensible line breaks, and options to match your project's coding style.

How it works

  • Step 1: Paste your HTML into the input pane.
  • Step 2: Choose options, indentation, wrap attributes
  • Step 3: Click Format to run the formatter. The formatted HTML appears in the output pane and the live preview updates.
  • Step 4: Copy the formatted code or download as .html.

Paste HTML code here

You can paste your HTML code here or drag an drop file or upload an HTML file from your device to format and beautify it instantly.

Fetch External Website Source Code

Enter any URL and retrieve its full HTML source code.

×
?Get source code from your current URL.

Set Options

or
?Indent Size Number of spaces or characters to use per indentation level.

Indent With Tabs Use tabs (\t) for indentation instead of spaces.
?Preserve existing line breaks in the input.
?Maximum number of consecutive line breaks to preserve.
?Maximum characters per line (0=disable wrapping)
?Wrap attributes. Options:
"auto": Automatically wraps attributes when they exceed the wrap length.
"force": Each attribute goes on its own line.
"force-aligned": Each attribute on a new line aligned with the first one.
"force-expand-multiline": If more than one attribute - all go multiline.
"aligned-multiple": Align only when attributes exceed the line length.
"preserve": Never touches existing attribute line breaks and indentation - only adds indentation to match current level.
"preserve-aligned": Like "preserve", but will re-align the=signs of preserved blocks.
?Automatically beautifies JavaScript contained in <script> tags
?Automatically beautifies CSS contained in <style> tags.
?Tags that should NOT be formatted (pre, code, textarea).
Put tag names separated by commas.
?Tags whose inner content should NOT be formatted (textarea, pre). Typical use: script, style, textarea, pre.
Put tag names separated by commas.
?Add extra newline before these tags.
Put tag names separated by commas.
?List of inline tags that should not receive line breaks. Add tag names separated by commas.
?Completely replace the default inline tags list with your own tags.
?Keep the default inline tags and add your custom tags.
Format code

Format Options

Below are all available options for customizing how your HTML code is formatted.

indent with tabs

Uses tab characters instead of spaces when indenting your HTML structure. When enabled, each indentation level is represented by \t instead of multiple spaces.

All nested elements shift using tabs, and the indent_size setting becomes irrelevant.

indent size

Defines how many spaces should be inserted per indentation level when indent_with_tabs is turned off.

Useful for enforcing consistent formatting guidelines for example, 2-space indentation for compact HTML or 4-space indentation for readability.

preserve newlines

Controls whether existing empty lines between elements should be kept or removed during formatting.

When enabled, blank lines remain. when disabled, pretty format tool compresses the document by removing them entirely.

max preserve newlines

Sets the maximum number of consecutive blank lines to keep when preserve_newlines is enabled.

Useful for preventing excessive spacing or large accidental gaps created by copy-paste operations.

Extra blank lines beyond the limit are collapsed, keeping the layout tidy but still readable.

wrap line length

Specifies the maximum line length before wrapping. When set to 0 (default), lines are not wrapped. Setting a positive number will cause long lines to wrap at approximately that character position.

wrap attributes

Controls how attributes in an HTML tag should be arranged - either on the same line or wrapped onto new lines.

Helps manage long or complex elements where attributes become difficult to read, such as components, forms, or tags with many data- attributes.

Attributes may appear on their own lines, aligned, expanded, or grouped depending on the chosen wrapping style.

  • "auto" wrap when line exceeds wrap_line_length
  • "force" always wrap
  • "force-aligned" wrap and align
  • "force-expand-multiline" each attribute on new line

unformatted

Prevents the pretty format tool from reformatting specific tag blocks, keeping them exactly as written without splitting them across multiple lines.

Recommended for inline or micro-tags such as <span>, <code>, <a>, where spacing should remain compact.

The pretty format tool leaves the entire tag untouched. opening tag, content, and closing tag remain on one line.

content unformatted

Stops the pretty format tool from modifying the content inside certain tags, while still allowing the opening and closing tags to be formatted normally.

Ideal for tags that contain preformatted text, such as <pre>, <textarea>, or code blocks where white-space must remain unchanged.

The inner content stays exactly as originally typed line breaks, spacing, indentation all preserved.

extra liners

Forces specific tags to always start on their own new line, regardless of surrounding formatting.

Commonly used for major structural tags like <html>, <head>, or <body> to keep the document visually clean and properly separated.

Selected tags are always placed on a new line, improving readability of the overall document structure.

inline

Specifies which tags should be treated as inline elements so they are never expanded, split, or placed on new lines.

Useful for small elements such as <b>, <i>, <strong>, or custom inline tags used in templating systems.

HTML containing these tags remains compact, with no indentation or line breaks inserted around them.

Related: