HTML formatter
Maak rommelige HTML mooi, of verklein het voor productie.
Draait in je browser. Niets van wat je typt wordt ergens naartoe gestuurd.
- 2 of 4 spaties inspringing
- Minify met één klik
- Niets wordt geüpload
Zo formatteer je HTML
- Plak je HTML.
- Kies een inspringgrootte, of zet minify aan.
- Kopieer of download het resultaat.
Opmaken versus minify
| Opmaken | Minify | |
|---|---|---|
| Inspringing | Voegt 2, 4 of 8 spaties toe | Verwijdert het |
| Commentaar | Behouden | Verwijderd |
| Witruimte tussen tags | Genormaliseerd | Verwijderd |
| Inhoud in pre, textarea, script, style | Onaangeroerd | Onaangeroerd |
Waar geminificeerde HTML toe doet
- Een productiepagina laadt iets sneller en gebruikt minder bandbreedte zodra witruimte en commentaar weg zijn.
- Geminificeerde markup is lastiger te lezen in view-source, wat in productie een prima afweging is maar een nadeel tijdens het debuggen.
Tips voor het formatteren van HTML
- Bewaar een leesbare, ingesprongen versie in je broncodebeheer en minify alleen wat je uitrolt, want geminificeerde markup met het oog debuggen is traag.
- 2 spaties inspringing past bij diep geneste markup, en 4 spaties is makkelijker te scannen op ondiepe, simpele pagina's.
Wat inspringing wel en niet beïnvloedt
- Het verandert nooit wat een browser weergeeft, aangezien witruimte tussen blokelementen sowieso samenvalt.
- Het kan zichtbaar de ruimte tussen inline-elementen zoals <span> verschuiven, als een ontwerp daar op exacte witruimte vertrouwt. Controleer die plekken na het formatteren.
- Het heeft geen effect op JavaScript-gedrag, aangezien de DOM-structuur van de pagina hoe dan ook hetzelfde blijft.
Veelgestelde vragen over HTML formatter
Wat doet minify hier?
Het verwijdert commentaar en de witruimte tussen tags, zonder de tekst of attributen binnen pre-, textarea-, script- en style-tags aan te raken.
Verandert formatteren hoe mijn pagina eruitziet?
Nee. Inspringing en spatiëring tussen tags hebben geen invloed op de weergave, dus de pagina ziet er voor en na hetzelfde uit.
Herstelt het kapotte of niet-gesloten tags?
Nee. Het formatteert de HTML die je geeft. Herstel ontbrekende of niet-overeenkomende tags eerst in je editor.
Kan ik een volledig HTML-document formatteren?
Ja, inclusief de doctype, head en body. Heel lange documenten kunnen even duren om te formatteren.
Valideert het mijn HTML?
Nee. Het formatteert of verkleint de markup die je geeft, en controleert niet op ontbrekende alt-tekst, niet-gesloten tags of andere validatiekwesties.
Worden inline style- en script-tags ook opnieuw opgemaakt?
Ja, bij opmaken. De formatter springt de CSS binnen een style-tag en de JavaScript binnen een script-tag in, samen met de omringende markup.
Verwijdert minify commentaar dat door een templatesysteem wordt gebruikt?
Standaard HTML-commentaar (<!-- ... -->) wordt altijd verwijderd, ook commentaar dat een templatesysteem als markering gebruikt. Als je commentaar elders betekenis heeft, formatteer dan alleen en sla minify over.
Kan ik alleen een fragment formatteren, zonder volledig document?
Ja. Een stukje van een paar tags formatteert op dezelfde manier als een hele pagina. Er is geen doctype, head of body nodig om te werken.