HTML Formatter

Paano mag-format ng HTML

1. I-paste ang iyong HTML, o i-click ang Buksan ang file para mag-load ng .html o .htm file (hanggang 10 MB).
2. Piliin ang Indentation (2 espasyo, 4 na espasyo o tab) at kung I-wrap ang mga linya sa 80 o 120 character.
3. Lagyan ng check ang I-indent ang at kung gusto mong ma-indent ang mga ito sa loob ng <html>, at Alisin ang mga komento para tanggalin ang mga komentong <!-- … -->.
4. I-click ang I-format (beautify) para sa nababasang code, o I-minify para sa pinakamaliit na ligtas na bersyon.
5. Kopyahin o i-download ang resulta. Ipinapakita ng status line ang laki bago at pagkatapos.

Ipinapakita ang resulta bilang plain text sa output box. Hindi kailanman nire-render o pinapatakbo ang iyong HTML sa page na ito, kaya walang magagawa ang mga script sa code na ipine-paste mo.

Beautify: nababasa at pare-parehong na-indent na HTML

Ang I-format (beautify) ay gumagamit ng js-beautify, ang formatter sa likod ng maraming code editor:

• ang mga block element ay nasa sarili nilang linya, na naka-indent ayon sa lalim ng nesting, habang ang mga inline element gaya ng <a>, <b> o <span> ay nananatili sa loob ng text;
• ang laman ng <script> at <style> ay ina-format bilang JavaScript at CSS;
• ang <pre> at <textarea> ay iniiwan nang eksakto kung paano isinulat, dahil nakikita ang kanilang whitespace;
• ang sunud-sunod na blangkong linya ay ginagawang isa;
• kapag may lapad ng wrap, ibinabalot ang mahahabang linya ng text at mahahabang listahan ng attribute.

Hindi inaayos ng beautifying ang sirang markup: ang hindi naisarang <div> ay mananatiling bukas, at ang indentation na kasunod nito ay nagpapakita kung nasaan ang problema.

Minify: mas maliit na HTML nang hindi binabago ang page

Gumagamit ang I-minify ng sadyang konserbatibong paraan:

• ang magkakasunod na espasyo, tab at line break sa text ay nagiging iisang espasyo, gaya ng ipinapakita ng browser;
• inaalis ang whitespace sa tabi ng mga block-level at head element (<div>, <p>, <li>, <td>, <meta>, <br>…), dahil hindi ito kailanman nire-render;
• pinananatili ang iisang espasyo sa pagitan ng mga inline element, kaya ang <b>big</b> <i>world</i> ay hindi nagiging “bigworld”;
• inaalis ang mga komento kapag naka-check ang Alisin ang mga komento, maliban sa mga conditional comment (<!--[if IE]>) at mga komentong nagsisimula sa <!--!;
• hindi kailanman ginagalaw ang laman ng <script>, <style>, <pre> at <textarea>, at eksaktong pinananatili ang mga value ng attribute, kasama ang mga panipi.

Hindi nito inaalis ang mga opsyonal na closing tag, hindi sinusulat muli ang mga attribute at hindi kino-compress ang inline JavaScript at CSS: bahagya pang nakakatipid ang mga optimisasyong iyon pero maaaring makasira ng mga page. Para sa karamihan ng page, mas malaki ang natitipid ng HTTP compression (gzip o Brotli) kaysa sa anumang minifier, kaya pinakamakatulong ang minification sa HTML na nakapaloob sa mga email, template o JavaScript string.