Untangle messy HTML into clean, indented markup

Plak een willekeurige HTML — zelfs geminificeerde uitvoer op één regel uit een build-pipeline — en de tool maakt deze opnieuw op met correcte inspringing, één tag per regel en consistente witruimte. Kies een inspringing van 2, 4 of 8 spaties. De uitvoer is klaar om in je editor te zetten of in een codereviewopmerking te plakken.

Verfraaien breidt HTML uit voor de leesbaarheid: elke tag op een eigen regel, geneste onderliggende elementen ingesprongen, lege regels tussen secties behouden. Verkleinen verwijdert commentaar, vat opeenvolgende witruimte samen en verwijdert regeleinden, zodat het bestand met minder bytes wordt verstuurd. Gebruik verfraaien om te bewerken en te controleren, en verkleinen voor productie-implementatie.

Nee — js-beautify (de engine onder de motorkap) herkent script- en style-blokken en formatteert hun inhoud met de juiste JS- of CSS-regels, zodat inline scripts geldig blijven en stylesheets leesbaar blijven. Zelfsluitende tags, void-elementen en attributen met namespaces (svg:xmlns, xlink:href) worden allemaal correct verwerkt.

Hij verwerkt gewone HTML en HTML-achtige templates goed, maar pure JSX (uitdrukkingen met accolades, fragmenten, componenttags met hoofdletters) wordt als HTML geparseerd en kan kleine cosmetische problemen oplopen. Voor framework-specifieke code raden we Prettier aan, geconfigureerd voor jouw dialect; voor pure HTML, .htm en templatebestanden is onze tool perfect.

Er wordt niets geüpload. De formatter draait volledig in je browser met js-beautify, dus je kunt veilig interne paginasjablonen, conceptmails of HTML met privégegevens plakken zonder dat er iets je apparaat verlaat.

Minificeren verwijdert HTML-opmerkingen, vervangt elke reeks witruimte tussen tags door één spatie en haalt regeleinden weg. Het resultaat is HTML die identiek wordt weergegeven maar doorgaans 10-30% kleiner is. In combinatie met gzip op de server verkleint dit het initiële paginagewicht merkbaar op contentrijke pagina's.

Ja — klik op Downloaden om de opgemaakte uitvoer op te slaan als output.html of de geminificeerde uitvoer als output.min.html. Het bestand is UTF-8-gecodeerd, dus het werkt even goed met Engelse, Cyrillische, CJK- en rechts-naar-links-inhoud.

Het is een kleine, browser-only tool — zonder hostingkosten — dus bieden we hem gratis aan als onderdeel van onze ontwikkelaarstoolkit. Geen advertenties, geen tracking op de uitvoer, geen limiet op de bestandsgrootte buiten wat je browser in het geheugen kan houden.

Met de Opmaak-modus kies je 2, 4 of 8 spaties inspringing. Kies de breedte die je editor of codestijl gebruikt en kopieer vervolgens het resultaat of download het als output.html, zodat de opmaak direct in je project terechtkomt.

De inspringkiezer (2, 4 of 8 spaties) is alleen van toepassing in de modus Opmaken, want Minimaliseren verwijdert bewust alle witruimte en regeleinden — er blijft niets over om in te springen. Schakel terug naar Opmaken om de inspringbreedte weer effect te zien krijgen.

Terwijl je plakt of bewerkt, voert de tool automatisch een structuurcontrole uit en toont eventuele niet-gesloten, niet-overeenkomende of losse sluittags direct onder het uitvoerpaneel — geen aparte knop nodig. Een groene melding "Geen structurele problemen gevonden" bevestigt dat de opmaak welgevormd is.

Gebruik de Opmaken-modus met inspringing van 2 spaties — dat is de meest voorkomende conventie en houdt diffs compact — en controleer vervolgens het paneel met structurele problemen om te bevestigen dat er geen niet-gesloten tag is achtergelaten. Schakel na de beoordeling over naar de Minify-modus voordat je naar productie gaat om de extra witruimte er weer uit te halen.

Ja — sleep een .html-, .htm- of .xhtml-bestand naar het uploadgebied, of klik erop om te bladeren, en de inhoud wordt rechtstreeks in het invoervak geladen, precies alsof je die had geplakt. Vanaf daar werken Prettify, Minify, inspringbreedte en de structuurcontrole identiek, of de markup nu uit een bestand of uit een plakactie kwam.

Ja — zodra er uitvoer is, verschijnt er een knop Kopiëren naast het uitvoerpaneel en het primaire actiegebied. Erop klikken kopieert het huidige Prettify- of Minify-resultaat direct naar je klembord (het toont kort 'Copied!' ter bevestiging), zodat je rechtstreeks in je editor of een codereview-opmerking kunt plakken zonder een tussentijds .html-bestand op te slaan.