Untangle messy HTML into clean, indented markup

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.

Pemilih indentasi (2, 4, atau 8 spasi) hanya berlaku dalam mode Prettify, karena Minify menghapus semua whitespace dan pemutus baris secara sengaja — tidak ada yang tersisa untuk diindentasi. Beralih kembali ke Prettify untuk melihat lebar indentasi berlaku lagi.

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.

Gunakan mode Prettify dengan indentasi 2 spasi — ini konvensi paling umum dan menjaga diff tetap ringkas — lalu periksa panel structural-issues untuk memastikan tidak ada tag yang belum ditutup. Setelah ditinjau, beralih ke mode Minify sebelum dikirim ke produksi untuk menghapus kembali spasi berlebih.

Ya — seret file .html, .htm, atau .xhtml ke area unggah, atau klik untuk menjelajah, dan isinya langsung dimuat ke kotak input persis seperti jika Anda menempelkannya. Dari sana, Prettify, Minify, lebar indentasi, dan pemeriksa struktur semuanya bekerja identik baik markup berasal dari file maupun tempelan.

Ya — setelah ada keluaran, tombol Salin muncul di samping panel keluaran dan area aksi utama. Mengekliknya langsung menyalin hasil Prettify atau Minify saat ini ke clipboard Anda (sekilas menampilkan 'Copied!' sebagai konfirmasi), jadi Anda dapat menempel langsung ke editor atau komentar tinjauan kode tanpa menyimpan file .html perantara.