HTML Minifier és Formázó Online — Ingyenes, feltöltés nélkül

Illessz be HTML-t alább, hogy tömörítsd — eltávolítva a megjegyzéseket, a felesleges attribútumokat és a extra szóközöket — vagy szépítsd meg olvasható, behúzott kóddá. Mindkét irány teljesen a böngésződben fut valódi HTML-elemzővel, nem regex-trükkel, így a <pre> és <textarea> tartalma sértetlen marad.

Mi ez az eszköz?

Egy HTML minifier mindent eltávolít, amire egy böngészőnek nincs szüksége az oldal helyes megjelenítéséhez: megjegyzéseket, extra szóközöket a tagek között, felesleges attribútumokat, mint type="text/javascript", és opcionális záró perjeleket. Az eredmény funkcionálisan azonos HTML, ami gyorsabban tölt le és elemződik.

Ez az eszköz a html-minifier-terser könyvtárra épül, ugyanarra a minifierre, amit népszerű build-eszközök is használnak belülről, így megérti a HTML szerkezetét ahelyett, hogy vakon eltávolítaná a szóközöket — nem nyúl a formázásérzékeny tartalomhoz a <pre>, <textarea> vagy beágyazott <script>/<style> blokkokban, és a kódodba ágyazott CSS-t és JS-t is tömöríti.

Miért érdemes használni?

Valódi elemző a motorháztető alatt, nem regex — biztonságos szélsőséges esetekben, mint <pre> blokkok, beágyazott szkriptek és feltételes megjegyzések.
A beágyazott <style> és <script> tartalmat is tömöríti, nem csak a körülvevő kódot.
Pontosan lásd, hány bájtot spóroltál meg, mielőtt éles környezetbe küldenéd a fájlt.
Formázás mód visszaalakítja a tömörített, egysoros HTML-t valami emberileg olvashatóvá és szerkeszthetővé.
100%-ban helyi feldolgozás — a kódod, és minden benne lévő privát adat, sosem hagyja el a böngésződet.

Használati útmutató

Illeszd be a HTML-t a beviteli mezőbe, vagy kattints a "Példa betöltése" gombra egy minta kipróbálásához.
Kattints a "Tömörítés" gombra a tömörítéshez, vagy a "Formázás" gombra a 2 szóközös behúzással történő megszépítéshez.
Nézd meg az üzenetet a mezők alatt — a tömörítés mód megmutatja a méretcsökkenést; ha a HTML nem elemezhető, egy pontos hibaüzenetet fogsz látni törött kimenet helyett.
Kattints a "Másolás" gombra az eredmény kimásolásához.

Példa

Bemenet

<!DOCTYPE html>
<html>
  <head>
    <title>Példa</title>
  </head>
  <body>
    <!-- üdvözlés -->
    <p class="greeting">
      Helló, világ!
    </p>
  </body>
</html>

Kimenet

<!doctype html><html><head><title>Példa</title></head><body><p class="greeting">Helló, világ!</p></body></html>

A megjegyzések, behúzások és sortörések eltávolításra kerülnek; a doctype rövidül. A látható oldal ugyanúgy jelenik meg.

Gyakorlati tippek

Tömörítsd közvetlenül a bevezetés előtt, ne a fejlesztés közben — tartsd olvasható HTML-ben a verziókezelést, és csak a build kimenetet tömörítsd.
Ha egy oldal furán viselkedik tömörítés után, nézd meg, van-e olyan JavaScript, ami pontos szóközökre támaszkodik szöveges csomópontokon belül (ritka, de előfordul néhány régebbi widgetnél).
Egy élő oldalról származó tömörített HTML formázása gyors módja a szerkezet átvizsgálásának, mielőtt egy scrapert írnál, vagy elrendezési hibát keresnél.
Kombináld az alábbi CSS és JS minifierekkel, ha a build folyamatod külön fájlokban tartja a stílusokat és szkripteket.

Hol jön ez elő a valós munkafolyamatokban

A kézzel épített statikus oldalak, e-mail sablonok és landing oldalak gyakran ugyanazzal a behúzással és megjegyzésekkel kerülnek élesítésre, amit a fejlesztés során használtak. A tömörítés a bevezetés előtt valós, ha szerény, mértékben csökkenti az átvitel súlyát — és kifejezetten e-mail HTML-nél a karakterszám néha befolyásolja a Gmail levágási küszöbét, így a kisebb kód funkcionális előnyt is jelent a sebesség mellett.

A Formázás irány fordítva is éppolyan hasznos: egy tömörített oldal beillesztése a view-source-ból és újraformázása gyakran a leggyorsabb módja egy versenytárs landing oldal szerkezetének megértésének, vagy egy harmadik féltől származó beágyazás hibakeresésének.

→ CSS Minifier · JS Minifikáló

Gyakori felhasználási esetek

Bájtok lefaragása egy statikus landing oldalról vagy e-mail sablonról, mielőtt élesítenéd.
Egy view-source-ból kiemelt tömörített HTML-részlet újraformázása a szerkezet megértéséhez.
Egy WYSIWYG szerkesztőből vagy CMS-exportból beillesztett HTML tisztítása, ami gyakran felesleges szóközöket hordoz.
Gyors ellenőrzés, hogy egy kézzel írt HTML-részlet jól formázott-e, mivel egy elemzési hiba egyértelmű hibaüzenetként jelenik meg.

Gyakori kérdések

Feltöltésre kerül valahová a HTML-em?

Nem. A tömörítés és a formázás is helyben, a böngésződben történik JavaScripttel. Amit beillesztesz, sosem kerül szerverre, így biztonságos belső sablonokkal vagy még nem kiadott oldalakkal is.

A tömörítés elrontja az oldalamat?

Nem szokott — az eszköz egy valódi HTML-elemzőt (html-minifier-terser) használ, ami érti a tag-szerkezetet, így megőrzi a szóközérzékeny elemeket, mint a <pre> és a <textarea>, és nem vonja össze helytelenül az attribútumokat. Mindig ellenőrizd kritikus oldalaidat tömörítés után, különösen, ha szokatlan beágyazott szkriptekre támaszkodsz.

Tömöríti a HTML-en belüli CSS-t és JavaScriptet is?

Igen. A beágyazott <style> és <script> blokkok helyben tömörítésre kerülnek ugyanazokkal a motorokkal, mint a dedikált CSS és JS minifier eszközök, így nem kell kézzel kiemelned őket.

Mennyivel lesz jellemzően kisebb a HTML?

Attól függ, mennyi szóköz, megjegyzés és formázás volt az eredetiben — a sok behúzással és megjegyzéssel írt, kézzel készített HTML jellemzően 20-40%-kal csökken. A már eleve tömör, keretrendszer által generált HTML kevesebbet spórol.

Vissza tudom alakítani a tömörített HTML-t olvasható formátumra?

Igen — illeszd be a tömörített HTML-t, és kattints a "Formázás" gombra a "Tömörítés" helyett, hogy visszakapd a megfelelően behúzott, olvasható kódot.

HTML Minifier és Formázó