Utilia
Kategorier ▾
Språk: nb ▾

HTML-formaterer

Gjør rotete HTML ryddig med riktig innrykk, eller minifiser den trygt, i nettleseren din. Innebygd CSS og JavaScript formateres også. Ingenting lastes opp.

Slik formaterer du HTML

  1. Lim inn HTML-en din, eller klikk Åpne fil for å laste en .html- eller .htm-fil (opptil 10 MB).
  2. Velg Innrykk (2 mellomrom, 4 mellomrom eller en tabulator) og om du vil Bryt linjer ved 80 eller 120 tegn.
  3. Huk av for Rykk inn og hvis du vil ha dem rykket inn inne i <html>, og Fjern kommentarer for å fjerne <!-- … -->-kommentarer.
  4. Klikk Formater (pent oppsett) for lesbar kode, eller Minifiser for den minste trygge versjonen.
  5. Kopier eller last ned resultatet. Statuslinjen viser størrelsen før og etter.

Resultatet vises som ren tekst i utdatafeltet. HTML-en din blir aldri tegnet opp eller kjørt på denne siden, så skript i koden du limer inn, kan ikke gjøre noe.

Pent oppsett: lesbar HTML med jevnt innrykk

Formater (pent oppsett) bruker js-beautify, formatereren bak mange kodeeditorer:

  • blokkelementer settes på egne linjer, rykket inn etter nestingsdybde, mens inline-elementer som <a>, <b> eller <span> blir stående i teksten
  • innholdet i <script> og <style> formateres som JavaScript og CSS
  • <pre> og <textarea> lar vi stå nøyaktig som de er skrevet, siden mellomrommene der er synlige
  • flere tomme linjer på rad reduseres til én
  • med en bryteverdi brytes lange tekstlinjer og lange attributtlister

Pent oppsett reparerer ikke ødelagt kode: en ulukket <div> forblir ulukket, og innrykket som følger etter den, viser hvor problemet er.

Minifiser: mindre HTML uten å endre siden

Minifiser bruker en bevisst forsiktig tilnærming:

  • rekker av mellomrom, tabulatorer og linjeskift i tekst blir ett mellomrom, slik nettleseren viser dem
  • mellomrom ved siden av blokkelementer og head-elementer (<div>, <p>, <li>, <td>, <meta>, <br> …) fjernes, fordi de aldri vises
  • ett enkelt mellomrom mellom inline-elementer beholdes, så <b>big</b> <i>world</i> ikke blir til «bigworld»
  • kommentarer fjernes når Fjern kommentarer er avkrysset, bortsett fra betingede kommentarer (<!--[if IE]>) og kommentarer som begynner med <!--!
  • innholdet i <script>, <style>, <pre> og <textarea> røres aldri, og attributtverdier beholdes nøyaktig, med anførselstegn og alt

Verktøyet fjerner ikke valgfrie sluttkoder, skriver ikke om attributter og komprimerer ikke innebygd JavaScript og CSS: slike optimaliseringer sparer litt mer, men kan ødelegge sider. For de fleste sider sparer HTTP-komprimering (gzip eller Brotli) langt mer enn noen minifiserer, så minifisering er mest nyttig for HTML som ligger i e-poster, maler eller JavaScript-strenger.

Ofte stilte spørsmål

Lastes koden min opp?

Nei. Både formatering og minifisering kjører i nettleseren din. Koden forlater aldri datamaskinen din.

Hvorfor så siden annerledes ut etter minifisering?

Det bør den ikke i vanlige tilfeller. Det ene unntaket er CSS som endrer hvordan mellomrom vises, for eksempel white-space: pre på et annet element enn <pre> eller <textarea>, eller et element som er endret fra block til inline: sammenslåtte mellomrom blir da synlige.

Validerer formatereren HTML-en min?

Nei. Den formaterer det du gir den. For å sjekke at koden er gyldig bruker du en validator som W3C Nu HTML Checker.

Kan jeg formatere Vue-, Svelte- eller Django-maler?

For det meste. Malkoder inne i tekst og attributter beholdes, men kompleks malsyntaks kan forvirre innrykket, så kontroller resultatet.

Hva endrer «Rykk inn <head> og <body>»?

Som standard starter <head> og <body> på samme nivå som <html>, en vanlig konvensjon som sparer ett nivå med innrykk. Huk av for valget for å rykke dem inn ett nivå dypere.

Relaterte verktøy