Formatera minifierad HTML online
Gör komprimerad sidkällkod till läsbar HTML-kod. Taggar dras in efter nästlingsdjup, attribut ställs upp överskådligt, och inbäddade skript och stilar formateras tillsammans med dokumentet.
Varför sidans källkod ser ut så
HTML-minifierare slår ihop blanksteg mellan taggar, tar bort kommentarer, utelämnar valfria avslutningstaggar och tar bort citattecken runt attributvärden som inte behöver dem. Mallhantering på servern bidrar till röran, eftersom en sida som sätts ihop av dussintals delmallar levereras som ett enda flöde utan synlig koppling till filerna som skapade den. Öppna källkoden för nästan vilken webbplats i produktion som helst, så hittar du ett dokument med några få enorma rader. Att hitta sluttaggen för ett avsnitt innebär då att räkna vinkelparenteser för hand.
Strukturen är hela poängen
HTML är ett träd, och ett träd är svårläst när det skrivs ut platt. Indrag efter nästlingsdjup visar direkt dokumentets form: var sidhuvudet slutar, vilken behållare som omsluter huvudinnehållet, hur djupt en komponent ligger och var ett oväntat nästlingsförhållande behöver undersökas. Därför är formaterad sidkällkod användbar för att kontrollera rubrikordning, granska HTML som ett ramverk har skapat eller förstå hur en konkurrent har byggt upp ett visst avsnitt. Välj den källa som passar din fråga. En sparad sidkälla visar HTML som servern levererade, medan kod från elementpanelen kan innehålla ändringar som gjorts av skript i webbläsaren. Formatering förenar inte dessa två vyer och återskapar inte DOM under körning. När du spårar ett oväntat element bör du jämföra källan med det levande dokumentet och granska skriptet som lade till det. På samma sätt kan tydligt indragna rubriker underlätta en manuell granskning utan att utgöra en tillgänglighetsgranskning av hela sidan.
Inbäddade skript och stilar hanteras också
En riktig sida består sällan av enbart HTML-kod. Analyskod, strukturerade JSON-LD-data, konfigurationsobjekt och kritisk CSS bäddas in direkt i dokumentet, och en minifierare komprimerar även dem. Formateraren behandlar varje inbäddat block med rätt parser: en script-tagg med minifierad JavaScript blir läsbar JavaScript och en style-tagg blir läsbar CSS, allt inuti det korrekt indragna dokumentet.
Granska innehåll som är känsligt för blanksteg
Blanksteg kan påverka hur HTML visas, särskilt runt löpande text och inuti element som pre och textarea. Formateraren använder regler som tar hänsyn till vanliga sätt som HTML hanterar blanksteg på, men formatering är inget visuellt regressionstest. Behåll originalsidan och kontrollera resultatet i dess verkliga sammanhang innan du publicerar ändringar. Layouten beror även på stilmallar, skript och webbläsarbeteende som inte utvärderas här. En formaterad kopia är användbar för att läsa dokumentet vid en undersökning, men bevisar inte att sidan kommer att visas på exakt samma sätt.
Vanliga frågor
Kan jag klistra in en hel sidas källkod?
Ja. Kopiera källkoden från webbläsaren med view-source, eller spara sidan och öppna filen, så formateras hela dokumentet, inklusive head, body, inbäddade skript och strukturerade data.
Ändrar formateringen hur sidan visas?
Formateraren strävar efter att respektera betydelsebärande blanksteg i HTML, men du bör ändå jämföra resultatet innan du publicerar det. Löpande text, förformaterat innehåll och samspelet med stilar kan göra mellanrum viktiga. Behåll en originalkopia och testa visningen i projektet där HTML-koden faktiskt används.
Fungerar det med mallar som Twig eller Blade?
Editorn är avsedd för HTML som levereras till en webbläsare. Twig, Blade och andra mallspråk tillför syntax som HTML-formateraren kan avvisa eller hantera oväntat. För en tillförlitlig bild av den skapade HTML-koden bör du först rendera mallen i projektet och sedan formatera det resulterande HTML-dokumentet.