Utilia
Kategorije ▾
Jezik: hr ▾

HTML formater

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

Kako formatirati HTML

  1. Zalijepi svoj HTML ili klikni Otvori datoteku da učitaš datoteku .html ili .htm (do 10 MB).
  2. Odaberi Uvlačenje (2 razmaka, 4 razmaka ili tabulator) i hoćeš li Prelomi retke na 80 ili 120 znakova.
  3. Označi Uvuci i ako ih želiš uvučene unutar <html>, a Ukloni komentare da odbaciš komentare <!-- … -->.
  4. Klikni Formatiraj (uljepšaj) za čitljiv kôd ili Minificiraj za najmanju sigurnu verziju.
  5. Kopiraj ili preuzmi rezultat. Statusni redak prikazuje veličinu prije i poslije.

Rezultat se prikazuje kao običan tekst u izlaznom polju. Tvoj HTML se na ovoj stranici nikada ne iscrtava niti izvodi, pa skripte u zalijepljenom kôdu ne mogu ništa učiniti.

Uljepšavanje: čitljiv, dosljedno uvučen HTML

Formatiraj (uljepšaj) koristi js-beautify, formater iza mnogih uređivača kôda:

  • blokovski elementi idu u zasebne retke, uvučeni prema dubini ugniježđenja, dok linijski elementi poput <a>, <b> ili <span> ostaju unutar teksta;
  • sadržaj elemenata <script> i <style> formatira se kao JavaScript i CSS;
  • <pre> i <textarea> ostaju točno onakvi kako su napisani jer je njihov razmak vidljiv;
  • uzastopni prazni retci svode se na jedan;
  • uz širinu prijeloma lomi se dugačke retke teksta i dugačke popise atributa.

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

Minificiranje: manji HTML bez promjene stranice

Minificiraj koristi namjerno oprezan pristup:

  • nizovi razmaka, tabulatora i prijeloma redaka u tekstu postaju jedan razmak, baš kako ih preglednik prikazuje;
  • razmak uz blokovske elemente i elemente zaglavlja (<div>, <p>, <li>, <td>, <meta>, <br>…) uklanja se jer se nikada ne iscrtava;
  • jedan razmak između linijskih elemenata zadržava se, pa <b>veliki</b> <i>svijet</i> ne postaje „velikisvijet“;
  • komentari se uklanjaju kad je označeno Ukloni komentare, osim uvjetnih komentara (<!--[if IE]>) i komentara koji počinju s <!--!;
  • sadržaj elemenata <script>, <style>, <pre> i <textarea> nikada se ne dira, a vrijednosti atributa ostaju točno kakve jesu, uključujući navodnike.

Ne uklanja neobavezne završne oznake, ne prepisuje atribute i ne sažima ugrađeni JavaScript i CSS: te optimizacije štede još malo, ali mogu pokvariti stranice. Za većinu stranica HTTP sažimanje (gzip ili Brotli) štedi mnogo više od bilo kojeg minifikatora, pa je minificiranje najkorisnije za HTML ugrađen u e-poštu, predloške ili JavaScript nizove.

Česta pitanja

Šalje li se moj kôd?

Ne. I formatiranje i minificiranje izvode se u tvom pregledniku; tvoj kôd nikada ne napušta tvoje računalo.

Zašto je moja stranica izgledala drukčije nakon minificiranja?

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

Provjerava li formater valjanost mog HTML-a?

Ne. Formatira ono što mu daš. Da provjeriš je li oznaka valjana, upotrijebi validator poput W3C Nu HTML Checkera.

Mogu li formatirati Vue, Svelte ili Django predloške?

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

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

Prema zadanim postavkama <head> i <body> počinju na istoj razini kao <html>, što je uobičajena konvencija koja štedi jednu razinu uvlačenja. Označi opciju da ih uvučeš jednu razinu dublje.

Slični alati