Format atau perkecil HTML
Pemformat dan pengecil HTML online gratis — tempel bundel yang diminify dan baca dengan indentasi, atau pangkas byte dari template email sebelum deploy. Mode deteksi otomatis memilih arah yang tepat (input ringkas satu baris → output berindentasi, input berindentasi → output satu baris), atau pilih manual. Indentasi dengan 2 spasi, 4 spasi, atau tab. Elemen void (br, hr, img, input, meta, link) dapat ditutup-mandiri gaya XHTML atau dibiarkan polos gaya HTML5. Konten <pre>, <script> dan <style> dipertahankan harfiah — pemformat yang merusak blok-blok ini memecahkan sampel kode yang disorot sintaksnya di setiap blog. Komentar dapat dihapus opsional dari kedua arah.
Cara menggunakan
Arah dideteksi otomatis secara default.
2 spasi adalah standar untuk sebagian besar panduan gaya frontend.
Versi cantik atau diperkecil muncul di kanan.
Clipboard sekali klik atau simpan sebagai .html.
Percantik atau perkecil HTML di browser — mempertahankan konten <pre>, <script>, <style> secara harfiah
Fitur
Penggunaan umum
- Percantik file HTML yang ditempel-salin dan diperkecil untuk memeriksa strukturnya.
- Perkecil template email HTML sebelum deploy — mencukur byte dari setiap pengiriman.
- Konversi elemen void HTML5 ke penutup mandiri XHTML untuk pipeline XML ketat.
- Hapus komentar developer dari build HTML produksi.
- Indentasi ulang template yang diedit manual untuk mencocokkan konvensi tim.
Mengapa yang ini
Banyak pemformat berbasis browser merusak konten <pre> atau <script> — salin cuplikan kode melalui salah satunya dan indentasi Anda hancur. Yang ini mengenali elemen raw-text (script, style, pre, textarea) dan membiarkan kontennya utuh byte demi byte. Semua yang lain mendapat indentasi per blok yang bersih. Tanpa pendaftaran, tanpa kuota per file.
Pertanyaan umum
Apa itu "elemen void"?
Elemen HTML yang tidak memiliki tag penutup dan tidak ada konten — br, hr, img, input, meta, link, source, track, area, base, col, embed, param, wbr. Di HTML5 ini dapat ditulis sebagai <br> (disukai) atau <br /> (XHTML legacy). Pilih yang diharapkan linter Anda.
Apakah ia memodifikasi konten di dalam <script> atau <style>?
Tidak. Apa pun di dalam <script>, <style>, <pre>, dan <textarea> dipertahankan byte demi byte. Penanganan spasi di sekitar tag-tag ini mengikuti aturan elemen raw-text HTML5.
Mengapa output yang diperkecil masih memiliki spasi?
Pengecilan mengompres spasi antar tag tetapi mempertahankan setidaknya satu spasi di mana itu bermakna secara semantik (antar elemen inline seperti <span> atau <a>) — menghapus spasi itu secara visual mengubah halaman yang dirender. Untuk pemangkasan spasi yang agresif gunakan minifier saat build (html-minifier-terser, htmlnano) di mana Anda dapat menyesuaikan trade-off.
Akankah ini memperbaiki tag yang belum ditutup?
Tidak — tool ini murni pemformat. Jika Anda memiliki <div> yang belum ditutup, output akan mencerminkan struktur (rusak) tersebut. Gunakan validator seperti W3C Nu Validator untuk lint struktural.
Apakah ia menangani sintaks template seperti @{{ ... }} atau {% %}?
Ia mencoba membiarkan sebagian besar token template utuh, tetapi Blade ({{ }}), Twig ({% %}), Vue ({{ }}), dll. masih bisa mendapatkan spasi yang aneh. Untuk template dengan interpolasi berat, format HTML yang dirender atau gunakan tool yang sadar template.
Mobile?
Ya — input dan output bertumpuk di layar sempit.
Kami bisa — dan gratis! Kirim pesan singkat dengan ide Anda. Jika ingin diskusi lebih detail, tinggalkan email dan kami akan menghubungi Anda. Bisa anonim.
