Gjør HTML lesbart på nett
Gjør komprimert sidekilde til lesbar HTML-kode. Tagger får innrykk etter nøstingsdybde, attributter settes ryddig opp, og innebygde skript og stiler formateres sammen med dokumentet.
Hvorfor sidekilden ser slik ut
Verktøy som minifiserer HTML, slår sammen blanktegn mellom tagger, fjerner kommentarer, utelater valgfrie sluttagger og fjerner anførselstegn rundt attributtverdier som ikke trenger dem. Maler på tjenersiden bidrar også: En side satt sammen av mange delmaler kommer frem som én sammenhengende strøm uten synlig forbindelse til filene som laget den. Åpner du kildekoden til et vanlig publisert nettsted, finner du ofte et dokument med noen få enorme linjer. Å finne sluttaggen til en seksjon kan da kreve at du teller vinkelparenteser for hånd.
Strukturen er det viktigste
HTML er et tre, og et tre blir vanskelig å lese når det vises flatt. Innrykk etter nøstingsdybde viser straks formen på dokumentet: hvor toppteksten slutter, hvilken beholder som omslutter hovedinnholdet, hvor dypt en komponent ligger, og hvor du bør undersøke et uventet nøstingsforhold. Derfor er formatert sidekilde nyttig når du kontrollerer overskriftsrekkefølgen, undersøker HTML laget av et rammeverk eller vil forstå hvordan en konkurrent har bygd opp en seksjon. Velg kilden som passer til spørsmålet ditt. En lagret sidekilde viser HTML-en som tjeneren leverte, mens kode kopiert fra elementpanelet kan inneholde endringer gjort av skript i nettleseren. Formatering forener ikke disse to visningene og gjenskaper ikke DOM-en under kjøring. Når du sporer et uventet element, bør du sammenligne kilden med det aktive dokumentet og undersøke skriptet som la det til. En ryddig overskriftsstruktur hjelper på samme måte ved manuell gjennomgang, men utgjør ingen tilgjengelighetskontroll av hele siden.
Innebygde skript og stiler håndteres også
En ekte side er sjelden bare HTML-kode. Analysekode, strukturerte JSON-LD-data, konfigurasjonsobjekter og kritisk CSS er bygd rett inn i dokumentet, og et minifiseringsverktøy komprimerer også dem. Formatereren behandler hver innebygde blokk med riktig parser: En script-tagg med minifisert JavaScript blir til lesbar JavaScript, og en style-tagg blir til lesbar CSS, alt inne i det korrekt innrykkede dokumentet.
Kontroller innhold der blanktegn har betydning
Blanktegn kan påvirke hvordan HTML vises, særlig rundt tekst på samme linje og inne i elementer som pre og textarea. Formatereren bruker regler som tar hensyn til vanlig håndtering av blanktegn i HTML, men formatering er ingen visuell regresjonstest. Behold originalsiden og kontroller resultatet i den faktiske sammenhengen før du publiserer endringer. Utseendet avhenger også av stilark, skript og nettleseroppførsel som ikke vurderes her. En formatert kopi er nyttig for å lese dokumentet under feilsøking, men er ikke et bevis på at siden vil se helt lik ut.
Ofte stilte spørsmål
Kan jeg lime inn kildekoden til en hel side?
Ja. Kopier kildekoden fra nettleseren med view-source, eller lagre siden og åpne filen, så formateres hele dokumentet, inkludert head, body, innebygde skript og strukturerte data.
Vil formateringen endre hvordan siden vises?
Formatereren prøver å ta hensyn til betydningsfulle blanktegn i HTML, men du bør likevel sammenligne resultatet før publisering. Tekst på samme linje, forhåndsformatert innhold og samspillet med stiler kan gjøre avstander viktige. Behold en originalkopi og test visningen i prosjektet der HTML-koden faktisk brukes.
Fungerer verktøyet med maler som Twig eller Blade?
Editoren er beregnet på HTML som leveres til en nettleser. Twig, Blade og andre malspråk har syntaks som HTML-formatereren kan avvise eller håndtere uventet. For å få en pålitelig visning av den genererte koden bør du gjengi malen gjennom prosjektet og formatere HTML-dokumentet som blir produsert.