Formatador d'HTML

Com formatar HTML

1. Enganxa el teu HTML, o fes clic a Obre un fitxer per carregar un fitxer .html o .htm (fins a 10 MB).
2. Tria la Sagnia (2 espais, 4 espais o un tabulador) i si vols Talla les línies a 80 o 120 caràcters.
3. Marca Sagna i si els vols sagnats dins de <html>, i Elimina els comentaris per eliminar els comentaris <!-- … -->.
4. Fes clic a Formata (embelleix) per obtenir codi llegible, o a Minimitza per obtenir la versió segura més petita.
5. Copia o baixa el resultat. La línia d’estat mostra la mida abans i després.

El resultat es mostra com a text sense format al quadre de sortida. El teu HTML no es renderitza ni s’executa mai en aquesta pàgina, de manera que els scripts del codi que enganxes no poden fer res.

Embellir: HTML llegible i amb una sagnia coherent

Formata (embelleix) fa servir js-beautify, el formatador que hi ha darrere de molts editors de codi:

• els elements de bloc van en línies pròpies, sagnats segons la profunditat d’imbricació, mentre que els elements en línia com <a>, <b> o <span> es queden dins del text;
• el contingut de <script> i <style> es formata com a JavaScript i CSS;
• <pre> i <textarea> es deixen exactament com estan escrits, ja que els seus espais en blanc són visibles;
• les línies en blanc consecutives es redueixen a una;
• amb una amplada de tall, es tallen les línies de text llargues i les llistes d’atributs llargues.

Embellir no arregla el marcatge trencat: un <div> sense tancar continua sense tancar, i la sagnia que el segueix mostra on és el problema.

Minimitzar: HTML més petit sense canviar la pàgina

Minimitza fa servir un enfocament deliberadament conservador:

• les seqüències d’espais, tabuladors i salts de línia dins del text es converteixen en un sol espai, tal com els mostra el navegador;
• els espais en blanc al costat d’elements de bloc i de capçalera (<div>, <p>, <li>, <td>, <meta>, <br>…) s’eliminen, perquè mai no es mostren;
• es conserva un sol espai entre elements en línia, de manera que <b>big</b> <i>world</i> no es converteix en «bigworld»;
• els comentaris s’eliminen quan Elimina els comentaris està marcat, tret dels comentaris condicionals (<!--[if IE]>) i dels comentaris que comencen per <!--!;
• el contingut de <script>, <style>, <pre> i <textarea> no es toca mai, i els valors dels atributs es conserven exactament, cometes incloses.

No elimina les etiquetes de tancament opcionals, no reescriu atributs ni comprimeix el JavaScript i el CSS en línia: aquestes optimitzacions estalvien una mica més, però poden trencar pàgines. Per a la majoria de pàgines, la compressió HTTP (gzip o Brotli) estalvia molt més que qualsevol minimitzador, de manera que la minimització és més útil per a l’HTML incrustat en correus electrònics, plantilles o cadenes de JavaScript.