HTML Formatter & Beautifier

What does the HTML Formatter & Beautifier do?

The HTML Formatter & Beautifier parses minified, unformatted, or messy HTML code, aligns nested DOM element hierarchies, applies consistent indentation (2 or 4 spaces), normalizes tag casing (lowercase or uppercase), and properly handles HTML5 void tags (such as <img>, <meta>, <input>, <br>).

Core Concepts

Understanding HTML formatting mechanics and DOM tree parsing:

• Nested Tag Indentation: Indents child elements relative to their parent containers, producing clean, readable markup structures.
• HTML5 Void Element Awareness: Automatically identifies self-closing and void tags (<meta>, <link>, <hr>, <img>, <input>) so that inner indentation is not inadvertently increased.
• Tag Casing Normalization: Standardizes element names to clean lowercase or uppercase according to coding style guides.

How to use the tool?

1. Paste HTML Markup: Paste your unformatted or minified HTML code into the editor or click Load Sample.
2. Configure Settings:
   • Select your desired Indentation (2 Spaces, 4 Spaces, or Tabs).
   • Choose your preferred Tag Casing (Lowercase, Uppercase, or Unchanged).
3. Beautify & Export: Click Format & Beautify HTML, then click Copy or Download to save your formatted HTML file.

Related Developer Utilities

If you work with web development, HTML markup, and content processing, explore these complementary tools:

• HTML Minifier & Compressor: Compress HTML markup by removing whitespace and comments.
• HTML Syntax Validator: Validate HTML markup against W3C standards.
• HTML to Markdown Converter: Convert HTML documents into clean Markdown syntax.
• HTML Entity Encoder: Convert reserved characters into safe HTML entities.

REST API Integration

Blueutils provides a free REST API endpoint (POST https://blueutils.com/api/html/html-formatter) to programmatically format, indent, and beautify unindented or minified HTML markup code.

API Request Parameters

API Request Payload Examples

cURL

curl -X POST https://blueutils.com/api/html/html-formatter \
  -H "Content-Type: application/json" \
  -d '{
    "rawText": "<div><h1>Hello World</h1></div>",
    "options": {
      "indentSize": 2,
      "tagCase": "lowercase"
    }
  }'

Python

import requests

url = "https://blueutils.com/api/html/html-formatter"
payload = {
    "rawText": "<div><h1>Hello World</h1></div>",
    "options": {
        "indentSize": 2,
        "tagCase": "lowercase"
    }
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = """
            {
                "rawText": "<div><h1>Hello World</h1></div>",
                "options": {
                    "indentSize": 2,
                    "tagCase": "lowercase"
                }
            }
            """;

        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/html/html-formatter"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "elementCount": 4,
  "lineCount": 7,
  "tagCase": "lowercase",
  "formattedText": "<div>\n  <h1>\n    Hello World\n  </h1>\n</div>",
  "output": "<div>\n  <h1>\n    Hello World\n  </h1>\n</div>"
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid input: HTML payload to format cannot be empty."
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Why use an API to format HTML?

Integrating the HTML Formatter API into automated static site generators, email template builders, or content scraping pipelines provides key benefits:

• Rapid Script Validation: Prettifies scraped web pages and rendered server components before saving to artifact stores.
• Optimized Token Efficiency for AI Agents: LLMs often generate unindented or irregularly indented HTML strings. Invoking the API formats the markup into consistent structures without token hallucination.
• Deterministic Accuracy Without Hallucinations: Ensures 100% compliant HTML5 void element recognition and indentation hierarchy.

Native Usage

How to format HTML files locally in terminal environments or scripts:

Windows (CMD / PowerShell)

# Format HTML using PowerShell XML parser
[xml]$html = "<div><h1>Hello World</h1></div>"
$sw = New-Object System.IO.StringWriter
$w = New-Object System.Xml.XmlTextWriter($sw)
$w.Formatting = [System.Xml.Formatting]::Indented
$html.WriteTo($w)
$sw.ToString()

Linux / Unix (Bash)

# Format HTML using xmllint in Linux
xmllint --format --html index.html

Python

Using BeautifulSoup in Python:

from bs4 import BeautifulSoup

html_doc = "<div><h1>Title</h1><p>Text</p></div>"
soup = BeautifulSoup(html_doc, "html.parser")
print(soup.prettify())

Java

Using Jsoup in Java:

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;

public class HtmlFormatterExample {
    public static void main(String[] args) {
        String html = "<div><h1>Title</h1><p>Text</p></div>";
        Document doc = Jsoup.parse(html);
        doc.outputSettings().indentAmount(2);
        System.out.println(doc.body().html());
    }
}