Údržba HTML šablóny, ktorú ti niekto poslal v jednom dlhom riadku. Príprava produkčného HTML — minifikuj na deploy. Debug zložitého layoutu — naformátuj a uvidíš štruktúru. Code review po prerobenom build pipeline.

Pre/textarea sú citlivé na whitespace. Pridanie newline-ov dovnútra zmení vykreslenie. Formátovač ich (ne)mal by escapovať. Inline elementy. Pridanie newline-u medzi inline elementy môže pridať medzeru, ktorá tam vizuálne nebola. Comments s podmienkami pre IE. sa nemajú stripnúť, ak ich potrebuješ. Žiadne sémantické zmeny. Formátovač len mení whitespace, neprestavuje atribúty ani neupravuje sémantiku.

HTML Formátovač

Naformátuj a skráš HTML alebo ho minifikuj. Veľkosť indentu, strip komentárov a self-closing tagy.

Vstup

Mode

Indent

Strip comments

Collapse whitespace in text

Výstup

Zadaj vstup vyššie, aby si videl výsledok.

Vytvoril JXXR1 · ♥ Sponzorovať · ☕ Kúp mi kávu

Načo to slúži?

Naformátuje minifikovaný alebo neusporiadaný HTML kód s konzistentným indentom, alebo naopak minifikuje (vyhodí whitespace a komentáre). Tento nástroj rozumie self-closing tagom (<br>, <img>) a vie strip-núť komentáre.

Kedy to použiť

Údržba HTML šablóny, ktorú ti niekto poslal v jednom dlhom riadku.
Príprava produkčného HTML — minifikuj na deploy.
Debug zložitého layoutu — naformátuj a uvidíš štruktúru.
Code review po prerobenom build pipeline.

Časté chyby

Pre/textarea sú citlivé na whitespace. Pridanie newline-ov dovnútra zmení vykreslenie. Formátovač ich (ne)mal by escapovať.
Inline elementy. Pridanie newline-u medzi inline elementy môže pridať medzeru, ktorá tam vizuálne nebola.
Comments s podmienkami pre IE.  sa nemajú stripnúť, ak ich potrebuješ.
Žiadne sémantické zmeny. Formátovač len mení whitespace, neprestavuje atribúty ani neupravuje sémantiku.