Výstup se generuje průběžně po krátké prodlevě.
Jak HTML Beautifier použít
- Vložte HTML kód do levého pole. Můžete ho zkopírovat ze zdrojového kódu stránky, z editoru nebo z výstupu šablonovacího systému.
- Vyberte preset formátování nebo si nastavte odsazení, zalamování atributů a další volby podle potřeby.
- Naformátovaný výstup se zobrazí v pravém poli automaticky. Klikněte na Kopírovat nebo Stáhnout.
Proč formátovat HTML kód
Minifikovaný nebo neúhledný HTML je pro člověka prakticky nečitelný. Chybí odsazení, řádky se slévají dohromady a orientace ve struktuře zabere zbytečně mnoho času. Formátování kódu přidá konzistentní odsazení a konce řádků, díky čemuž okamžitě vidíte, jak jsou elementy zanořené.
Na vykreslení stránky v prohlížeči to nemá žádný vliv. Prohlížeč bílé znaky mezi tagy standardně sloučí do jedné mezery (výjimkou je obsah uvnitř <pre> tagů). Formátování je čistě pro vás, abyste kód snáz četli, upravovali a hledali v něm chyby.
Odsazení a zalamování atributů
Nejčastější volba jsou 2 mezery na úroveň. Kód zůstane kompaktní a přehledný i u hlubšího zanoření. Pokud pracujete na projektu, kde je zvykem 4 mezery, přepněte si velikost odsazení v nastavení. Taby jsou třetí možnost, kterou preferují hlavně vývojáři zvyklí na editory s konfigurovatelnou šířkou tabulátoru.
Zalamování atributů řeší situace, kdy má element víc atributů. Volba „Každý na nový řádek“ zapíše každý atribut na samostatný řádek, což se hodí u komponent s mnoha vlastnostmi. „Držet pohromadě“ naopak nechá atributy na jednom řádku, i kdyby byl delší. Automatický režim zalomí jen tam, kde řádek přesáhne 80 znaků.
Formátování vs. minifikace HTML
Formátování a minifikace dělají přesný opak. Formátování přidává bílé znaky a odsazení, aby byl kód čitelný pro vývojáře. Minifikace je odstraňuje, aby byl soubor co nejmenší pro prohlížeč. Obě operace nemění samotnou strukturu ani chování HTML.
Formátujte vždy, když potřebujete kód číst, kontrolovat nebo upravovat. Minifikujte ve chvíli, kdy jde o produkční nasazení a záleží na velikosti souboru. Pokud pracujete s výstupem buildovacího nástroje nebo s kódem z CMS šablony, formátování vám pomůže rychle pochopit strukturu, než začnete cokoliv měnit. Vývojářské nástroje jako náš JSON Formátovač řeší stejný problém pro jiný formát.
Časté otázky
Změní formátování vzhled stránky?
Ne. Prohlížeč ignoruje nadbytečné bílé znaky mezi HTML elementy. Formátovaný i minifikovaný kód se vykreslí stejně. Jedinou výjimkou jsou elementy s white-space: pre, kde na mezerách záleží.
Jaké odsazení zvolit, 2 nebo 4 mezery?
Záleží na konvencích vašeho projektu. Dvě mezery jsou nejrozšířenější volba v moderním webovém vývoji. Čtyři mezery lépe zvýrazní úrovně zanoření, ale u složitějších šablon zabírají hodně místa na řádku.
Co se stane s obsahem script a style tagů?
Pokud máte zaškrtnutou volbu „Formátovat i <style> a <script>“, nástroj naformátuje i CSS a JavaScript uvnitř těchto tagů. Když volbu vypnete, vnitřní obsah zůstane beze změny a formátuje se jen okolní HTML.
Funguje to i s chybným HTML?
Nástroj se pokusí naformátovat i nevalidní HTML. Pokud narazí na závažnou chybu v syntaxi, zobrazí upozornění a vrátí best-effort výstup. Pro kontrolu validity HTML doporučujeme použít W3C validátor.