Cara menggunakan

Tempel HTML ke kotak input, buka file .html, atau coba contohnya.
Pilih Rapikan untuk markup yang diindentasi dan mudah dibaca, atau Minify untuk hasil yang ringkas.
Saat merapikan, pilih 2 spasi, 4 spasi, atau tab, dan tentukan apakah komentar dipertahankan.
Salin hasilnya atau unduh sebagai file .html.

Cara kerja

Formatter membaca HTML dengan tokenizer toleran, seperti yang dilakukan browser, lalu menulisnya kembali. Alat ini tidak pernah merender input, sehingga skrip pada kode yang ditempel tidak dapat berjalan dan tidak ada yang dimuat dari web.

Beautify menempatkan setiap elemen tingkat blok (div, p, ul, li, section, table, …) pada barisnya sendiri, diindentasi sesuai kedalaman bersarang. Teks dan elemen inline seperti a, b, em, span, code, img, dan br tetap berada dalam satu baris, sehingga spasi antara kata dan tautan tidak berubah dengan cara yang mengubah halaman yang ditampilkan. Deretan spasi dan pemisah baris dalam teks menjadi satu spasi, sebagaimana browser menampilkannya.

Konten elemen pre, textarea, script, dan style disalin persis seperti yang ditulis, termasuk spasi dan karakter < atau > apa pun. Elemen void seperti br, img, input, meta, dan link tidak pernah diberi tag penutup. Tag self-closing seperti <path /> pada SVG inline tetap dipertahankan self-closing.

Minify merapatkan spasi dalam teks menjadi satu spasi, menghapus spasi di dekat elemen blok, menormalkan spasi antar atribut, dan jika “Keep comments” dinonaktifkan, menghapus komentar. Komentar kondisional selalu dipertahankan.

Alat ini tidak memperbaiki HTML yang tidak valid, menambah tag yang hilang, menyusun ulang atribut, atau meminifikasi CSS dan JavaScript di dalam elemen style dan script. Elemen yang dibiarkan terbuka ditutup di akhir induknya, dan tag penutup tanpa tag pembuka yang cocok dipertahankan apa adanya.

Contoh

Membaca markup yang dihasilkan

CMS menghasilkan template sebagai satu baris panjang. Beautify dengan 2 spasi menampilkan nav, item daftar, dan konten utama sebagai pohon berindentasi, sementara “Harga sudah termasuk <strong>PPN</strong>.” tetap dalam satu baris yang mudah dibaca.

Menyiapkan template email

Minify email HTML dengan komentar dimatikan untuk mengurangi ukurannya. Blok <pre> berisi tabel harga dan <style> inline dibiarkan persis seperti aslinya.

Memeriksa struktur

Ketika tag penutup </div> hilang, output hasil beautify menampilkan elemen berikutnya dengan indentasi satu tingkat terlalu dalam, sehingga memudahkan melihat di mana elemen tersebut seharusnya berakhir.

Pertanyaan yang sering diajukan

Apakah merapikan kode akan mengubah tampilan halaman saya?

Dalam hampir semua kasus tidak. Spasi putih di dalam elemen blok diciutkan dan dianggap sebagai jeda baris, yang diabaikan browser. Teks dan elemen inline tetap pada baris yang sama, serta pre, textarea, script, dan style tidak diubah. Pengecualiannya adalah halaman yang mengandalkan CSS white-space: pre pada elemen biasa.

Apakah alat ini meminifikasi CSS dan JavaScript di dalam halaman?

Tidak. Konten script dan style dipertahankan persis seperti tertulis sehingga tidak akan rusak. Gunakan formatter CSS untuk meminifikasi stylesheet secara terpisah.

Apakah aman menempelkan HTML dari sumber yang tidak dikenal?

Ya. Input diperlakukan murni sebagai teks dan tidak pernah dimasukkan ke dalam halaman, sehingga skripnya tidak dijalankan dan gambar atau tautannya tidak dimuat.

Apakah alat ini memvalidasi HTML saya?

Tidak. Alat ini sengaja toleran dan memformat markup yang rusak alih-alih menolaknya. Tag penutup yang tidak cocok dipertahankan, sehingga indentasi membantu Anda menemukannya, tetapi tidak ada daftar kesalahan yang dihasilkan.

Privasi

HTML Anda hanya diproses di browser Anda dan tidak pernah dirender atau diunggah. Tidak ada yang disimpan atau disertakan dalam analitik.