HTML Beautifier en formatter online

Q: Wat is het verschil tussen HTML-verfraaiing en HTML-verkleining?

HTML-verfraaiing (pretty-printen) voegt gestructureerde regeleinden en hiërarchische inspringing toe, zodat ontwikkelaars markeringen gemakkelijk kunnen lezen, debuggen en onderhouden. Door het verkleinen van de HTML worden onnodige witruimte, nieuwe regels en opmerkingen verwijderd om de bestandsgrootte te verkleinen, zodat de productiepagina sneller wordt geladen.

Q: Waarom mogen de tags , , en niet opnieuw worden geformatteerd?

Binnen de -, - en -elementen worden witruimte en regeleinden letterlijk weergegeven door de browser, dus het wijzigen van de inspringing bederft de weergegeven uitvoer. Op dezelfde manier kan het splitsen van regels binnen - of -tags met een HTML-parser JavaScript-tekenreeksliterals of CSS-selectors breken. Als u Keep , , Unformatted inschakelt, blijven deze blokken woordelijk behouden.

Q: Hoe gaat de HTML Beautifier om met HTML5 lege (zelfsluitende) elementen?

HTML5 definieert 14 void-elementen (area, base, br, col, embed, hr, img, input, link, meta, param, source, track en wbr) die nooit afsluitende tags hebben. Deze formatter herkent automatisch alle 14 void-elementen (plus -declaraties en XML/SGML-instructies), zodat opeenvolgende tags van broers en zussen nooit dieper inspringen.

Formatteer, laat inspringen en ruim rommelige minified HTML5-code in realtime op. Verwerkt HTML5 void-tags, inline-elementen, attribuut wrapping op de juiste manier en behoudt

Voer de HTML-code in

Quick Presets:

Karakters: 0

Lijnen: 0

Maat: 0 B

Geformatteerde HTML-uitvoer

Inspringingsopties

Inspringgrootte (spaties):

Gebruik tabs in plaats van spaties Indent nested HTML elements using tab characters (\t)

Tag- en lijnverpakking

Houd korte inline-tags op één regel Keep inline tags like <strong>, <a>, <span>, and <code> together with surrounding text

Houd

Preserve exact whitespace and line breaks inside raw text and code blocks

Verpak tagkenmerken op nieuwe regels Place each HTML attribute on its own indented line when a tag has 2+ attributes

Tekstinhoud omsluiten op:

Opruimopties

Verwijder HTML-opmerkingen Strip  comments from the formatted output

Verwijder alle lege regels Strip blank lines between formatted HTML elements

Max. lege regels om te behouden:

Wat is een online HTML Beautifier en formatter?

Een HTML Beautifier (ook bekend als een HTML-formatter of pretty-printer) neemt gecomprimeerde, minified of inconsistent ingesprongen HTML-broncode en herstructureert deze in een schone, voor mensen leesbare DOM-hiërarchie. Of je nu minified-productiesjablonen inspecteert, CMS-exports opschoont of code standaardiseert voordat je naar Git gaat, met de juiste inspringing kun je moeiteloos niet-gesloten tags en diep geneste containers opmerken.

In tegenstelling tot naïeve formatters voor reguliere expressies die elke punthaak op een nieuwe regel splitsen en

- of

Hoe u de HTML-code online kunt verfraaien of verkleinen

Plak uw HTML-markering: Plak uw niet-geformatteerde code of minified HTML-code in het vak Voer de HTML-code in in, of klik op Voorbeeld-HTML laden om de formatter te testen met een volledige HTML5-sjabloon.
Kies uw opmaakvoorkeuren: Gebruik de Quick Presets-balk of de rechterinstellingenkolom om de inspringing (2, 4 of 8 spaties of tabs) te configureren, wrapping, inline-taggroepering toe te schrijven en opmerkingen te verwijderen.
Kopieer, download of verklein: Uw geformatteerde HTML wordt automatisch bijgewerkt terwijl u typt. Klik op Kopiëren naar clipboard, Download .html om het bestand lokaal op te slaan, of op Minify HTML om de markeringen in één regel te comprimeren.

Voor versus na HTML Opmaakvergelijking

Opmaakmodus	Voorbeeld van HTML-uitvoer	Beste gebruiksscenario
Verkleinde HTML	`Hallo Wereld`	Productie-implementatie, verkleining van de HTTP-payload en e-mail HTML-sjablonen.
Standaard verfraaid (4 plaatsen)	`Hallo Wereld`	Dagelijkse webontwikkeling, foutopsporing in DOM-nesten en codebeoordelingen.
Verpakte attributenmodus	`class="kaart" id="held">`	Componenten met veel Tailwind CSS-hulpprogrammaklassen, `data-*`-attributen of ARIA-rekwisieten.

HTML5 Ongeldige elementen en inline vs. bloktagopmaak

HTML5 Lege elementen vergroten nooit de nestdiepte: In HTML5, lege elementen (, , , , , , , , , Voor , , , en ) zijn geen afsluitende tags of afsluitende slashes vereist. Onze formatter houdt deze automatisch bij, zodat broers en zussen op één lijn blijven.
Inline vs. blokelementen: Het breken van inline-elementen zoals Lees vandaag nog onze documentatie. op vijf afzonderlijke regels maakt proza moeilijk leesbaar en kan ongewenste witruimte tussen woorden in de browser introduceren. Als u Korte inline-tags op één regel houdt ingeschakeld, blijft de natuurlijke zinsverloop behouden.
Onbewerkte blokken behouden: Witruimte binnen , en </code>-tags wordt letterlijk weergegeven door browsers. Als u de optie <em>Unformatted</em> aangevinkt houdt, garandeert u dat uw codefragmenten, ASCII-diagrammen en ingebedde <code><script></code>- of <code><style></code>-blokken nooit worden gewijzigd.

Veelgestelde vragen (FAQ)

Wat is het verschil tussen HTML-verfraaiing en HTML-verkleining?

HTML verfraaiing (pretty-printen) voegt gestructureerde regeleinden en hiërarchische inspringing toe, zodat ontwikkelaars markeringen gemakkelijk kunnen lezen, debuggen en onderhouden. HTML verkleinen verwijdert onnodige witruimte, nieuwe regels en opmerkingen om de bestandsgrootte te verkleinen, zodat de productiepagina sneller wordt geladen.

Waarom mogen de tags

, ,

Binnen de elementen

 en  worden witruimte en regeleinden letterlijk weergegeven door de browser, dus het wijzigen van de inspringing bederft de weergegeven uitvoer. Op dezelfde manier kan het splitsen van regels binnen de tags

Hoe gaat de HTML Beautifier om met HTML5 lege (zelfsluitende) elementen?

HTML5 definieert 14 lege elementen (area, base, br, col, embed, hr, img, input, link, meta, param, source, track en wbr) die nooit sluitingstags hebben. Deze formatter herkent automatisch alle 14 void-elementen (plus -declaraties en XML/SGML-instructies), zodat opeenvolgende tags van broers en zussen nooit dieper inspringen.

Moet ik 2 spaties, 4 spaties of tabs gebruiken voor de inspringing van HTML?

Zowel 2 ruimtes als 4 ruimtes worden veel gebruikt. De HTML/CSS-stijlgids van Google en moderne frontend-toolchains (Prettier, Vue, React) gebruiken standaard 2 spaties omdat HTML-documenten vaak een diepe DOM-nesting hebben. WordPress en veel backend-sjabloonengines geven de voorkeur aan tabs of 4 spaties. U kunt er direct tussen schakelen met behulp van de balk Snelle voorinstellingen.

Wordt mijn HTML-code naar een server geüpload?

Nee. Het parseren, formatteren en verkleinen van HTML gebeurt 100% lokaal in uw browser met behulp van JavaScript. Uw broncode en sjablonen verlaten nooit uw apparaat.