Cum se folosește
- Lipiți HTML în caseta de introducere, deschideți un fișier .html sau încercați exemplul.
- Alegeți Formatare frumoasă pentru cod indentat și lizibil sau Minificare pentru o ieșire compactă.
- Când formatați frumos, alegeți 2 spații, 4 spații sau taburi și decideți dacă comentariile sunt păstrate.
- Copiați rezultatul sau descărcați-l ca fișier .html.
Cum funcționează
Instrumentul de formatare citește HTML-ul cu un tokenizator permisiv, la fel ca un browser, și îl scrie din nou. Nu redă niciodată intrarea, astfel încât scripturile din codul lipit nu pot rula și nu se încarcă nimic de pe web.
Beautify pune fiecare element de nivel bloc (div, p, ul, li, section, table, …) pe propria linie, indentat în funcție de adâncimea de imbricare. Textul și elementele inline precum a, b, em, span, code, img și br rămân împreună pe o singură linie, astfel încât spațiile dintre cuvinte și linkuri nu sunt schimbate într-un mod care alterează pagina afișată. Secvențele de spații și salturile de rând din text devin un singur spațiu, adică exact cum le afișează oricum browserele.
Conținutul elementelor pre, textarea, script și style este copiat exact așa cum este scris, inclusiv spațiile albe și orice caractere < sau >. Elementele void precum br, img, input, meta și link nu primesc niciodată o etichetă de închidere. Etichetele cu autoînchidere, cum ar fi <path /> în SVG inline, sunt păstrate cu autoînchidere.
Minify reduce spațiile albe din text la spații unice, elimină spațiile albe de lângă elementele de bloc, normalizează spațiile dintre atribute și, dacă opțiunea „Păstrează comentariile” este dezactivată, elimină comentariile. Comentariile condiționale sunt întotdeauna păstrate.
Instrumentul nu repară HTML-ul invalid, nu adaugă etichete lipsă, nu reordonează atributele și nu minimizează CSS-ul și JavaScript-ul din elementele style și script. Elementele rămase deschise sunt închise la sfârșitul părintelui lor, iar o etichetă de închidere fără etichetă de deschidere corespunzătoare este păstrată așa cum este scrisă.
Exemple
Citirea markupului generat
Un CMS generează un șablon ca o singură linie lungă. Formatarea frumoasă cu 2 spații afișează navigarea, elementele de listă și conținutul principal ca un arbore indentat, în timp ce „Prețurile includ <strong>TVA</strong>.” rămâne pe o singură linie lizibilă.
Pregătirea unui șablon de e-mail
Minificați un e-mail HTML cu comentariile dezactivate pentru a-i reduce dimensiunea. Un bloc <pre> cu un tabel de prețuri și stilul <style> inline rămân exact așa cum au fost.
Verificarea structurii
Atunci când lipsește un </div> de închidere, rezultatul formatat arată elementele următoare indentate cu un nivel prea mult, ceea ce face ușor de văzut unde ar fi trebuit să se încheie elementul.
Întrebări frecvente
Va schimba formatarea aspectul paginii mele?
În aproape toate cazurile, nu. Spațiile albe din interiorul elementelor block sunt compactate și transformate în sfârșituri de linie, pe care browserele le ignoră. Textul și elementele inline rămân pe aceeași linie, iar pre, textarea, script și style nu sunt atinse. Excepția o reprezintă paginile care se bazează pe CSS white-space: pre pe elemente obișnuite.
Minifică codul CSS și JavaScript din pagină?
Nu. Conținutul script și style este păstrat exact așa cum a fost scris, astfel încât să nu poată fi afectat. Folosiți instrumentul de formatare CSS pentru a minifica separat o foaie de stil.
Este sigur să lipiți HTML dintr-o sursă necunoscută?
Da. Datele introduse sunt tratate exclusiv ca text și nu sunt niciodată inserate în pagină, astfel încât scripturile nu rulează, iar imaginile sau linkurile nu sunt încărcate.
Îmi validează HTML-ul?
Nu. Este intenționat permisiv și formatează codul de markup defect în loc să îl respingă. Etichetele de închidere nepotrivite sunt păstrate, astfel încât indentarea vă ajută să le observați, dar nu se generează o listă de erori.
Confidențialitate
HTML-ul este procesat doar în browser și nu este niciodată randat sau încărcat. Nimic nu este stocat și nu este inclus în statistici.