HTML verfraaien en minificeren - HTML gratis online opmaken

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.

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

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.

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.