Használata
- Illessze be a HTML-t a beviteli mezőbe, nyisson meg egy .html fájlt, vagy próbálja ki a példát.
- Válassza a Szépítés lehetőséget a behúzott, olvasható kódért, vagy a Tömörítés lehetőséget a kompakt kimenetért.
- Szépítéskor válasszon 2 szóközt, 4 szóközt vagy tabulátort, és adja meg, hogy a megjegyzések megmaradjanak-e.
- Másolja ki az eredményt, vagy töltse le .html fájlként.
Hogyan működik
A formázó a HTML-t egy engedékeny tokenizálóval olvassa be, nagyjából úgy, ahogy egy böngésző teszi, majd újra kiírja. Soha nem jeleníti meg a bemenetet, így a beillesztett kódban lévő szkriptek nem futnak le, és semmi sem töltődik le a webről.
A szépítés minden blokkszintű elemet (div, p, ul, li, section, table, …) külön sorba helyez, a beágyazási mélységük szerint behúzva. A szöveg és az olyan inline elemek, mint az a, b, em, span, code, img és br, egy sorban maradnak, így a szavak és hivatkozások közötti szóközök nem változnak meg olyan módon, ami módosítaná a megjelenő oldalt. A szövegben lévő szóköz- és sortöréssorozatok egyetlen szóközzé válnak, amit a böngészők egyébként is így jelenítenek meg.
A pre, textarea, script és style elemek tartalma pontosan úgy kerül másolásra, ahogy írták, beleértve a szóközöket és az < vagy > karaktereket. Az üres elemek, mint a br, img, input, meta és link, soha nem kapnak záró címkét. Az önzáró címkék, mint a <path /> az inline SVG-ben, önzáróak maradnak.
A tömörítés a szövegben lévő szóközöket egyetlen szóközzé vonja össze, eltávolítja a blokkelemek melletti szóközöket, egységesíti az attribútumok közötti szóközöket, és ha a „Megjegyzések megőrzése” ki van kapcsolva, eltávolítja a megjegyzéseket. A feltételes megjegyzések mindig megmaradnak.
Az eszköz nem javítja a hibás HTML-t, nem ad hozzá hiányzó címkéket, nem rendezi át az attribútumokat, és nem tömöríti a style és script elemekben lévő CSS- és JavaScript-kódot. A nyitva hagyott elemeket a szülőjük végén zárja le, a hozzá tartozó nyitó címke nélküli záró címkét pedig úgy hagyja meg, ahogy írták.
Példák
Generált HTML-kód olvasása
Egy CMS a sablont egyetlen hosszú sorként adja ki. A 2 szóközzel való szépítés a navigációt, a listaelemeket és a fő tartalmat behúzott faként mutatja, míg az „Az árak tartalmazzák az <strong>áfát</strong>.” mondat egy olvasható sorban marad.
E-mail sablon előkészítése
Tömörítsen egy HTML e-mailt a megjegyzések kikapcsolásával, hogy csökkentse a méretét. Az ártáblázatot tartalmazó <pre> blokk és a beágyazott <style> pontosan úgy marad, ahogy volt.
Szerkezet ellenőrzése
Ha egy záró </div> hiányzik, a szépített kimenet a következő elemeket a kelleténél egy szinttel mélyebben húzza be, így könnyen látható, hol kellett volna véget érnie az elemnek.
Gyakori kérdések
Megváltoztatja-e a szépítés az oldalam megjelenését?
A legtöbb esetben nem. A blokkszintű elemeken belüli üres karakterek összeolvadnak, és sortörésekké alakulnak, amelyeket a böngészők figyelmen kívül hagynak. A szöveg és a soron belüli elemek ugyanabban a sorban maradnak, a pre, a textarea, a script és a style elemekhez pedig nem nyúl. Kivételt képeznek azok az oldalak, amelyek közönséges elemeken CSS white-space: pre tulajdonságra támaszkodnak.
Tömöríti-e az oldalban lévő CSS-t és JavaScriptet?
Nem. A script és style elemek tartalma pontosan úgy marad, ahogy megírták, így nem okozhat hibát. A stíluslap külön tömörítéséhez használja a CSS-formázót.
Biztonságos ismeretlen forrásból származó HTML beillesztése?
Igen. A bemenet kizárólag szövegként van kezelve, és soha nem kerül be az oldalba, így a benne lévő szkriptek nem futnak le, a képek és hivatkozások pedig nem töltődnek be.
Ellenőrzi a HTML-em érvényességét?
Nem. Szándékosan megengedő, és a hibás HTML-kódot formázza ahelyett, hogy elutasítaná. A nem illeszkedő záró címkéket megtartja, így a behúzás segít észrevenni őket, de hibajegyzéket nem készít.
Adatvédelem
A HTML-kód feldolgozása kizárólag a böngésződben történik, soha nem kerül megjelenítésre vagy feltöltésre. Semmit sem tárolunk, és nem használjuk fel elemzésekhez.