HTML Beautifier

Format, beautify, and indent your HTML code for better readability.

<button onclick="beautifyHTML()">Beautify</button><br />
    <button class="btn-outline" onclick="minifyHTML()">Minify</button><br />
    <button class="btn-outline" onclick="navigator.clipboard.writeText(document.getElementById('hb-in').value)">Copy</button>
  </div>
</div>
<div class="tool-card">
<h2>Formatted Output</h2>
<pre id="hb-out" style="background:var(--surface-2);padding:1rem;border-radius:8px;min-height:100px;font-size:0.85rem;color:var(--success);white-space:pre-wrap;overflow-x:auto;"></pre>
</div>
<div class="tool-card">
<h2>About</h2>
<p style="color:var(--text-muted);font-size:0.9rem;line-height:1.7;">This HTML beautifier adds proper indentation and line breaks to make minified or messy HTML readable. It handles nested tags, self-closing elements, and preserves content within inline elements. All processing runs locally in your browser.</p>
</div>
<div class="related-tools">
<h2>Related Tools</h2>
<div class="tools-grid"><a class="tool-link" href="/box-shadow-generator/">Box Shadow Generator<span>Generate CSS box-shadow visually</span></a><a class="tool-link" href="/timestamp-generator/">Timestamp Generator<span>Generate timestamps in various formats</span></a><a class="tool-link" href="/ip-address-lookup/">IP Address Lookup<span>Find your public IP and location info</span></a><a class="tool-link" href="/json-validator/">JSON Validator<span>Validate and fix JSON syntax errors</span></a></div>
</div>
<footer>
<p>© 2025 <a href="/">Toolist</a></p>
</footer>
<p></main></div>
<p><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"HTML Beautifier","description":"Format and beautify HTML code online for free","url":"https://toolist.cc/html-beautifier/","applicationCategory":"UtilityApplication","operatingSystem":"Any","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"isAccessibleForFree":true}</script><br />
<script>
var voidElements=new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
function beautifyHTML(){
  var html=document.getElementById('hb-in').value.trim();if(!html)return;
  html=html.replace(/\s+/g,' ').replace(/> </g,'>\n<');
  var lines=html.split('\n');var result=[];var indent=0;
  lines.forEach(function(line){
    line=line.trim();if(!line)return;
    if(line.match(/^<\//)){indent=Math.max(0,indent-1);}
    result.push('  '.repeat(indent)+line);
    if(line.match(/^<[a-zA-Z][^>]*[^\/]>$/)&&!line.match(/^<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)/i)&&!line.match(/<\//)){ indent++; }
  });
  document.getElementById('hb-out').textContent=result.join('\n');
}
function minifyHTML(){
  var html=document.getElementById('hb-in').value;
  document.getElementById('hb-out').textContent=html.replace(/\s+/g,' ').replace(/> </g,'><').trim();
}
</script></p>

</div>

</article>

</main>
			
		
	</div>

</div> 
	</div>
<footer
class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon">
			<div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder">
	<div class="ast-builder-grid-row-container-inner">
					<div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row">
											<div class="site-footer-below-section-1 site-footer-section site-footer-section-1">
								<div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder">
				<div class="ast-footer-copyright"><p>Copyright © 2026 toolist | Powered by <a href="https://wpastra.com" rel="nofollow noopener" target="_blank">Astra WordPress Theme</a></p>
</div>			</div>
						</div>
										</div>
			</div>

</div>
	</footer>
	</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astra/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>

<div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both">
	<span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve">
                <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" />
                </svg></span>	<span class="screen-reader-text">Scroll to Top</span>
</div>
			<script>
			/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
			</script>
			<script id="astra-theme-js-js-extra">
var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":"1"};
//# sourceURL=astra-theme-js-js-extra
</script>
<script src="https://toolist.cc/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.12.3" id="astra-theme-js-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://toolist.cc/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://toolist.cc/wp-includes/js/wp-emoji-loader.min.js
</script>
	</body>
</html>