Utilia
Categorii ▾
Limbă: ro ▾

Formatare HTML

Înfrumusețează HTML-ul dezordonat cu indentare curată sau minifică-l în siguranță, în browser. CSS și JavaScript inline sunt formatate. Nu se încarcă nimic.

Cum formatezi HTML

  1. Lipește codul HTML sau apasă Deschide fișierul pentru a încărca un fișier .html sau .htm (până la 10 MB).
  2. Alege Indentare (2 spații, 4 spații sau un tab) și dacă vrei Împarte liniile la 80 sau 120 de caractere.
  3. Bifează Indentează și dacă vrei să fie indentate în interiorul <html> și Elimină comentariile pentru a elimina comentariile <!-- … -->.
  4. Apasă Formatează (înfrumusețează) pentru cod lizibil sau Minifică pentru cea mai mică versiune sigură.
  5. Copiază sau descarcă rezultatul. Linia de stare arată dimensiunea înainte și după.

Rezultatul este afișat ca text simplu în caseta de ieșire. Codul tău HTML nu este niciodată randat sau rulat pe această pagină, așa că scripturile din codul lipit nu pot face nimic.

Înfrumusețare: HTML lizibil, indentat uniform

Formatează (înfrumusețează) folosește js-beautify, formatatorul din spatele multor editoare de cod:

  • elementele de tip bloc se așază pe linii proprii, indentate după adâncimea de imbricare, în timp ce elementele inline precum <a>, <b> sau <span> rămân în text;
  • conținutul <script> și <style> este formatat ca JavaScript și CSS;
  • <pre> și <textarea> rămân exact așa cum au fost scrise, deoarece spațiile lor sunt vizibile;
  • liniile goale consecutive sunt reduse la una;
  • cu o lățime de împărțire, liniile lungi de text și listele lungi de atribute sunt rupte pe mai multe rânduri.

Înfrumusețarea nu repară marcajul stricat: un <div> neînchis rămâne neînchis, iar indentarea care urmează arată unde este problema.

Minificare: HTML mai mic fără a schimba pagina

Minifică folosește o abordare intenționat prudentă:

  • șirurile de spații, tab-uri și rânduri noi din text devin un singur spațiu, exact cum le afișează browserul;
  • spațiile de lângă elementele de tip bloc și lângă cele din antet (<div>, <p>, <li>, <td>, <meta>, <br>…) sunt eliminate, pentru că nu sunt niciodată afișate;
  • un singur spațiu între elemente inline este păstrat, așa că <b>big</b> <i>world</i> nu devine „bigworld”;
  • comentariile sunt eliminate când Elimină comentariile este bifat, cu excepția comentariilor condiționale (<!--[if IE]>) și a celor care încep cu <!--!;
  • conținutul <script>, <style>, <pre> și <textarea> nu este modificat niciodată, iar valorile atributelor sunt păstrate exact, inclusiv ghilimelele.

Nu elimină etichetele de închidere opționale, nu rescrie atribute și nu comprimă JavaScript-ul și CSS-ul inline: aceste optimizări economisesc ceva în plus, dar pot strica pagini. Pentru majoritatea paginilor, compresia HTTP (gzip sau Brotli) economisește mult mai mult decât orice minificator, așa că minificarea este cea mai utilă pentru HTML încorporat în e-mailuri, șabloane sau șiruri JavaScript.

Întrebări frecvente

Este codul meu încărcat?

Nu. Atât formatarea, cât și minificarea rulează în browserul tău; codul nu părăsește calculatorul tău.

De ce pagina mea arată altfel după minificare?

În cazurile obișnuite, nu ar trebui. Singura excepție este CSS-ul care schimbă modul de afișare a spațiilor, de exemplu white-space: pre pe un alt element decât <pre> sau <textarea>, sau un element al cărui mod de afișare a fost schimbat din bloc în inline: spațiile reduse de acolo devin vizibile.

Validează formatatorul codul meu HTML?

Nu. Formatează ceea ce îi dai. Pentru a verifica dacă marcajul este valid, folosește un validator precum W3C Nu HTML Checker.

Pot formata șabloane Vue, Svelte sau Django?

În mare parte. Etichetele de șablon din text și din atribute sunt păstrate, dar sintaxa complexă de șablon poate încurca indentarea, așa că verifică rezultatul.

Ce schimbă „Indentează <head> și <body>”?

Implicit, <head> și <body> încep la același nivel cu <html>, o convenție des întâlnită care economisește un nivel de indentare. Bifează opțiunea pentru a le indenta cu un nivel mai adânc.

Instrumente similare