Utilia
Kategorije ▾
Jezik: sr ▾

HTML formater i minifikator

Sredi neuredan HTML čistim uvlačenjem ili ga bezbedno minifikuj u pregledaču. Ugrađeni CSS i JavaScript se takođe formatiraju. Ništa se ne otprema.

Kako da formatiraš HTML

  1. Nalepi HTML ili klikni Otvori fajl da učitaš .html ili .htm fajl (do 10 MB).
  2. Izaberi Uvlačenje (2 razmaka, 4 razmaka ili tabulator) i da li da Prelomi redove na 80 ili 120 znakova.
  3. Označi Uvuci i ako želiš da budu uvučeni unutar <html>, i Ukloni komentare da izbaciš komentare <!-- … -->.
  4. Klikni Formatiraj (sredi) za čitljiv kod ili Minifikuj za najmanju bezbednu verziju.
  5. Kopiraj ili preuzmi rezultat. Statusni red prikazuje veličinu pre i posle.

Rezultat se prikazuje kao običan tekst u izlaznom polju. Tvoj HTML se na ovoj stranici nikada ne iscrtava niti izvršava, pa skripte u kodu koji nalepiš ne mogu ništa da urade.

Formatiranje: čitljiv HTML sa doslednim uvlačenjem

Formatiraj (sredi) koristi js-beautify, formater iza mnogih uređivača koda:

  • blok elementi idu u sopstvene redove, uvučeni prema dubini ugnežđ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 je njihov razmak vidljiv;
  • uzastopni prazni redovi svode se na jedan;
  • uz izabranu širinu prelamanja, dugački redovi teksta i dugačke liste atributa se prelamaju.

Formatiranje ne popravlja neispravan HTML: nezatvoren <div> ostaje nezatvoren, a uvlačenje koje sledi iza njega pokazuje gde je problem.

Minifikacija: manji HTML bez promene stranice

Minifikuj koristi namerno konzervativan pristup:

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

Ne uklanja opcione završne oznake, ne prepisuje atribute i ne komprimuje ugrađeni JavaScript i CSS: te optimizacije štede nešto više, ali mogu da pokvare stranice. Za većinu stranica HTTP kompresija (gzip ili Brotli) štedi mnogo više od bilo kog minifikatora, pa je minifikacija najkorisnija za HTML ugrađen u e-poruke, šablone ili JavaScript nizove.

Česta pitanja

Da li se moj kod otprema?

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

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

U normalnim slučajevima ne bi trebalo. Jedini izuzetak je CSS koji menja način prikaza razmaka, na primer white-space: pre na elementu koji nije <pre> ili <textarea>, ili element kojem je prikaz promenjen iz blok u linijski: skupljeni razmaci tamo postaju vidljivi.

Da li formater proverava ispravnost mog HTML-a?

Ne. Formatira ono što mu daš. Da proveriš da li je kod ispravan, koristi validator poput W3C Nu HTML Checker-a.

Mogu li da formatiram 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 proveri rezultat.

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

Podrazumevano <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š za jedan nivo dublje.

Srodni alati