HTML formázó

Hogyan formázd a HTML-t

1. Illeszd be a HTML-t, vagy kattints a Fájl megnyitása gombra egy .html vagy .htm fájl betöltéséhez (legfeljebb 10 MB).
2. Válaszd ki a Behúzás módját (2 szóköz, 4 szóköz vagy tabulátor), és azt, hogy a Sortörés ennél érték 80 vagy 120 karakter legyen-e.
3. Jelöld be a és behúzása opciót, ha azt szeretnéd, hogy az <html> elemen belül be legyenek húzva, és a Megjegyzések eltávolítása opciót a <!-- … --> megjegyzések elhagyásához.
4. Kattints a Formázás (szépítés) gombra az olvasható kódért, vagy a Tömörítés gombra a legkisebb biztonságos változatért.
5. Másold ki vagy töltsd le az eredményt. Az állapotsor megmutatja a méretet előtte és utána.

Az eredmény egyszerű szövegként jelenik meg a kimeneti mezőben. A HTML-ed soha nem renderelődik és nem fut le ezen az oldalon, ezért a beillesztett kódban lévő szkriptek semmit nem tudnak csinálni.

Szépítés: olvasható, egységesen behúzott HTML

A Formázás (szépítés) a js-beautify könyvtárat használja, amely sok kódszerkesztő mögött áll:

• a blokkelemek külön sorba kerülnek, a beágyazás mélysége szerint behúzva, a sorközi elemek, például az <a>, a <b> vagy a <span>, a szövegen belül maradnak;
• a <script> és a <style> tartalma JavaScriptként és CSS-ként formázódik;
• a <pre> és a <textarea> pontosan úgy marad, ahogy írták, mert a szóközeik láthatók;
• az egymást követő üres sorok eggyé csökkennek;
• sortörési szélesség megadása esetén a hosszú szövegsorok és a hosszú attribútumlisták megtörnek.

A szépítés nem javítja a hibás jelölést: egy lezáratlan <div> lezáratlan marad, az őt követő behúzás pedig megmutatja, hol van a probléma.

Tömörítés: kisebb HTML az oldal megváltoztatása nélkül

A Tömörítés szándékosan óvatos megközelítést alkalmaz:

• a szövegben lévő szóköz-, tabulátor- és sortörés-sorozatok egyetlen szóközzé válnak, pontosan úgy, ahogy a böngésző megjeleníti őket;
• a blokkszintű és a fejelemek (<div>, <p>, <li>, <td>, <meta>, <br>…) melletti szóközök eltűnnek, mert soha nem jelennek meg;
• a sorközi elemek közötti egyetlen szóköz megmarad, így a <b>big</b> <i>world</i> nem válik „bigworld” szöveggé;
• a megjegyzések eltávolításra kerülnek, ha a Megjegyzések eltávolítása be van jelölve, kivéve a feltételes megjegyzéseket (<!--[if IE]>) és a <!--! kezdetű megjegyzéseket;
• a <script>, <style>, <pre> és <textarea> tartalmához az eszköz soha nem nyúl, az attribútumértékek pedig pontosan megmaradnak, az idézőjelekkel együtt.

Nem távolítja el az opcionális záró címkéket, nem írja át az attribútumokat, és nem tömöríti a beágyazott JavaScriptet és CSS-t: ezek az optimalizálások valamivel többet takarítanak meg, de elronthatják az oldalakat. A legtöbb oldalnál a HTTP-tömörítés (gzip vagy Brotli) sokkal többet takarít meg bármelyik minifikálónál, így a tömörítés leginkább az e-mailekbe, sablonokba vagy JavaScript-karakterláncokba ágyazott HTML-nél hasznos.