HTML formázása online
Alakítsd olvasható jelölőkóddá a tömörített forrást. A címkék a mélységüknek megfelelő behúzást kapnak, az attribútumok áttekinthetővé válnak, a beágyazott szkriptek és stílusok pedig a dokumentummal együtt formázódnak.
Miért ilyen a lap forrása?
A HTML-minifikálók összevonják a címkék közötti szóközöket, törlik a megjegyzéseket, elhagyják az opcionális zárócímkéket, és eltávolítják az idézőjeleket azoknál az attribútumértékeknél, ahol ez megengedett. A szerveroldali sablonkezelés tovább sűrítheti az eredményt: a több tucat részletből összeállított oldal egyetlen folyamban érkezik, az eredeti fájlok elrendezése nélkül. Szinte bármely éles webhely forrását megnyitva néhány óriási sort találsz, ahol egy szakasz zárócímkéjének keresése a csúcsos zárójelek kézi számolásává válik.
A szerkezet teszi érthetővé
A HTML fastruktúra, egy laposan kiírt fa pedig nehezen olvasható. A beágyazási mélység szerinti behúzás azonnal megmutatja a dokumentum alakját: hol ér véget a fejléc, melyik tároló fogja körbe a fő tartalmat, milyen mélyen helyezkedik el egy komponens, és melyik elem zárócímkéje hiányzik. Ezért hasznos a formázott forrás a címsorok sorrendjének ellenőrzéséhez, egy keretrendszer által generált jelölőkód vizsgálatához vagy egy érdekes oldalszakasz felépítésének megértéséhez.
A beágyazott szkriptek és stílusok is
Egy valódi oldal szinte soha nem csak jelölőkódból áll. Analitikai részletek, JSON-LD strukturált adatok, konfigurációs objektumok és kritikus CSS kerülhet közvetlenül a dokumentumba, és a minifikáló ezeket is tömöríti. A formázó minden beágyazott blokkot a megfelelő elemzővel kezel: a tömörített JavaScriptet tartalmazó script címkéből olvasható JavaScript lesz, a style címkéből pedig olvasható CSS. Mindez a megfelelően behúzott dokumentumon belül marad, így a részek és környezetük együtt vizsgálhatók.
A szóközérzékeny elemek megőrzése
A HTML behúzása módosítja a címkék közötti térközöket, ezeknek pedig jelentésük is lehet. A formázó ezt figyelembe veszi: a pre és textarea elemek tartalmát változatlanul hagyja, a szövegközi elemeket pedig körültekintően kezeli, hogy ne adjon hozzá és ne vegyen el látható szóközöket a szöveg körül. A cél egy jól olvasható dokumentum a megjelenés megőrzésével. Ha azonban a formázott változatot futtatni is szeretnéd, előbb ellenőrizd a saját oldalad környezetében.
Gyakori kérdések
Beilleszthetem egy teljes oldal forrását?
Igen. Másold ki a forrást a böngésző view-source nézetéből, vagy mentsd le az oldalt és nyisd meg a fájlt. A teljes dokumentum formázódik, beleértve a head és body részeket, a beágyazott szkripteket és a strukturált adatokat.
Megváltozik az oldal megjelenése?
Elvileg nem. A szóközérzékeny pre és textarea elemek megmaradnak, a szövegközi tartalmat pedig körültekintően kezeli a formázó. Ennek ellenére olvasáshoz mindig másolaton dolgozz, és tesztelés nélkül ne tedd éles környezetbe az eredményt.
Twig- vagy Blade-sablonokkal is működik?
Részben. A szabványos jelölőkód jól formázható, de a saját szintaxisú sabloncímkék megzavarhatják a HTML-elemzőt. Az eszköz elsősorban a böngésző által ténylegesen fogadott HTML-hez készült, nem az azt előállító sablonhoz.