Hoe HTML-embellissement werkt
De beautifier leest je markup tag voor tag, houdt bij hoe diep elk element is genest en emitteert het opnieuw met consistente inspringing. Het verandert nooit wat de pagina weergeeft — alleen hoe de broncode is georganiseerd.
- De tags analyseren. De bibliotheek scant je invoer naar een stroom van tokens: openende tags, sluitende tags, tekstinhoud, opmerkingen en de inhoud van script- en style-blokken. Attribuutwaarden tussen aanhalingstekens en de inhoud van pre- en textarea-elementen worden als enkelvoudige eenheden behandeld, zodat de witruimte daarbinnen intact blijft.
- Nesting bijhouden. Terwijl de beautifier de tokenstroom doorloopt, houdt hij een lopend inspringniveau bij. Elke openende tag die niet zelfsluitend is, verhoogt het niveau met één stap; elke bijbehorende sluitende tag verlaagt het. Die diepte bepaalt hoeveel inspringeenheden voor elke teruggestuurde regel staan.
- Je opties toepassen. Je keuze voor inspringing — 2 spaties, 4 spaties of een tab — stelt de breedte van één niveau in. De waarde voor afbreken bij kolom breekt lange regels met attributen of tekst af zodra ze de gekozen kolom overschrijden. Het limiet voor lege regels perst lange reeksen lege regels samen tot het maximum dat je instelt.
- De markup opnieuw emitteren. Ten slotte drukt de formatter de tags af met de berekende inspringing en regelafbrekingen. Als je inline formattering hebt ingeschakeld, doorloopt de inhoud van elk style-blok de CSS-formatter en elk script-blok de JS-formatter, zodat de ingebedde code aansluit bij de omliggende markup.
Waarom HTML embelleren
- Geminifieerde pagina's lezen. Productie-HTML wordt geleverd zonder regelafbrekingen om bytes te besparen. Embelleren brengt de structuur terug zodat je de gezochte sectie kunt vinden, een ontbrekende sluitingstag kunt opsporen en kunt volgen hoe het document werkelijk nest.
- Inconsistente sjablonen opruimen. Markup die meerdere mensen hebben bewerkt drijft naar gemengde inspringing en tagplaatsing. Één doorgang door de beautifier normaliseert het hele bestand, zodat de volgende commit de aangebrachte wijziging toont in plaats van een muur van geherformateerde witruimte.
- Vertraagt je pagina niet. De meeste online formatters laden hun volledige bibliotheek zodra je de pagina opent. Deze laadt js-beautify alleen wanneer je op Embelleren klikt of Live-modus inschakelt, zodat de eerste keer laden een paar kilobytes kost in plaats van een paar honderd, en de pagina snel blijft.
- Niets verlaat je browser. Alles draait op je apparaat. Je markup wordt nooit naar een server geüpload, wat belangrijk is wanneer de pagina van een klant is, interne URL's bevat of onder een geheimhoudingsovereenkomst valt.
Veelvoorkomende toepassingen
HTML embelleren komt naar voren wanneer iemand markup moet lezen die niet geschreven was om gelezen te worden.
- Een live pagina inspecteren: plak de geminifieerde broncode uit Paginabron bekijken om de markup achter een layoutfout te vinden die je lokaal niet kunt reproduceren.
- CMS-uitvoer opruimen: formatteer een sjabloon dat een paginabouwer in één regel heeft geëxporteerd voordat je het terug naar de repository commit.
- Toegankelijkheids- en SEO-reviews: vouw het document uit om de volgorde van koppen, de landmark-structuur en alt-attributen te controleren ten opzichte van het werkelijke DOM.
Een uitgewerkt voorbeeld
Neem een geminificeerd fragment: <div><p>hi</p><span>x</span></div>. Plak dat hierboven met inspringing ingesteld op 2 spaties en klik op Embelleren. Je krijgt een leesbaar blok terug: de <div> op een eigen regel, de <p>hi</p> en de <span>x</span> elk één niveau dieper ingesprongen, en de bijbehorende </div> eronder uitgelijnd. Schakel de inspringing naar Tabs en elk niveau verschuift van twee spaties naar een tab-teken. Voeg een blok <style>a{color:red}</style> toe, activeer «Ook inline CSS en JS formatteren» en de regel wordt uitgevouwen naar zijn eigen ingesprongen regels in plaats van op één te blijven.
FAQ
Draait dit in mijn browser?
Ja. De js-beautify-bibliotheek wordt lazy geladen de eerste keer dat je op Embelleren klikt of Live-modus inschakelt, daarna gecachet. Je markup verlaat de pagina nooit — geen serverroundtrip, geen upload.
Verandert embelleren hoe mijn pagina wordt weergegeven?
Nee. De beautifier voegt alleen witruimte en regelafbrekingen toe en verwijdert die tussen tags. De browser negeert die witruimte bij het opbouwen van de pagina, dus het weergegeven resultaat is identiek. Het enige om op te letten is inhoud die gevoelig is voor witruimte binnen pre, textarea of inline elementen, die de formatter bewust intact laat.
Wat doet de schakelaar voor inline CSS en JS?
Uitgeschakeld wordt de inhoud van style- en script-blokken precies gelaten zoals je die hebt geplakt. Ingeschakeld doorloopt de CSS in elk style-blok de CSS-formatter en de JavaScript in elk script-blok de JS-formatter, zodat de ingebedde code is ingesprongen in overeenstemming met de omliggende markup.
Wat doet «Afbreken bij kolom»?
Het stelt de regellengte in waarbij een tag met veel attributen, of een lange tekstreeks, over meerdere regels wordt gebroken. Laat op 0 staan om elk element op één regel te houden hoe lang het ook is. Stel in op 80 of 120 en de formatter breekt alles af dat die kolom overschrijdt, waardoor brede elementen leesbaar blijven in een smalle editor.
Browser-gebaseerd HTML embelleren geeft je leesbare markup zonder een bouwstap of upload. Plak een geminificeerde of rommelige pagina, kies je inspringing en afbreekkolomwaarde, beslis of je inline CSS en JS herformatteert, kopieer of download dan het resultaat. Niets verlaat je apparaat, er is geen account nodig en de bibliotheek laadt alleen wanneer je erom vraagt — het openen van deze pagina kost je een paar kilobytes, niet een megabyte.