Jak používat
- Vložte HTML do vstupního pole, otevřete soubor .html nebo vyzkoušejte příklad.
- Vyberte možnost Beautify pro odsazený, čitelný kód nebo Minify pro kompaktní výstup.
- Při použití Beautify zvolte 2 mezery, 4 mezery nebo tabulátory a rozhodněte, zda zachovat komentáře.
- Zkopírujte výsledek nebo si jej stáhněte jako soubor .html.
Jak to funguje
Formatter načte HTML tolerantním tokenizérem, podobně jako prohlížeč, a znovu ho zapíše. Vstup nikdy nevykresluje, takže skripty ve vloženém kódu se nemohou spustit a z webu se nic nenačítá.
Beautify umístí každý blokový prvek (div, p, ul, li, section, table, …) na samostatný řádek odsazený podle hloubky zanoření. Text a řádkové prvky, jako jsou a, b, em, span, code, img a br, zůstávají pohromadě na jednom řádku, takže mezery mezi slovy a odkazy se nemění způsobem, který by ovlivnil zobrazenou stránku. Souvislé úseky mezer a zalomení řádků v textu se změní na jednu mezeru, což je stejně to, jak je prohlížeče zobrazují.
Obsah prvků pre, textarea, script a style se zkopíruje přesně tak, jak je zapsán, včetně bílých znaků a jakýchkoli znaků < nebo >. Prázdné prvky, jako jsou br, img, input, meta a link, nikdy nedostanou uzavírací značku. Samouzavírací značky jako <path /> v inline SVG zůstávají samouzavírací.
Minify sloučí bílé znaky v textu na jednotlivé mezery, odstraní bílé znaky vedle blokových prvků, normalizuje mezery mezi atributy a pokud je vypnuta volba „Ponechat komentáře“, odstraní komentáře. Podmíněné komentáře jsou vždy ponechány.
Nástroj neopravuje neplatné HTML, nedoplňuje chybějící značky, nemění pořadí atributů ani neminifikuje CSS a JavaScript uvnitř prvků style a script. Prvky, které zůstanou otevřené, se uzavřou na konci svého rodiče, a uzavírací značka bez odpovídající otevírací značky zůstane zapsána tak, jak je.
Příklady
Čtení vygenerovaného kódu
CMS vygeneruje šablonu jako jeden dlouhý řádek. Formátování se 2 mezerami zobrazí navigaci, položky seznamu a hlavní obsah jako odsazený strom, zatímco „Ceny zahrnují <strong>DPH</strong>.“ zůstane na jednom čitelném řádku.
Příprava šablony e-mailu
Minifikujte HTML e-mail s vypnutými komentáři, aby se zmenšila jeho velikost. Blok <pre> s tabulkou cen a vložený <style> zůstanou přesně tak, jak byly.
Kontrola struktury
Když chybí ukončovací </div>, formátovaný výstup zobrazí následující prvky odsazené o jednu úroveň hlouběji, takže snadno poznáte, kde měl prvek končit.
Časté dotazy
Změní formátování vzhled mé stránky?
Téměř ve všech případech ne. Bílé znaky uvnitř blokových prvků se sbalí a přesunou do zalomení řádků, což prohlížeče ignorují. Text a řádkové prvky zůstanou na stejném řádku a prvky pre, textarea, script a style se nemění. Výjimkou jsou stránky, které se spoléhají na CSS white-space: pre u běžných prvků.
Minifikuje CSS a JavaScript uvnitř stránky?
Ne. Obsah prvků script a style zůstává přesně tak, jak byl zapsán, takže se nemůže rozbít. K samostatné minifikaci souboru CSS použijte formátovač CSS.
Je bezpečné vložit HTML z neznámého zdroje?
Ano. Vstup je zpracováván čistě jako text a nikdy se nevkládá do stránky, takže se nespustí jeho skripty a nenačtou se jeho obrázky ani odkazy.
Validuje mé HTML?
Ne. Záměrně je tolerantní a poškozený kód formátuje, místo aby ho odmítl. Nespárované ukončovací tagy zůstanou zachovány, takže díky odsazení je snadno najdete, ale nevytváří se žádný seznam chyb.
Soukromí
Vaše HTML se zpracovává pouze ve vašem prohlížeči a nikdy se nevykresluje ani nenahrává. Nic se neukládá ani nezahrnuje do analytiky.