HTML-formatter
Laat een HTML-document inspringen zonder te veranderen hoe het wordt weergegeven, volledig in je browser.
Draait volledig in je browser. Er wordt niets geüpload, gelogd of opgeslagen.
Plak een geminificeerde of slecht ingesprongen pagina en lees haar zoals het hoort. De opmaak gebeurt in je browser, en het document dat eruit komt wordt precies zo weergegeven als het document dat erin ging.
Hoe het werkt
Het document wordt in een boom ingelezen — daar worden de lege elementen, de inhoud van script en style en de optionele sluittags van HTML afgehandeld — en daarna opnieuw geschreven met de nieuwe inspringing.
Waar de regels breken, bepaalt de manier waarop een browser witruimte leest, niet wat er mooi uitziet. Elke reeks witruimte wordt als één spatie weergegeven, dus een spatie veranderen in een regeleinde met inspringing verandert niets. Er een maken waar er geen was, verandert wel iets: zo worden twee aan elkaar grenzende inline-elementen er twee met een spatie ertussen.
Daarom wordt witruimte alleen toegevoegd of weggehaald tussen blokelementen en aan de randen ervan, waar een browser er geen weergeeft. Dat is de uitzondering waardoor een geminificeerde pagina open te vouwen is, en het is ook de reden dat een reeks inline-elementen op de regel blijft waar hij stond.
Een tag waar de formatter nog nooit van heeft gehoord, wordt als inline behandeld, want dat is het antwoord dat geen witruimte toevoegt en de pagina dus niet kan veranderen.
Voorbeelden
| Geval | Invoer | Resultaat |
|---|---|---|
| Een lijst zonder inspringing | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Veelgestelde vragen
Wordt mijn pagina ergens naartoe gestuurd?
Nee. De formatter is JavaScript dat op deze pagina draait. Er wordt niets geüpload, niets gelogd en niets opgeslagen: je kunt de netwerkverbinding verbreken en de tool blijft werken.
Waarom zijn mijn inline-elementen op één regel gebleven?
Omdat ze verplaatsen je pagina zou veranderen. Witruimte tussen twee inline-elementen wordt als een spatie weergegeven, dus <span>a</span><span>b</span> op twee regels zetten brengt er een ruimte tussen die er niet was. De meeste formatters doen het toch; deze niet.
Gaat hij mijn niet-afgesloten tags afsluiten?
Nee. Hij begrijpt dat een tweede lijstitem het eerste afsluit, dus je lijst springt netjes in, maar hij schrijft de tags terug die jij hebt geschreven. Een sluittag toevoegen zou je markup bewerken in plaats van opmaken, en waar die precies zou moeten staan, is niet altijd duidelijk.
Valideert hij de HTML?
Nee. Hij heeft geen schema, geen regels over welk element welk ander mag bevatten en geen mening over je attributen. Het enige wat hij weigert, is een tag, commentaar of scriptblok dat niet wordt afgesloten, want vanaf dat punt kan hij markup niet meer van tekst onderscheiden.
Wat gebeurt er met mijn scripts en stijlen?
Die komen byte voor byte terug. In een script is een < een kleiner-dan-teken en niet het begin van een tag, en in een <pre> of een <textarea> is elke spatie van jou. Die vier elementen blijven precies zoals ze waren. Wil je het script of de stylesheet zelf opmaken, dan staat de CSS-formatter ernaast.
Goed om te weten
- Het document dat eruit komt wordt hetzelfde weergegeven als het document dat erin ging. Dat wordt door de tests op een corpus vastgelegd in plaats van aan inspectie overgelaten.
- Er wordt niets verzonnen: er wordt geen sluittag toegevoegd, geen attribuut van nieuwe aanhalingstekens voorzien, geen entiteit gedecodeerd en geen tagnaam van hoofd- of kleine letters veranderd. Alleen de ruimte tussen attributen verandert, omdat die nooit wordt weergegeven.
- De afbreekbreedte bepaalt of een element met inline-inhoud op één regel blijft of opengaat, dus een korte alinea leest als één regel en een lange wordt afgebroken op spaties die hij al had.