Formátovanie a minifikácia HTML

Ako formátovať HTML

1. Vlož HTML, alebo klikni na Otvoriť súbor a načítaj súbor .html alebo .htm (do 10 MB).
2. Vyber Odsadenie (2 medzery, 4 medzery alebo tabulátor) a to, či sa má Zalamovať riadky na 80 alebo 120 znakoch.
3. Zaškrtni Odsadiť a , ak chceš, aby boli odsadené vo vnútri <html>, a Odstrániť komentáre, ak chceš vynechať komentáre <!-- … -->.
4. Kliknutím na Formátovať (skrášliť) získaš čitateľný kód, kliknutím na Minifikovať najmenšiu bezpečnú verziu.
5. Skopíruj alebo stiahni výsledok. Stavový riadok ukazuje veľkosť pred a po.

Výsledok sa v poli výstupu zobrazí ako čistý text. Tvoje HTML sa na tejto stránke nikdy nevykresľuje ani nespúšťa, takže skripty vo vloženom kóde nemôžu nič urobiť.

Skrášlenie: čitateľné a jednotne odsadené HTML

Formátovať (skrášliť) používa js-beautify, formátovač, ktorý stojí za mnohými editormi kódu:

• blokové prvky idú na vlastné riadky a odsadzujú sa podľa hĺbky vnorenia, kým riadkové prvky ako <a>, <b> alebo <span> zostávajú v texte;
• obsah <script> a <style> sa formátuje ako JavaScript a CSS;
• <pre> a <textarea> ostávajú presne tak, ako sú napísané, pretože ich medzery sú viditeľné;
• po sebe idúce prázdne riadky sa zredukujú na jeden;
• pri zadanej šírke zalamovania sa zalamujú dlhé riadky textu aj dlhé zoznamy atribútov.

Skrášlenie nenapraví pokazené značkovanie: neuzavretý <div> ostane neuzavretý a odsadenie, ktoré po ňom nasleduje, ukáže, kde je problém.

Minifikácia: menšie HTML bez zmeny stránky

Minifikovať používa zámerne opatrný prístup:

• súvislé medzery, tabulátory a zalomenia riadkov v texte sa zmenia na jednu medzeru, tak ako ich zobrazuje prehliadač;
• medzery vedľa blokových a hlavičkových prvkov (<div>, <p>, <li>, <td>, <meta>, <br>…) sa odstránia, pretože sa nikdy nezobrazujú;
• jedna medzera medzi riadkovými prvkami sa ponechá, takže z <b>big</b> <i>world</i> nevznikne „bigworld“;
• komentáre sa odstránia, ak je zaškrtnuté Odstrániť komentáre, okrem podmienených komentárov (<!--[if IE]>) a komentárov začínajúcich <!--!;
• obsah <script>, <style>, <pre> a <textarea> sa nikdy nemení a hodnoty atribútov ostávajú presne zachované, vrátane úvodzoviek.

Neodstraňuje voliteľné ukončovacie značky, neprepisuje atribúty ani nekomprimuje vložený JavaScript a CSS: tieto optimalizácie ušetria o niečo viac, ale môžu pokaziť stránky. Pri väčšine stránok ušetrí kompresia HTTP (gzip alebo Brotli) oveľa viac než akýkoľvek minifikátor, takže minifikácia je najužitočnejšia pre HTML vložené do e‑mailov, šablón alebo reťazcov v JavaScripte.