tigtools

HTML-formaterare

Klistra in HTML för att skapa indrag enligt nästlingsnivå eller för att ta bort onödig whitespace. Koden behandlas endast som text och renderas aldrig.

Körs i din webbläsare Ingen registrering

Läge
Indrag (mellanslag)

Ange något för att se resultatet.

Så här använder du det

  1. Klistra in HTML i inmatningsrutan, öppna en .html-fil eller prova exemplet.
  2. Välj Snygga upp för indragen, läsbar markup eller Minifiera för kompakt utdata.
  3. När du snyggar upp, välj 2 mellanslag, 4 mellanslag eller tabbar, och bestäm om kommentarer ska behållas.
  4. Kopiera resultatet eller ladda ner det som en .html-fil.

Så fungerar det

Formateraren läser HTML med en tolerant tokeniserare, ungefär som en webbläsare gör, och skriver ut den igen. Den renderar aldrig indata, så skript i inklistrad kod kan inte köras och ingenting laddas från webben.

Beautify placerar varje blockelement (div, p, ul, li, section, table, …) på egen rad, indraget efter dess kapslingsdjup. Text och inline-element som a, b, em, span, code, img och br hålls ihop på en rad, så att mellanrummen mellan ord och länkar inte ändras på ett sätt som påverkar den renderade sidan. Följder av mellanslag och radbrytningar i text blir ett enda mellanslag, vilket är så webbläsare visar dem ändå.

Innehållet i pre-, textarea-, script- och style-element kopieras exakt som det är skrivet, inklusive blanktecken och eventuella < eller >-tecken. Element utan innehåll som br, img, input, meta och link får aldrig någon sluttagg. Självstängande taggar som <path /> i inline SVG behålls som självstängande.

Minify kollapsar blanktecken i text till enstaka mellanslag, tar bort blanktecken intill blockelement, normaliserar mellanrummen mellan attribut och tar bort kommentarer om ”Behåll kommentarer” är avstängt. Villkorliga kommentarer behålls alltid.

Verktyget korrigerar inte ogiltig HTML, lägger inte till saknade taggar, ordnar inte om attribut och minifierar inte CSS och JavaScript inuti style- och script-element. Element som lämnas öppna stängs i slutet av sitt överordnade element, och en sluttagg utan matchande starttagg behålls som den är skriven.

Exempel

Läsa genererad markup

En CMS matar ut en mall som en enda lång rad. Formatera med 2 mellanslag visar nav, listobjekt och huvudinnehåll som ett indraget träd, medan ”Priser inkluderar <strong>moms</strong>.” stannar på en läsbar rad.

Förbereda en e-postmall

Minifiera ett HTML-e-postmeddelande med kommentarer avstängda för att minska dess storlek. Ett <pre>-block med en pristabell och den inline <style> lämnas exakt som de var.

Kontrollera struktur

När en avslutande </div> saknas visar den formaterade utdatan följande element indragna en nivå för djupt, vilket gör det enkelt att se var elementet borde ha avslutats.

Vanliga frågor

Kommer formateringen att ändra hur min sida ser ut?

I nästan alla fall nej. Whitespace inuti blockelement komprimeras och flyttas till radbrytningar, vilket webbläsare ignorerar. Text och inline-element stannar på samma rad, och pre, textarea, script och style rörs inte. Sidor som förlitar sig på CSS white-space: pre på vanliga element är undantaget.

Minifierar den CSS och JavaScript inuti sidan?

Nej. Script- och style-innehåll behålls exakt som skrivet så att det inte kan gå sönder. Använd CSS-formateraren för att minifiera en stilmall separat.

Är det säkert att klistra in HTML från en okänd källa?

Ja. Inmatningen behandlas enbart som text och infogas aldrig i sidan, så dess skript körs inte och dess bilder eller länkar laddas inte.

Validerar den min HTML?

Nej. Den är medvetet tolerant och formaterar trasig markup istället för att avvisa den. Felmatchade avslutande taggar behålls, så indragningen hjälper dig att upptäcka dem, men ingen fellista skapas.

Integritet

Din HTML bearbetas endast i din webbläsare och varken renderas eller laddas upp. Inget sparas eller ingår i analyser.