HTML formázó és tömörítő

Egy weboldal forráskódja sokszor nehezen olvasható: a szerkesztők, a tartalomkezelő rendszerek és a tömörítők egyetlen hosszú sorba írják, a sablonokból összerakott oldalakban pedig szétcsúsznak a behúzások. Ha hibát keresel, egy e-mail-sablont szerkesztesz, vagy egy beágyazott kódot kell megértened, a rendezett szerkezet sokat segít.

A HTML formázó (html formatter) a kódot elemekre bontja, és a blokkszintű elemeket (div, p, ul, li, table, section, header stb.) külön sorba, a beágyazásnak megfelelő behúzással írja. Ha egy blokk csak szöveget és soron belüli elemeket tartalmaz, egy sorban marad, így a <p>Szia <b>világ</b>!</p> nem esik darabokra.

A formázás gépelés közben történik, és a behúzás 2 vagy 4 szóköz vagy tabulátor lehet. A felesleges szóközöket az attribútumok között is rendezi, így egységesebb lesz a kód.

A formázás során néhány elem tartalmát szándékosan nem változtatja meg, mert ott a szóközöknek és sortöréseknek jelentése van:

• <pre>: előre formázott szöveg, ahol minden szóköz és sortörés látszik az oldalon,
• <textarea>: űrlapmező kezdőszövege,
• <script>: JavaScript-kód (a formázását a JavaScript formázó végzi),
• <style>: CSS-kód (erre a CSS formázó való).

Ezek tartalmát csak a behúzáshoz igazítja, a sorokon belül nem nyúl hozzájuk. A soron belüli elemek (a, b, strong, em, span, img, br stb.) a szöveggel egy sorban maradnak, mert ha külön sorba kerülnének, az oldal megjelenésében extra szóközök keletkezhetnének.

Az iframe, a beágyazott videók és a widgetek kódjai egyszerű HTML-elemek, ezért ezek is rendesen formázódnak.

A tömörítés eltávolítja az elemek közötti felesleges szóközöket és sortöréseket, a szövegen belüli többszörös szóközöket egyre vonja össze, és – ha úgy állítod – törli a megjegyzéseket. Az eredmény kisebb, gyorsabban letöltődik, és egy sorban elfér, például egy e-mail-sablonban vagy egy JavaScript-változóban.

A <pre>, <textarea>, <script> és <style> tartalmát a tömörítés sem módosítja. Weboldalak éles tömörítésére a fejlesztői eszközláncok (build) beépített tömörítői részletesebbek, de egy-egy kódrészlet gyors összenyomására ez is jó.

A tömörített kódot a formázás visszaalakítja olvasható szerkezetbe, így a két művelet egymást kiegészíti.

A formázó nem ellenőrzi, hogy a HTML szabályos-e: a lezáratlan vagy rossz sorrendben lezárt elemeket ugyanúgy kiírja, ami a behúzásokon gyakran látszik is – ha a kód vége felé a behúzás nem tér vissza nullára, valahol hiányzik egy lezárás. A böngészők a hibás HTML-t is megpróbálják megjeleníteni, ezért egy hiba sokáig rejtve maradhat.

Sablonnyelvek (például Twig, Blade, JSX) különleges jelölései a formázásnál szövegként kezelődnek; egyszerűbb sablonoknál ez nem gond, bonyolultaknál az eredményt érdemes átnézni.

Tipp: a hibás lezárás megkereséséhez formázd a kódot, és kövesd a behúzást felülről lefelé. Ahol egy elem lezárása nem ugyanabba az oszlopba esik, mint a nyitása, ott érdemes keresni a hibát. A böngésző fejlesztői eszközei (F12) is megmutatják, hogyan értelmezte az oldalt.

• Weboldal-szerkesztőknek: a tartalomkezelő rendszerből kimásolt HTML átlátásához és javításához.
• E-mail-marketingeseknek: a hírlevél-sablonok táblázatos HTML-je formázva sokkal könnyebben szerkeszthető.
• Fejlesztőknek: egy idegen oldal szerkezetének gyors áttekintéséhez, beágyazott kódok (iframe, widget) megértéséhez.
• Tanulóknak: a jól behúzott kódon látszik, melyik elem melyikben van.

HTML-fájlt közvetlenül is megnyithatsz, az eredményt pedig letöltheted. Minden a böngésződben történik, a kód nem kerül fel szerverre.

• Ügyfélszolgálatoknak és tesztelőknek: egy hibás oldal kódjának olvasható formában történő továbbításához.

Bemenet (egy sorban):

<html><head><title>Krux</title></head><body><main><p>Szia <b>világ</b>!</p><ul><li>PDF</li><li>Kép</li></ul></main></body></html>

Formázva, két szóközös behúzással:

<html>
  <head>
    <title>Krux</title>
  </head>
  <body>
    <main>
      <p>Szia <b>világ</b>!</p>
      <ul>
        <li>PDF</li>
        <li>Kép</li>
      </ul>
    </main>
  </body>
</html>

Látszik, hogy a <title>, a <p> és a <li> egy sorban maradt, mert csak szöveget és soron belüli elemet tartalmaz, a többi elem pedig a beágyazásnak megfelelően beljebb került. A doctype és a megjegyzések a helyükön maradnak.