w3toolhub

Cool HTML Beautifier

Free HTML Beautifier online tool to format a Minified or Ugly HTML code, making it readable and pretty, with the proper indentation.

Ugly HTML

Output

Submit Copy



HTML <style>, <script> formatting:

Why HTML Beautifier Online tool?

Here is a really cool and free HTML Beautifier online tool to beautify HTML code!

Your HTML coding needs to be neat and tidy to make sure both you and your readers understand your page. However, it can be hard to keep track of small details like where you placed a comma or how many spaces are between an image and the text on your page. Use this online tool to clean up your coding.

It is important that HTML code should be formatted properly to make it readable and pretty.

Sample input

<div class=wp-block-column><div class=form-group><div class=checkbox><label><input class=checkbox id=end-with-newline type=checkbox><label for=end-with-newline>End script and style with newline?</label></label></div><div class=checkbox><label><input class=checkbox id=e4x type=checkbox> <label for=e4x>Support e4x/jsx syntax</label></label></div><div class=checkbox><label><input class=checkbox id=comma-first type=checkbox> <label for=comma-first>Use comma-first list style?</label></label></div><div class=checkbox><label><input class=checkbox id=detect-packers type=checkbox> <label for=detect-packers>Detect packers and obfuscators?</label></label></div><div class=checkbox><label><input class=checkbox id=keep-array-indentation type=checkbox> <label for=keep-array-indentation>Keep array indentation?</label></label></div><div class=checkbox><label><input class=checkbox id=break-chained-methods type=checkbox> <label for=break-chained-methods>Break lines on chained methods?</label></label></div><div class=checkbox><label><input class=checkbox id=space-before-conditional type=checkbox> <label for=space-before-conditional>Space before conditional: "if(x)" / "if (x)"</label></label></div><div class=checkbox><label><input class=checkbox id=unescape-strings type=checkbox> <label for=unescape-strings>Unescape printable chars encoded as \xNN or \uNNNN?</label></label></div><div class=checkbox><label><input class=checkbox id=jslint-happy type=checkbox> <label for=jslint-happy>Use JSLint-happy formatting tweaks?</label></label></div><div class=checkbox><label><input class=checkbox id=indent-inner-html type=checkbox> <label for=indent-inner-html>Indent &lt;head> and &lt;body> sections?</label></label></div></div></div>

Output

<div class="wp-block-column">
<div class="form-group">
        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="end-with-newline"/><label for="end-with-newline">End script and style with newline?</label>
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="e4x"/>
            <label for="e4x">Support e4x/jsx syntax</label>
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="comma-first"/>
            <label for="comma-first">Use comma-first list style?</label>
            </label>
        </div>


        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="detect-packers"/>
            <label for="detect-packers">Detect packers and obfuscators?</label>
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="keep-array-indentation"/>
            <label for="keep-array-indentation">Keep array indentation?</label>
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="break-chained-methods"/>
            <label for="break-chained-methods">Break lines on chained methods?</label>
            </label>
        </div>
        
        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="space-before-conditional"/>
            <label for="space-before-conditional">Space before conditional: &#34;if(x)&#34; / &#34;if (x)&#34;</label>
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="unescape-strings"/>
            <label for="unescape-strings">Unescape printable chars encoded as \xNN or \uNNNN?</label>
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input class="checkbox" type="checkbox" id="jslint-happy"/>
            <label for="jslint-happy">Use JSLint-happy formatting tweaks?</label>
            </label>
        </div>
        <div class="checkbox">
            <label>
            <input class="checkbox" type="checkbox" id="indent-inner-html"/>
            <label for="indent-inner-html">Indent &lt;head&gt; and &lt;body&gt; sections?</label>
            </label>
        </div>
    </div>
</div>

Tags:

,