Ctrl K

HTML formatter online

Maak HTML netjes in je browser: niets wordt geüpload, er is geen limiet op de grootte en geminimaliseerde, gegenereerde of rommelige opmaak wordt netjes ingesprongen code. De inhoud en attributen blijven precies zoals ze waren.

Inspringen

Zo werkt het

  1. Plak je code

    Plak de code in het linkervak of open een bestand. Geen code bij de hand? Klik op Voorbeeld.

  2. Direct resultaat

    De uitkomst verschijnt terwijl je typt. Is er een fout, dan zie je op welke regel en welk teken.

  3. Kopieer of download

    Kopieer het resultaat met één klik of sla het op als bestand voor je editor of project.

Wat doet het?

Elk blokelement (<div>, <p>, <ul>, <li> …) komt op een eigen regel, ingesprongen naar de diepte van nesting. Inline-elementen zoals <a>, <b> en <span> blijven in de zin staan, zodat tekst natuurlijk leest. <style>- en <script>-blokken worden als CSS en JavaScript opgemaakt. Alleen de witruimte tussen tags verandert.

Opties

  • Kies bij Inspringen 2 spaties, 4 spaties of een tab.
  • Lege regels behouden (maximaal één) bewaart een lege regel waar je die had, zodat je eigen groepering zichtbaar blijft.
  • Je kunt inline-elementen op dezelfde regel laten staan, of uitzetten om elke tag op een eigen regel te zetten.

Waar rommelige HTML vandaan komt

Sjabloonengines, paginabouwers, e-mailtools en "bron bekijken" op een geminimaliseerde site leveren allemaal opmaak die moeilijk te lezen is. Maak hem hier netjes om de nesting te volgen, het niet-gesloten element te vinden of twee versies in een diff te vergelijken.

Witruimte in HTML kan ertoe doen

Browsers klappen witruimte tussen inline-elementen samen tot één spatie, maar niet in <pre>, <textarea> en elementen met white-space: pre. De formatter laat de inhoud van <pre> en <textarea> met rust. Tussen inline-elementen kunnen regeleinden een zichtbare spatie introduceren waar er geen was (<b>a</b><i>b</i> is niet hetzelfde als de twee op aparte regels), en daarom is inline-elementen op één regel houden de standaard.

HTML-e-mail

Maak voor HTML-e-mails, die tabellen en inline stijlen gebruiken, een kopie netjes om hem te lezen, maar verstuur het origineel. E-mailprogramma's kunnen gevoelig zijn voor kleine verschillen in witruimte.

Voor XML-formaten zoals een RSS-feed of SVG gebruik je de XML formatter. Voor de stijlen en scripts die je uit een pagina kopieerde zie je de CSS beautify en de JavaScript beautify.

Veelgestelde vragen

Verandert opmaken hoe de pagina eruitziet?

Normaal niet. Witruimte tussen blokelementen is niet zichtbaar. Tussen inline-elementen kan dat wel, en daarom blijven die standaard op één regel.

Repareert het ongeldige HTML?

Nee. Het verandert alleen witruimte. Niet-gesloten tags blijven zoals ze zijn, al maakt de inspringing ze vaak makkelijker te zien.

Worden style- en script-blokken ook opgemaakt?

Ja, als CSS en JavaScript.

Wordt mijn HTML geüpload?

Nee. Hij wordt in je browser opgemaakt en nergens heen gestuurd.