HTML Prettify & Minify - Format HTML Online Gratis

Tempel HTML apa pun — bahkan output minifikasi satu baris dari pipeline build — dan alat ini akan memformatnya ulang dengan indentasi yang tepat, satu tag per baris, dan spasi yang konsisten. Pilih indentasi 2, 4, atau 8 spasi. Outputnya siap diletakkan ke editor Anda atau ditempel ke komentar code review.

Prettify memperluas HTML agar mudah dibaca: setiap tag di barisnya sendiri, elemen anak yang bersarang diberi indentasi, dan baris kosong antar bagian tetap dipertahankan. Minify menghapus komentar, memadatkan rangkaian spasi, dan menghilangkan pemisah baris sehingga file dikirim dalam byte yang lebih sedikit. Gunakan prettify untuk mengedit dan meninjau, minify untuk penerapan produksi.

Tidak — js-beautify (mesin yang bekerja di baliknya) mendeteksi blok script dan style serta memformat isinya dengan aturan JS atau CSS yang sesuai, sehingga script inline tetap valid dan stylesheet tetap mudah dibaca. Tag yang menutup sendiri, elemen void, dan atribut bernamespace (svg:xmlns, xlink:href) semuanya ditangani dengan benar.

Alat ini menangani HTML biasa dan templat mirip HTML dengan baik, tetapi JSX murni (ekspresi kurung kurawal, fragmen, tag komponen berhuruf kapital) akan diurai sebagai HTML dan mungkin menimbulkan masalah kosmetik kecil. Untuk kode khusus framework, kami merekomendasikan Prettier yang dikonfigurasi sesuai dialek Anda; untuk berkas HTML mentah, .htm, dan templat, alat kami sangat ideal.

Tidak ada unggahan yang terjadi. Pemformat berjalan sepenuhnya di peramban Anda dengan js-beautify, sehingga Anda dapat dengan aman menempel template halaman internal, draf email, atau HTML yang berisi data pribadi tanpa apa pun meninggalkan perangkat Anda.

Kompresi menghapus komentar HTML, menciutkan rangkaian spasi di antara tag menjadi satu spasi, dan menghilangkan pemisah baris. Hasilnya adalah HTML yang dirender secara identik byte demi byte namun biasanya 10-30% lebih kecil. Dikombinasikan dengan gzip di server, ini menurunkan bobot halaman awal secara signifikan pada halaman yang padat konten.

Ya — klik Unduh untuk menyimpan keluaran yang dirapikan sebagai output.html atau keluaran yang diperkecil sebagai output.min.html. File ber-encoding UTF-8, sehingga bekerja dengan baik untuk konten bahasa Inggris, Sirilik, CJK, dan tulisan kanan-ke-kiri.

Ini adalah utilitas kecil yang berjalan sepenuhnya di peramban — tanpa biaya hosting — sehingga kami menyediakannya gratis sebagai bagian dari perangkat pengembang kami. Tanpa iklan, tanpa pelacakan pada keluaran, tanpa batasan ukuran berkas selain dari kapasitas memori peramban Anda.

Mode Prettify memungkinkan Anda memilih indentasi 2, 4, atau 8 spasi. Pilih lebar yang digunakan editor atau gaya kode Anda, lalu salin hasilnya atau unduh sebagai output.html agar pemformatan langsung terbawa ke proyek Anda.

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

Saat Anda menempel atau mengedit, alat ini otomatis menjalankan pemeriksaan struktural dan mencantumkan tag penutup yang tak tertutup, tak cocok, atau menggantung tepat di bawah panel keluaran — tanpa perlu tombol terpisah. Pesan hijau "No structural issues found" mengonfirmasi bahwa markup tersusun dengan benar.

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.