HTML-formatering og minificering - Formatér HTML online gratis

Indsæt vilkårlig HTML — selv minificeret output på én linje fra en build-pipeline — og værktøjet omformaterer det med korrekt indrykning, ét tag pr. linje og ensartet mellemrum. Vælg indrykning på 2, 4 eller 8 mellemrum. Outputtet er klar til at sætte ind i din editor eller indsætte i en kodeanmeldelseskommentar.

Forskønnelse udvider HTML for læsbarhed: hvert tag på sin egen linje, indlejrede elementer indrykket og tomme linjer bevaret mellem sektioner. Minimering fjerner kommentarer, samler mellemrum og fjerner linjeskift, så filen leveres i færre bytes. Brug forskønnelse til redigering og gennemgang og minimering til produktionsudrulning.

Nej – js-beautify (motoren under motorhjelmen) registrerer script- og style-blokke og formaterer deres indhold efter de relevante JS- eller CSS-regler, så inline-scripts forbliver gyldige og stylesheets forbliver læsbare. Selvlukkende tags, void-elementer og namespace-attributter (svg:xmlns, xlink:href) håndteres alle korrekt.

Det håndterer almindelig HTML og HTML-lignende skabeloner godt, men ren JSX (udtryk med krøllede parenteser, fragmenter, komponent-tags med stort begyndelsesbogstav) fortolkes som HTML og kan få mindre kosmetiske problemer. Til framework-specifik kode anbefaler vi Prettier konfigureret til din dialekt; til ren HTML, .htm og skabelonfiler er vores værktøj perfekt.

Der sker ingen upload. Formateringsværktøjet kører udelukkende i din browser med js-beautify, så du trygt kan indsætte interne sideskabeloner, mailudkast eller HTML med private data, uden at noget forlader din enhed.

Minificering fjerner HTML-kommentarer, reducerer enhver sekvens af mellemrum mellem tags til ét enkelt mellemrum og fjerner linjeskift. Resultatet er HTML, der renderes byte-identisk, men typisk er 10-30 % mindre. Kombineret med gzip på serveren reducerer dette mærkbart den indledende sidevægt på indholdstunge sider.

Ja — klik på Download for at gemme det formaterede output som output.html eller det minificerede output som output.min.html. Filen er UTF-8-kodet, så den fungerer lige godt med engelsk, kyrillisk, CJK og højre-mod-venstre-indhold.

Det er et lille værktøj, der kun kører i browseren — uden hostingomkostninger — så vi tilbyder det gratis som en del af vores værktøjskasse til udviklere. Ingen reklamer, ingen sporing af outputtet og ingen grænser for filstørrelse ud over, hvad din browser kan rumme i hukommelsen.

Prettify-tilstand lader dig vælge 2, 4 eller 8 mellemrums indrykning. Vælg den bredde, din editor eller kodestil bruger, og kopiér så resultatet eller download det som output.html, så formateringen overføres direkte til dit projekt.

Indrykningsvælgeren (2, 4 eller 8 mellemrum) gælder kun i Formatér-tilstand, da Minificér med vilje fjerner alle mellemrum og linjeskift — der er intet tilbage at indrykke. Skift tilbage til Formatér for at se indrykningsbredden træde i kraft igen.

Efterhånden som du indsætter eller redigerer, kører værktøjet automatisk et strukturtjek og viser alle uafsluttede, uoverensstemmende eller løse afsluttende tags direkte under output-panelet — ingen separat knap nødvendig. En grøn meddelelse, "Ingen strukturproblemer fundet", bekræfter, at markup'en er velformet.

Brug Formatér-tilstand med 2-mellemrums indrykning — det er den mest almindelige konvention og holder diffs kompakte — og tjek derefter panelet med strukturelle problemer for at bekræfte, at de ikke har efterladt et ulukket tag. Når du har gennemgået det, skift til Minificér-tilstand, før du sender til produktion, for at fjerne den ekstra whitespace igen.

Ja — træk en .html-, .htm- eller .xhtml-fil ind på upload-området, eller klik for at gennemse, så indlæses dens indhold direkte i inputfeltet, præcis som hvis du havde indsat det. Derfra fungerer Prettify, Minify, indrykningsbredde og den strukturelle kontrol alle ens, uanset om markupen kom fra en fil eller en indsætning.

Ja — når der er et output, vises en Kopiér-knap ved siden af outputpanelet og det primære handlingsområde. Ved at klikke på den kopieres det aktuelle Prettify- eller Minify-resultat til din udklipsholder med det samme (den viser kort 'Copied!' som bekræftelse), så du kan indsætte direkte i din editor eller en kodegennemgangskommentar uden at gemme en mellemliggende .html-fil.