Zo gebruik je deze tool
- Plak HTML in het invoerveld, open een .html-bestand of probeer het voorbeeld.
- Kies Verfraaien voor ingesprongen, leesbare opmaak of Verkleinen voor compacte uitvoer.
- Kies bij verfraaien 2 spaties, 4 spaties of tabs en bepaal of opmerkingen behouden blijven.
- Kopieer het resultaat of download het als .html-bestand.
Hoe het werkt
De formatter leest de HTML met een soepele tokenizer, ongeveer zoals een browser dat doet, en schrijft de code opnieuw weg. De invoer wordt nooit gerenderd, waardoor scripts in de geplakte code niet kunnen worden uitgevoerd en er niets van het web wordt geladen.
Beautify plaatst elk blokniveau-element (div, p, ul, li, section, table, …) op een eigen regel, ingesprongen op basis van de nestdiepte. Tekst en inline-elementen zoals a, b, em, span, code, img en br blijven bij elkaar op één regel, zodat de spaties tussen woorden en links niet zodanig veranderen dat de weergegeven pagina er anders uitziet. Reeksen spaties en regeleinden in tekst worden samengevoegd tot één spatie, wat browsers sowieso zo weergeven.
De inhoud van de elementen pre, textarea, script en style wordt exact gekopieerd zoals geschreven, inclusief witruimte en alle tekens < en >. Void-elementen zoals br, img, input, meta en link krijgen nooit een sluittag. Zelfsluitende tags zoals <path /> in inline-SVG blijven zelfsluitend.
Minify vouwt witruimte in tekst samen tot één spatie, verwijdert witruimte rondom blokelementen, normaliseert de spaties tussen attributen en verwijdert, als “Opmerkingen behouden” uit staat, de opmerkingen. Conditionele opmerkingen worden altijd behouden.
De tool repareert geen ongeldige HTML, voegt geen ontbrekende tags toe, verandert de volgorde van attributen niet en minificeert de CSS en JavaScript in style- en script-elementen niet. Elementen die open blijven, worden aan het einde van hun bovenliggende element gesloten en een sluittag zonder bijbehorende openingstag blijft zoals geschreven.
Voorbeelden
Gegenereerde markup lezen
Een CMS levert een sjabloon als één lange regel op. Beautify met 2 spaties toont het nav-element, de lijstitems en de hoofdinhoud als een ingesprongen boomstructuur, terwijl “Prices include <strong>VAT</strong>.” op één leesbare regel blijft.
E-mailsjabloon voorbereiden
Minificeer een HTML-e-mail met opmerkingen uitgeschakeld om de omvang te verkleinen. Een <pre>-blok met een prijstabel en de inline <style> blijven exact zoals ze waren.
Structuur controleren
Wanneer een sluitende </div> ontbreekt, toont de opgemaakte uitvoer de volgende elementen één niveau te diep ingesprongen, waardoor je makkelijk ziet waar het element had moeten eindigen.
Veelgestelde vragen
Verandert het verfraaien hoe mijn pagina eruitziet?
In bijna alle gevallen niet. Witruimte binnen blokelementen wordt samengevoegd en omgezet naar regeleinden, die browsers negeren. Tekst en inline-elementen blijven op dezelfde regel en pre, textarea, script en style worden niet gewijzigd. Pagina's die op gewone elementen CSS white-space: pre gebruiken, vormen de uitzondering.
Wordt de CSS en JavaScript in de pagina verkleind?
Nee. De inhoud van script en style blijft exact zoals geschreven, zodat er niets stuk kan gaan. Gebruik de CSS-formatter om een stylesheet apart te verkleinen.
Is het veilig om HTML van een onbekende bron te plakken?
Ja. De invoer wordt uitsluitend als tekst behandeld en nooit in de pagina ingevoegd, zodat scripts niet worden uitgevoerd en afbeeldingen of links niet worden geladen.
Valideert de tool mijn HTML?
Nee. De tool is bewust tolerant en formatteert ongeldige opmaak in plaats van deze te weigeren. Niet-overeenkomende sluittags blijven behouden, zodat de inspringing je helpt ze te vinden, maar er wordt geen foutenlijst gegenereerd.
Privacy
Je HTML wordt alleen in je browser verwerkt en nooit weergegeven of geüpload. Er wordt niets opgeslagen of opgenomen in analyses.