Formátovanie HTML online
Zmeňte kompaktný zdrojový kód stránky na čitateľné HTML. Značky sa odsadia podľa hĺbky vnorenia, atribúty sa prehľadne rozložia a vložené skripty a štýly sa naformátujú spolu s dokumentom.
Prečo zdrojový kód stránky vyzerá takto
Minifikátory HTML zlučujú medzery medzi značkami, odstraňujú komentáre, vynechávajú nepovinné koncové značky a úvodzovky okolo hodnôt atribútov, ktoré ich nepotrebujú. Šablóny na serveri zvyšujú neprehľadnosť, pretože stránka zložená z desiatok čiastkových šablón dorazí ako jediný tok bez viditeľnej väzby na súbory, z ktorých vznikla. Otvorte zdrojový kód takmer ľubovoľného produkčného webu a nájdete dokument s niekoľkými obrovskými riadkami, v ktorom hľadanie koncovej značky sekcie znamená ručné počítanie lomených zátvoriek.
Najdôležitejšia je štruktúra
HTML má stromovú štruktúru a strom sa pri zápise do jedného riadka číta ťažko. Odsadenie podľa hĺbky vnorenia ihneď ukáže tvar dokumentu: kde sa končí hlavička, ktorý kontajner obaľuje hlavný obsah, ako hlboko je komponent vnorený a kde treba preskúmať neočakávaný vzťah medzi prvkami. Preto je naformátovaný zdroj stránky užitočný pri kontrole poradia nadpisov, skúmaní HTML vygenerovaného frameworkom alebo zisťovaní, ako je usporiadaná zaujímavá sekcia konkurenčnej stránky. Vyberte si zdroj zodpovedajúci vašej otázke. Uložený zdrojový kód stránky ukazuje HTML dodané serverom, zatiaľ čo obsah skopírovaný z panela Elements môže obsahovať zmeny vykonané klientskymi skriptmi. Formátovanie tieto pohľady nezjednocuje ani nereprodukuje DOM za behu. Pri hľadaní neočakávaného prvku porovnajte zdroj so živým dokumentom a preskúmajte skript, ktorý ho pridal. Podobne prehľadne odsadená štruktúra nadpisov pomôže pri ručnej kontrole, ale nenahrádza audit prístupnosti celej stránky.
Spracujú sa aj vložené skripty a štýly
Skutočná stránka je len zriedka iba značkovanie. Analytické skripty, štruktúrované dáta JSON-LD, konfiguračné objekty a kritické CSS sú vložené priamo do dokumentu a minifikátor skomprimuje aj tie. Formátovač spracuje každý vložený blok správnym syntaktickým analyzátorom, takže značka script s minifikovaným JavaScriptom vyjde ako čitateľný JavaScript a značka style ako čitateľné CSS, to všetko vo vnútri správne odsadeného dokumentu.
Skontrolujte obsah citlivý na medzery
Medzery a zalomenia môžu ovplyvniť vykreslenie HTML, najmä okolo riadkového textu a v prvkoch ako pre a textarea. Formátovač používa pravidlá zohľadňujúce bežné správanie medzier v HTML, formátovanie však nie je vizuálny regresný test. Ponechajte si pôvodnú stránku a pred zverejnením zmien overte výsledok v skutočnom kontexte. Rozloženie závisí aj od štýlov, skriptov a správania prehliadača, ktoré sa tu nevyhodnocujú. Naformátovaná kópia pomáha pri čítaní dokumentu, nedokazuje však, že sa stránka vykreslí úplne rovnako.
Často kladené otázky
Môžem vložiť celý zdrojový kód stránky?
Áno. Skopírujte zdrojový kód z prehliadača cez view-source alebo si stránku uložte a otvorte súbor, a naformátuje sa celý dokument vrátane častí head a body, vložených skriptov a štruktúrovaných dát.
Zmení formátovanie vzhľad stránky?
Formátovač sa snaží rešpektovať významové medzery v HTML, výsledok však pred zverejnením porovnajte s originálom. Pri riadkovom texte, predformátovanom obsahu a v kombinácii so štýlmi môžu byť medzery dôležité. Ponechajte si pôvodnú kópiu a otestujte vykreslenie v projekte, ktorý dané HTML skutočne používa.
Funguje nástroj so šablónami Twig alebo Blade?
Editor je určený pre HTML dodané do prehliadača. Twig, Blade a ďalšie šablónové jazyky pridávajú syntax, ktorú formátovač HTML môže odmietnuť alebo spracovať neočakávane. Ak chcete spoľahlivo preskúmať vygenerované HTML, vykreslite šablónu vo svojom projekte a naformátujte výsledný dokument HTML.