CodeKitHub
Nástroje pro kód

HTML Minifier a Formátovač

Naposledy aktualizováno:

Vložte HTML níže a buď ho minifikujte — odstraníme komentáře, nadbytečné atributy a zbytečné mezery — nebo ho naformátujte do čitelné, odsazené podoby. Obě operace probíhají výhradně ve vašem prohlížeči pomocí skutečného HTML parseru, ne regulárních výrazů, takže obsah uvnitř <pre> a <textarea> zůstane nedotčený.

Co je tento nástroj?

HTML minifier odstraní vše, co prohlížeč nepotřebuje ke správnému vykreslení stránky: komentáře, přebytečné mezery mezi značkami, nadbytečné atributy jako type="text/javascript" a volitelná uzavírací lomítka. Výsledkem je funkčně totožné HTML, které se stáhne a zpracuje rychleji.

Tento nástroj je postaven na html-minifier-terser, stejném minifikátoru, jaký používají oblíbené build nástroje, takže rozumí struktuře HTML místo slepého odstraňování mezer — nesáhne na formátování citlivý obsah uvnitř <pre>, <textarea> nebo vložených bloků <script>/<style>, a navíc minifikuje i CSS a JS vložené ve vašem kódu.

Proč ho používat?

  • Pod kapotou skutečný parser, ne regulární výrazy — bezpečné i u okrajových případů jako bloky <pre>, vložené skripty a podmíněné komentáře.
  • Minifikuje i obsah vložených <style> a <script>, nejen okolní kód.
  • Přesně vidíte, kolik bajtů jste ušetřili, ještě než soubor nasadíte.
  • Režim formátování promění zkomprimované jednořádkové HTML zpět do podoby, kterou člověk snadno přečte a upraví.
  • 100% zpracování na straně klienta — váš kód, a cokoliv citlivého v něm, nikdy neopustí váš prohlížeč.

Jak se používá

  1. Vložte své HTML do vstupního pole, nebo klikněte na "Load Example" pro vyzkoušení na ukázce.
  2. Klikněte na "Minify" pro zmenšení, nebo na "Format" pro zformátování s odsazením 2 mezerami.
  3. Zkontrolujte zprávu pod poli — režim minifikace ukáže zmenšení velikosti; pokud se HTML nepodaří zpracovat, uvidíte přesnou chybu místo poškozeného výstupu.
  4. Klikněte na "Copy" pro zkopírování výsledku.

Příklad

Vstup

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Výstup

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Komentáře, odsazení a zalomení řádků jsou odstraněny, doctype je zkrácen. Viditelná stránka se vykreslí naprosto stejně.

Praktické tipy

  • Minifikujte těsně před nasazením, ne během vývoje — čitelné HTML si nechte ve verzovacím systému a minifikujte jen výstup buildu.
  • Pokud se stránka po minifikaci chová divně, zkontrolujte, zda nějaký JavaScript nespoléhá na přesné mezery uvnitř textových uzlů (vzácné, ale u některých starších widgetů se to stává).
  • Formátování minifikovaného HTML z živé stránky je rychlý způsob, jak prozkoumat její strukturu ještě před psaním scraperu nebo laděním problémů s layoutem.
  • Zkombinujte s CSS a JS minifikátory níže, pokud váš build proces drží styly a skripty v oddělených souborech.

Kde se to hodí v reálné praxi

Statické weby, e-mailové šablony a landing page vytvořené ručně často jdou do produkce se stejným odsazením a komentáři, jaké se používaly při vývoji. Minifikace před nasazením ořízne reálnou, byť skromnou, část přenášené váhy — a u HTML e-mailů konkrétně počet znaků někdy ovlivňuje práh, od kterého Gmail zprávu ořízne, takže menší kód má funkční přínos i mimo rychlost.

Směr Format je stejně užitečný i obráceně: vložení minifikované stránky z view-source a její zformátování je často nejrychlejší způsob, jak pochopit strukturu landing page konkurence nebo odladit vložený widget třetí strany.

CSS Minifikátor · JS Minifier

Časté případy použití

  • Ubrání pár bajtů ze statické landing page nebo e-mailové šablony ještě před spuštěním.
  • Přeformátování minifikovaného úryvku HTML staženého z view-source pro pochopení jeho struktury.
  • Vyčištění HTML vloženého z WYSIWYG editoru nebo exportu z CMS, který často obsahuje přebytečné mezery.
  • Rychlá kontrola, zda je ručně psaný úryvek HTML validní, protože chyba při zpracování se projeví jako jasně čitelná chybová zpráva.

Časté dotazy

Nahrává se moje HTML někam?

Ne. Minifikace i formátování probíhají lokálně v prohlížeči pomocí JavaScriptu. Nic, co vložíte, se neposílá na server, takže je bezpečné nástroj používat i s interními šablonami nebo nezveřejněnými stránkami.

Nerozbije mi minifikace stránku?

Nemělo by — nástroj používá skutečný HTML parser (html-minifier-terser), který rozumí struktuře značek, takže zachovává elementy citlivé na mezery jako <pre> a <textarea> a nesloučí atributy nesprávně. U kritických stránek po minifikaci vždy proveďte rychlou kontrolu, zejména pokud spoléháte na neobvyklé vložené skripty.

Minifikuje se i CSS a JavaScript uvnitř HTML?

Ano. Vložené bloky <style> a <script> se minifikují na místě pomocí stejných enginů jako samostatné nástroje CSS a JS Minifier, takže je nemusíte ručně vytahovat ven.

O kolik se HTML typicky zmenší?

Záleží na tom, kolik mezer, komentářů a formátování měl originál — ručně psané HTML s bohatým odsazením a komentáři se běžně zmenší o 20–40 %. HTML generované frameworkem, které je už kompaktní, ušetří méně.

Můžu minifikované HTML převést zpět do čitelné podoby?

Ano — vložte minifikované HTML a místo "Minify" klikněte na "Format", čímž získáte zpět správně odsazený, čitelný kód.

Související nástroje