HTML online leesbaar maken
Zet compacte paginabroncode om in leesbare HTML-code. Tags worden volgens hun nestingsniveau ingesprongen, attributen worden overzichtelijk weergegeven en ingesloten scripts en stijlen worden samen met het document opgemaakt.
Waarom paginabroncode er zo uitziet
Hulpmiddelen die HTML verkleinen, brengen witruimte tussen tags terug, verwijderen opmerkingen, laten optionele sluittags weg en schrappen overbodige aanhalingstekens rond attribuutwaarden. Sjablonen aan de serverkant maken het nog onoverzichtelijker: een pagina die uit tientallen deelbestanden bestaat, wordt als één stroom geleverd zonder zichtbare relatie met de bestanden waaruit die is opgebouwd. Open de broncode van bijna elke productiewebsite en je ziet een document met een handvol enorme regels. De sluittag van een sectie vinden betekent dan vaak dat je de punthaken met de hand moet tellen.
Het draait om de structuur
HTML heeft een boomstructuur, en een boom is onleesbaar als je die plat weergeeft. Inspringing volgens het nestingsniveau laat meteen zien hoe het document in elkaar zit: waar de kop eindigt, welke container de hoofdinhoud omsluit, hoe diep een component staat en waar je een onverwachte nestingsrelatie moet onderzoeken. Daardoor is opgemaakte paginabroncode nuttig om de volgorde van koppen te controleren, door een framework gegenereerde opmaak te bekijken of te begrijpen hoe een andere website een bepaalde sectie heeft opgebouwd. Kies de bron die bij je vraag past. Opgeslagen paginabroncode toont de HTML die de server heeft geleverd, terwijl code uit het Elements-paneel ook wijzigingen van scripts aan de clientkant kan bevatten. Opmaak brengt die twee weergaven niet met elkaar in overeenstemming en bouwt het actieve DOM niet na. Zoek je de herkomst van een onverwacht element, vergelijk de bron dan met het actuele document en onderzoek het script dat het heeft toegevoegd. Een netjes ingesprongen koppenstructuur helpt eveneens bij handmatige controle, maar vormt geen toegankelijkheidsaudit van de volledige pagina.
Ook ingesloten scripts en stijlen worden opgemaakt
Een echte pagina bestaat zelden alleen uit HTML-code. Analytics-fragmenten, gestructureerde JSON-LD-gegevens, configuratieobjecten en kritieke CSS staan rechtstreeks in het document, en een hulpmiddel dat code verkleint, comprimeert die ook. De formatter verwerkt elk ingesloten blok met de juiste parser: een script-tag met verkleinde JavaScript komt eruit als leesbare JavaScript en een style-tag als leesbare CSS, allemaal binnen het correct ingesprongen document.
Controleer inhoud die gevoelig is voor witruimte
Witruimte kan de weergave van HTML beïnvloeden, vooral rond tekst op dezelfde regel en binnen elementen zoals pre en textarea. De formatter gebruikt regels die rekening houden met gangbaar witruimtegedrag in HTML, maar opmaak is geen visuele regressietest. Bewaar de oorspronkelijke pagina en controleer het resultaat in de werkelijke omgeving voordat je wijzigingen publiceert. De weergave hangt ook af van stijlbladen, scripts en browsergedrag die hier niet worden uitgevoerd of beoordeeld. Een opgemaakte kopie is nuttig om het document te lezen, maar bewijst niet dat de pagina er precies hetzelfde uit zal zien.
Veelgestelde vragen
Kan ik de volledige broncode van een pagina plakken?
Ja. Kopieer de broncode uit je browser met view-source, of sla de pagina op en open het bestand. Het volledige document wordt opgemaakt, inclusief de head, de body, ingesloten scripts en gestructureerde gegevens.
Verandert de opmaak de weergave van de pagina?
De formatter probeert betekenisvolle witruimte in HTML te respecteren, maar vergelijk het resultaat toch voordat je het publiceert. Bij tekst op dezelfde regel, vooraf opgemaakte inhoud en interacties met stijlen kan witruimte belangrijk zijn. Bewaar het origineel en test de weergave in het project waarin de HTML daadwerkelijk wordt gebruikt.
Werkt het met sjablonen zoals Twig of Blade?
De editor is bedoeld voor HTML zoals die aan een browser wordt geleverd. Twig, Blade en andere sjabloontalen voegen syntaxis toe die de HTML-formatter kan weigeren of onverwacht verwerken. Laat je project het sjabloon eerst omzetten en maak daarna het resulterende HTML-document op voor een betrouwbare weergave van de gegenereerde code.