Formatiranje HTML koda na mreži
Pretvorite sažeti izvor stranice u čitljiv HTML. Oznake se uvlače prema dubini ugniježđenosti, atributi se pregledno raspoređuju, a ugrađene skripte i stilovi formatiraju se zajedno s dokumentom.
Zašto izvor stranice tako izgleda
Alati za minifikaciju HTML-a sažimaju razmake između oznaka, uklanjaju komentare i neobavezne završne oznake te skidaju navodnike s vrijednosti atributa kojima nisu potrebni. Poslužiteljski predlošci dodatno otežavaju čitanje jer stranica sastavljena od desetaka dijelova stiže kao jedinstven tok bez vidljive veze s datotekama iz kojih je nastala. Otvorite izvor gotovo bilo kojeg produkcijskog web-mjesta i pronaći ćete dokument s nekoliko golemih redaka, u kojem pronalaženje završne oznake odjeljka zahtijeva ručno brojanje kutnih zagrada.
Najvažnija je struktura
HTML ima strukturu stabla, a stablo je nečitljivo kada je prikazano u jednom retku. Uvlačenje prema dubini ugniježđenosti odmah otkriva oblik dokumenta: gdje završava zaglavlje, koji spremnik obuhvaća glavni sadržaj, koliko je duboko komponenta smještena i gdje treba provjeriti neočekivano ugniježđene elemente. Zato je formatirani izvor koristan za provjeru redoslijeda naslova, pregled oznaka koje je stvorio radni okvir ili razumijevanje načina na koji je drugi autor strukturirao neki odjeljak. Odaberite izvor koji odgovara vašem pitanju. Spremljeni izvor stranice prikazuje HTML koji je isporučio poslužitelj, dok oznake kopirane iz okna Elements mogu sadržavati promjene klijentskih skripti. Formatiranje ne usklađuje ta dva prikaza niti reproducira DOM tijekom izvršavanja. Kada istražujete neočekivani element, usporedite izvor s aktivnim dokumentom i pregledajte skriptu koja ga dodaje. Isto tako, uredno uvučena struktura naslova pomaže ručnom pregledu, ali nije provjera pristupačnosti cijele stranice.
Obrađuju se i ugrađene skripte i stilovi
Prava stranica rijetko je samo HTML. Analitički isječci, strukturirani podaci JSON-LD, konfiguracijski objekti i kritični CSS ugrađeni su izravno u dokument, a alat za minifikaciju sažima i njih. Alat za formatiranje svaki ugrađeni blok obrađuje odgovarajućim parserom, pa oznaka script s minificiranim JavaScriptom daje čitljiv JavaScript, a oznaka style čitljiv CSS, sve unutar pravilno uvučenog dokumenta.
Provjerite sadržaj osjetljiv na razmake
Razmaci mogu utjecati na prikaz HTML-a, osobito oko teksta unutar retka i u elementima kao što su pre i textarea. Alat primjenjuje pravila koja uzimaju u obzir uobičajeno ponašanje razmaka u HTML-u, ali formatiranje nije test vizualnih regresija. Sačuvajte izvornu stranicu i provjerite rezultat u stvarnom kontekstu prije objave promjena. Izgled ovisi i o stilskim datotekama, skriptama i ponašanju preglednika, koji se ovdje ne procjenjuju. Formatirana kopija korisna je za čitanje dokumenta tijekom istraživanja, ali ne dokazuje da će se stranica prikazivati potpuno jednako.
Često postavljana pitanja
Mogu li zalijepiti izvor cijele stranice?
Da. Kopirajte izvor iz preglednika pomoću prikaza view-source ili spremite stranicu i otvorite datoteku, pa će se formatirati cijeli dokument, uključujući head, body, ugrađene skripte i strukturirane podatke.
Hoće li formatiranje promijeniti prikaz stranice?
Alat nastoji poštovati značajne razmake u HTML-u, ali ipak usporedite rezultat prije objave. Tekst unutar retka, unaprijed formatirani sadržaj i međudjelovanje sa stilovima mogu učiniti razmake važnima. Sačuvajte izvornu kopiju i testirajte prikaz u projektu u kojem se HTML stvarno koristi.
Radi li s predlošcima kao što su Twig ili Blade?
Uređivač je namijenjen HTML-u isporučenom pregledniku. Twig, Blade i drugi jezici predložaka uvode sintaksu koju HTML alat može odbiti ili neočekivano obraditi. Za pouzdan pregled generiranih oznaka obradite predložak u svom projektu pa formatirajte dobiveni HTML dokument.