Formatter HTML Online

HTML Formatter Form

This form allows you make beautiful HTML data and make your HTML code more readable. Online HTML Beautifier also beautifies the css and javascript between the style and script tags.

Press F11 to switch to fullscreen mode
Move to "Paste Code" for Save

About HTML Formatter

About HTML Formatter tool

The Formatter HTML online was created to help with debugging. As HTML data is often output without line breaks to save space, it is extremely difficult to actually read. This tool allows you to solve the problem by formatting HTML code so that it is easy to read and debug.

How it Works?

Just paste your HTML code to the textarea above and click to the button "Formatter" and you will get Formatter HTML in the same textarea. You can copy or save the formatted HTML data.

Example of HTML Formatter

Before:
<!DOCTYPE html><html><head><title>wtools.io - Best Tools</title><style>body{background-color:#d0e4fe}h1{color:red}p{font-family:Arial;font-size:25px}</style></head><body><h1>Frre HTML Formatter</h1><div>Sample text in div</div><ul>Sample UL<li>Test</li><li>Debug</li><li>Execute</li></ul><p>This is a paragraph.</p><table><tr><th>100</th><th>200</th><th>300</th></tr><tr><td>100</td><td>200</td><td>300</td></tr></table></body></html>
After:

<!DOCTYPE html>
<html>

<head>
    <title>wtools.io - Best Tools</title>
    <style>
    body {
        background-color: #d0e4fe;
    }

    h1 {
        color: red;
    }

    p {
        font-family: "Arial";
        font-size: 25px;
    }
    </style>
</head>

<body>
    <h1>Frre HTML Formatter</h1>
    <div>Sample text in div</div>
    <ul>Sample UL
        <li>Test</li>
        <li>Debug</li>
        <li>Execute</li>
    </ul>
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <th>100</th>
            <th>200</th>
            <th>300</th>
        </tr>
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </table>
</body>

</html>
Share