HTML formatteren

Zo formatteer je HTML

1. Plak je HTML, of klik op Bestand openen om een .html- of .htm-bestand te laden (maximaal 10 MB).
2. Kies de Inspringing (2 spaties, 4 spaties of een tab) en of je Regels afbreken na 80 of 120 tekens wilt.
3. Vink en laten inspringen aan als je die binnen <html> wilt laten inspringen, en Commentaar verwijderen om <!-- … -->-commentaar weg te halen.
4. Klik op Formatteren (beautify) voor leesbare code, of op Minifyen voor de kleinste veilige versie.
5. Kopieer of download het resultaat. De statusregel toont de grootte voor en na.

Het resultaat wordt als platte tekst in het uitvoervak getoond. Je HTML wordt op deze pagina nooit gerenderd of uitgevoerd, dus scripts in de code die je plakt kunnen niets doen.

Formatteren: leesbare HTML met consistente inspringing

Formatteren (beautify) gebruikt js-beautify, de formatter achter veel code-editors:

• blokelementen komen op een eigen regel en springen in volgens hun nestingdiepte, terwijl inline-elementen zoals <a>, <b> of <span> in de tekst blijven staan;
• de inhoud van <script> en <style> wordt als JavaScript en CSS geformatteerd;
• <pre> en <textarea> blijven precies zoals ze geschreven zijn, omdat hun witruimte zichtbaar is;
• meerdere lege regels achter elkaar worden teruggebracht tot één;
• met een afbreekbreedte worden lange tekstregels en lange lijsten attributen afgebroken.

Formatteren repareert geen kapotte opmaak: een niet-gesloten <div> blijft open, en de inspringing daarna laat zien waar het probleem zit.

Minifyen: kleinere HTML zonder dat de pagina verandert

Minifyen werkt bewust voorzichtig:

• reeksen spaties, tabs en regeleinden in tekst worden één spatie, precies zoals de browser ze toont;
• witruimte naast blokelementen en head-elementen (<div>, <p>, <li>, <td>, <meta>, <br>…) wordt verwijderd, omdat die nooit wordt weergegeven;
• één spatie tussen inline-elementen blijft staan, zodat <b>big</b> <i>world</i> niet verandert in “bigworld”;
• commentaar wordt verwijderd als Commentaar verwijderen is aangevinkt, behalve conditioneel commentaar (<!--[if IE]>) en commentaar dat begint met <!--!;
• de inhoud van <script>, <style>, <pre> en <textarea> wordt nooit aangeraakt, en attribuutwaarden blijven exact behouden, inclusief aanhalingstekens.

De tool verwijdert geen optionele sluittags, herschrijft geen attributen en comprimeert geen inline JavaScript en CSS: die optimalisaties besparen net iets meer, maar kunnen pagina’s breken. Voor de meeste pagina’s bespaart HTTP-compressie (gzip of Brotli) veel meer dan welke minifier ook, dus minifyen is vooral nuttig voor HTML in e-mails, templates of JavaScript-strings.