HTML Formatter
Clean up, validate, and beautify your HTML code with custom indents and tag formatting.
Formatting
Indent:
Input HTML
Formatted HTML
What is an HTML Formatter?
An HTML Formatter is a helper utility that structures HyperText Markup Language (HTML) documents, aligning elements by nesting levels to make the markup clean and readable. It can format inline/block elements appropriately and pretty-print internal styles or scripts.
Features
- Custom Indentation: Clean code alignment using 2 spaces, 4 spaces, or Tab.
- Embedded Formatting: Automatically formats CSS inside
<style>blocks and JavaScript inside<script>blocks. - Inline vs Block Tags: Intelligently leaves inline tags like
<span>,<a>, or<strong>flow with the text while breaking block tags like<div>,<section>, or<article>into formatted lines. - Attribute Wrapping: Choose to wrap HTML attributes one-per-line when tags contain multiple attributes.
- Comment Options: Choose to retain or remove HTML comment tags (
<!-- ... -->) from the formatted output.
Example Input
<!DOCTYPE html><html><head><title>My Page</title><style>body{color:#333;margin:0;}</style></head><body><div><h1>Hello World</h1><p>Welcome to <b>DevsTool</b>!</p></div><script>console.log("running");</script></body></html>Example Output
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
body {
color: #333;
margin: 0;
}
</style>
</head>
<body>
<div>
<h1>Hello World</h1>
<p>Welcome to <b>DevsTool</b>!</p>
</div>
<script>
console.log("running");
</script>
</body>
</html>