Naar de inhoud springen
Gratis tool

HTML-formatter online: maak HTML- en CSS-code overzichtelijker

De HTML-formatter, ook wel HTML Beautifier genoemd, maakt van geminificeerde of rommelige HTML en CSS ingesprongen, leesbare code. Een regel als body{margin:0;font-family:Arial,sans-serif}… wordt bijvoorbeeld omgezet in netjes ingesprongen CSS-regels, met naar keuze 2 of 4 spaties of een tab. De taal wordt automatisch herkend. Gratis, zonder registratie; je code blijft in je browser.

Gebouwd door Luca Stanek

Code klaar? Zet je site online met snelle, betrouwbare webhosting.

Zet je website online

Geformatteerde code

De opgemaakte code verschijnt hier zodra je links iets plakt.

Plak links je code of laad een voorbeeld. Het resultaat verschijnt meteen.

Je code blijft in je browser: hij wordt niet geüpload of opgeslagen.

Voorbeeldresultaat

Wat deze HTML- en CSS-formatter met je code doet

Code zoals die uit een minifier of editor komt, en het resultaat met een inspringing van 2 spaties.

HTML

Invoer:

<nav class="navbar"><ul><li><a href="/">Start</a></li><li class="active"><a href="/tools">Tools</a></li></ul></nav><main><h1>Willkommen</h1><p>Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>, der sich nicht um   Leerzeichen schert.</p><img src="logo.png" alt="Logo"></main>

Resultaat:

<nav class="navbar">
  <ul>
    <li><a href="/">Start</a></li>
    <li class="active"><a href="/tools">Tools</a></li>
  </ul>
</nav>
<main>
  <h1>Willkommen</h1>
  <p>
    Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>,
    der sich nicht um Leerzeichen schert.
  </p>
  <img src="logo.png" alt="Logo">
</main>

CSS

Invoer:

body{margin:0;font-family:Arial,sans-serif}.btn,.link{color:#fff;background:#0a84ff;padding:8px 16px}.btn:hover{opacity:.8}@media (max-width:600px){.btn{display:block}}

Resultaat:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.btn,
.link {
  color: #fff;
  background: #0a84ff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .8;
}

@media (max-width: 600px) {
  .btn {
    display: block;
  }
}

Overzicht

Wat is een HTML Formatter?

Een HTML Formatter, ook wel HTML Beautifier genoemd, zet HTML- en CSS-code om in een leesbare opmaak: één structuur per regel, met consistente inspringing. Deze formatter herkent de taal automatisch, springt in met 2 of 4 spaties of een tab, opent bestanden tot 2 MB en verandert, afgezien van een eventueel ontbrekende laatste CSS-puntkomma, alleen spaties en regeleinden. Hij werkt gratis in je browser, zonder upload.

HTML formatteren

Blokelementen staan op aparte, ingesprongen regels; doorlopende tekst wordt na 100 tekens afgebroken. Lange tags kunnen desgewenst één attribuut per regel krijgen.

CSS opmaken en verfraaien

Selectors, declaraties en accolades staan op aparte regels, ook binnen @media. Lange lijsten met waarden, zoals transition, worden over meerdere regels verdeeld.

Taal automatisch herkend

Tags wijzen op HTML; accolades, @-regels of eigenschappen met een dubbele punt wijzen op CSS. Je kunt HTML of CSS ook handmatig instellen.

Waarschuwingen met regel en kolom

De tool meldt niet-gesloten tags en haakjes met regel en kolom. Klik erop om de plek in de invoer te markeren. Het is geen validator.

Resultaat met syntaxmarkering

Daarnaast zie je het aantal regels en het aantal elementen of regels en declaraties. Resultaten van meer dan 150.000 tekens verschijnen zonder kleuren.

In de browser, zonder upload

Je code wordt niet geüpload of opgeslagen. Je kunt bestanden tot 2 MB openen en het resultaat kopiëren of downloaden.

Zo werkt het

Zo maak je HTML en CSS online op

Vijf stappen, zonder aanmelding of installatie.

Stap 1

Code plakken

Plak HTML of CSS in het linkerveld, open een bestand (.html, .htm, .xhtml, .css of .txt, tot 2 MB) of laad het HTML- of CSS-voorbeeld.

Stap 2

Taal controleren

Laat de taal op Automatisch staan of stel HTML of CSS in. De herkende taal staat onder het resultaat.

Stap 3

Inspringing kiezen

Spring in met 2 spaties, 4 spaties of een tab. Bij HTML bepaal je of attributen van lange tags op een nieuwe regel komen of op één regel blijven.

Stap 4

Aanwijzingen controleren

Bij waarschuwingen en fouten staan de regel en kolom vermeld. Klik op de link ernaast om de plek in je invoer te markeren.

Stap 5

Resultaat overnemen

Kopieer de opgemaakte code of download die als formatted.html of formatted.css.

Regels

Zo werkt de HTML- en CSS-formatter

Blokelementen

div, ul, table en dergelijke staan op aparte regels, met ingesprongen inhoud. Korte elementen, zoals een alinea, blijven op één regel.

Doorlopende tekst

Meerdere spaties worden één spatie; lange alinea's worden na 100 tekens afgebroken. De spatie tussen inline-tags blijft behouden.

Lange tags

Past een tag niet op één regel, dan komt elk attribuut op een aparte regel. Dit kun je uitschakelen.

Ongewijzigd

De inhoud van pre en textarea, commentaar, attribuutwaarden en teksten blijven ongewijzigd. style wordt als CSS geformatteerd; script wordt hoogstens opnieuw ingesprongen.

CSS: selectors, declaraties en accolades staan op aparte regels; een ontbrekende laatste puntkomma wordt toegevoegd. Beperkingen: de code wordt niet gevalideerd, JavaScript wordt niet opnieuw geformatteerd en SCSS en Less worden niet ondersteund.

Meer ontdekken

Meer tools

Tekst online vergelijken (Diff Checker)

Teksten online vergelijken: vergelijk twee teksten, configuratiebestanden of codeversies, bekijk verschillen per regel en per woord en kopieer ze als Unified Diff. Werkt volledig in de browser.

Gebouwd door Dimitri Heissler

JSON-formatter

JSON opmaken, comprimeren en valideren – met syntaxisaccentuering, foutmeldingen en download, volledig in de browser.

Gebouwd door Jakub Martyniak

XML-formatter en -validator

Valideer, formatteer, minimaliseer en repareer XML automatisch (niet-geëscapete tekens, ontbrekende tags, ontbrekende declaratie) — 100% in de browser, zonder upload.

Gebouwd door Justin Schuessler

Regex-tester

Reguliere expressies live testen met de native JavaScript-engine, inclusief markering van treffers, capture groups en vervangmodus, volledig in de browser.

Gebouwd door Jakub Martyniak

URL Encoder & Decoder

URL's en tekst online coderen en decoderen: vergelijking van encodeURIComponent, encodeURI en het formulierformaat, met een tabel voor queryparameters en een UTM-linkbuilder. Werkt volledig in je browser.

Gebouwd door Dimitri Heissler

.htaccess-generator en htpasswd-generator

Maak online Apache-.htaccess- en .htpasswd-bestanden: 301-omleidingen, HTTPS, wachtwoordbeveiliging met bcrypt, WordPress-regels, foutpagina's, caching, GZIP en hotlinkbeveiliging. Werkt volledig in de browser.

Gebouwd door Dimitri Heissler

Markdown-editor

Schrijf online Markdown met livevoorbeeld: README voor GitHub en Discord-berichten, tabellen uit Excel en export als PDF of HTML. Volledig in je browser.

Gebouwd door Dimitri Heissler

Online SQL-formatter (SQL formatteren en verfraaien)

Formatteer, verfraai en minimaliseer SQL online – voor MySQL, MariaDB en PostgreSQL, met inspringing en hoofdlettergebruik voor sleutelwoorden. Werkt volledig in de browser, zonder upload.

Gebouwd door Luca Stanek

Kleurkiezer

Kleuren direct omzetten tussen HEX, RGB, HSL, HSV en CMYK, de dichtstbijzijnde CSS-kleurnaam vinden en het WCAG-contrast met zwart/wit controleren – volledig in de browser.

Gebouwd door Justin Schuessler

FAQ

Veelgestelde vragen

Korte antwoorden over het opmaken van HTML en CSS met deze tool.

Een HTML Formatter, ook wel Beautifier genoemd, zet code om in een leesbare opmaak: één structuur per regel, met consistente inspringing. Handig voor geminimaliseerde code, broncode uit de browser of code uit een editor zonder opmaakfunctie. Deze formatter verwerkt HTML en CSS.

Plak de code links; het resultaat verschijnt meteen rechts. Kies inspringen met 2 spaties, 4 spaties of een tab en bepaal of attributen van lange tags op een nieuwe regel komen. Kopieer het resultaat of download het als formatted.html.

Plak de CSS: de tool herkent die aan accolades, @-regels of eigenschappen met een dubbele punt. Je kunt CSS ook zelf selecteren. Elke regel krijgt aparte regels voor de selector, declaraties en accolades, ook binnen @media. Lange waardelijsten zoals transition worden over meerdere regels verdeeld en een ontbrekende laatste puntkomma wordt toegevoegd. De download heet formatted.css.

Nee. Alleen spaties en regeleinden veranderen. Tags, attributen, waarden, teksten en opmerkingen blijven behouden. Enige uitzondering: in CSS wordt een ontbrekende puntkomma na de laatste declaratie toegevoegd.

De formatter verandert alleen spaties, inspringing en regeleinden in de broncode, zodat je die beter kunt lezen. Tekst maak je in HTML op met tags zoals strong, em of br. De tool voegt zulke tags niet toe en verandert ze ook niet.

De inhoud van pre en textarea blijft ongewijzigd, omdat elke spatie daar telt. CSS in style wordt geformatteerd; script wordt hoogstens opnieuw ingesprongen, maar niet opnieuw geformatteerd.

Nee, de formatter valideert of minificeert niet. Hij maakt alleen HTML en CSS op: JavaScript in script wordt niet opnieuw opgemaakt en SCSS en Less worden niet ondersteund. Wel waarschuwt hij voor niet-gesloten tags, sluittags zonder opentag en accolades zonder tegenhanger, telkens met regel en kolom. Bij een niet-afgesloten opmerking, tekst tussen aanhalingstekens of tag verschijnt een foutmelding in plaats van het resultaat.

Nee. Alles gebeurt in je browser: er wordt niets geüpload of opgeslagen. Je kunt bestanden tot 2 MB openen: .html, .htm, .xhtml, .css of .txt.

Nog vragen?

Contact opnemen met support
Ben je een website aan het bouwen?

Je website heeft betrouwbare hosting nodig

Met een ZAP-Hosting-VPS staat je site betrouwbaar online.

4,4/5 Trustpilot32.000+ Actieve serversSinds 2010
Hosting bekijken

Geen installatie. Geen risico. Binnen enkele seconden online.

Flexibele looptijdOp elk moment opzegbaarBinnen 60 seconden online

Op zoek naar meer tools? Alle ontwikkelaarstools bekijken