Utilia
Kategorije ▾
Jezik: bs ▾

HTML formater

Uljepšaj neuredan HTML čistim uvlačenjem ili ga sigurno minifikuj u pregledniku. Ugrađeni CSS i JavaScript se također formatiraju. Ništa se ne šalje.

Kako formatirati HTML

  1. Zalijepi svoj HTML ili klikni Otvori datoteku da učitaš .html ili .htm datoteku (do 10 MB).
  2. Odaberi Uvlačenje (2 razmaka, 4 razmaka ili tabulator) i želiš li Prelomi redove na 80 ili 120 znakova.
  3. Označi Uvuci i ako želiš da budu uvučeni unutar <html>, a Ukloni komentare da izbaciš komentare <!-- … -->.
  4. Klikni Formatiraj (uljepšaj) za čitljiv kod ili Minifikuj za najmanju sigurnu verziju.
  5. Kopiraj ili preuzmi rezultat. Red statusa prikazuje veličinu prije i poslije.

Rezultat se prikazuje kao običan tekst u polju za izlaz. Tvoj HTML se na ovoj stranici nikada ne iscrtava niti izvršava, pa skripte u kodu koji zalijepiš ne mogu ništa uraditi.

Uljepšavanje: čitljiv HTML s dosljednim uvlačenjem

Formatiraj (uljepšaj) koristi js-beautify, formater koji stoji iza mnogih uređivača koda:

  • blok elementi idu u zasebne redove, uvučeni prema dubini ugniježđenja, dok linijski elementi poput <a>, <b> ili <span> ostaju unutar teksta;
  • sadržaj <script> i <style> formatira se kao JavaScript i CSS;
  • <pre> i <textarea> ostaju tačno onako kako su napisani, jer su njihovi razmaci vidljivi;
  • uzastopni prazni redovi svode se na jedan;
  • uz zadatu širinu prelamanja prelamaju se dugi redovi teksta i dugi popisi atributa.

Uljepšavanje ne popravlja neispravan markup: nezatvoren <div> ostaje nezatvoren, a uvlačenje koje slijedi iza njega pokazuje gdje je problem.

Minifikacija: manji HTML bez promjene stranice

Minifikuj koristi namjerno konzervativan pristup:

  • nizovi razmaka, tabulatora i preloma redova u tekstu postaju jedan razmak, baš kako ih preglednik prikazuje;
  • razmaci uz blok elemente i elemente zaglavlja (<div>, <p>, <li>, <td>, <meta>, <br>…) uklanjaju se jer se nikada ne iscrtavaju;
  • jedan razmak između linijskih elemenata se zadržava, pa se <b>big</b> <i>world</i> ne pretvara u „bigworld“;
  • komentari se uklanjaju kad je označeno Ukloni komentare, osim uslovnih komentara (<!--[if IE]>) i komentara koji počinju s <!--!;
  • sadržaj <script>, <style>, <pre> i <textarea> nikada se ne dira, a vrijednosti atributa ostaju tačno kakve jesu, zajedno s navodnicima.

Ne uklanja opcionalne završne oznake, ne prepisuje atribute i ne komprimira ugrađeni JavaScript i CSS: te optimizacije uštede malo više, ali mogu pokvariti stranice. Za većinu stranica HTTP kompresija (gzip ili Brotli) štedi daleko više od bilo kojeg minifikatora, pa je minifikacija najkorisnija za HTML ugrađen u e-poštu, šablone ili JavaScript nizove.

Česta pitanja

Šalje li se moj kod na server?

Ne. I formatiranje i minifikacija rade u tvom pregledniku; tvoj kod nikada ne napušta tvoj računar.

Zašto je moja stranica izgledala drugačije nakon minifikacije?

U uobičajenim slučajevima ne bi trebala. Jedini izuzetak je CSS koji mijenja način prikaza razmaka, na primjer white-space: pre na elementu koji nije <pre> ili <textarea>, ili element čiji je prikaz promijenjen iz bloka u linijski: sažeti razmaci tamo postaju vidljivi.

Provjerava li formater ispravnost mog HTML-a?

Ne. Formatira ono što mu daš. Da provjeriš je li markup ispravan, koristi validator poput W3C Nu HTML Checkera.

Mogu li formatirati Vue, Svelte ili Django šablone?

Uglavnom. Oznake šablona unutar teksta i atributa se zadržavaju, ali složena sintaksa šablona može zbuniti uvlačenje, pa provjeri rezultat.

Šta mijenja „Uvuci <head> i <body>“?

Po zadanim postavkama <head> i <body> počinju na istom nivou kao <html>, što je uobičajena konvencija koja štedi jedan nivo uvlačenja. Označi opciju da ih uvučeš jedan nivo dublje.

Srodni alati