Langsung ke konten utama
LibraTool logoLibraTool

Beautifier & Minifier HTML gratis

Pretty-print atau minifikasi HTML dengan indentasi nesting yang tepat. Mempertahankan konten di dalam blok <pre>, <script>, <style>.

Berfungsi offline setelah dimuat

Letakkan file di sini, atau klik untuk memilih

HTML, HTM Β· diproses di perangkat Anda

atau tekan Ctrl+V untuk menempel dari papan klip

Jelajahi file
HTML yang diformat
Output akan muncul di sini…

Penggunaan umum

  • Debug HTML yang Dirender ServerLihat output HTML mentah dari server Anda (PHP, Rails, Django, Node) dalam format yang indentasi dapat dibaca.
  • Format Template Email HTMLEmail HTML banyak (tabel, gaya inline). Format untuk membuatnya dapat disunting dan dipelihara.
  • Format Halaman HTML StatisFile HTML statis yang diedit secara manual mendapat manfaat dari pemformatan yang konsisten untuk pengeditan kolaboratif.
  • Bersihkan HTML yang Diekspor CMSWordPress, Wix, Squarespace mengekspor HTML dengan banyak artefak. Format untuk membuatnya dapat disunting.
  • Minify HTML untuk ProduksiKurangi ukuran file HTML untuk pemuatan halaman yang lebih cepat dengan menghapus spasi putih dan karakter yang tidak perlu.

Cara kerja

Alat ini memformat atau mengompresi HTML menggunakan tokenizer sadar-tag tulisan tangan yang dibangun langsung ke dalam halaman β€” tanpa library pemformatan pihak ketiga, tanpa perjalanan pulang-pergi server. Setiap karakter markup Anda diproses secara lokal di browser seketika Anda mengetik atau menempelnya.

  1. 1
    Tokenizer memindai markup
    Pemindai karakter-demi-karakter khusus menelusuri string HTML, mengidentifikasi komentar, deklarasi DOCTYPE, tag pembuka, tag penutup, elemen void yang menutup-sendiri (br, img, input, dll.), dan simpul teks mentah. Helper khusus melacak nilai atribut berkutip sehingga karakter seperti > di dalam atribut (misalnya value="a>b") tidak pernah menyebabkan tag terpisah lebih awal.
  2. 2
    Kedalaman indentasi dilacak per tag
    Untuk mode beautify, tokenizer mempertahankan penghitung kedalaman. Tag pembuka tingkat-blok menambah kedalaman; tag penutup menguranginya sebelum ditulis. Elemen inline (span, a, strong, em, dll.) tetap pada baris yang sama dengan kontennya alih-alih didorong ke baris berindentasi sendiri. Tag seperti pre, script, style, dan textarea memiliki konten dalamnya dikeluarkan apa adanya untuk menghindari merusak spasi-sensitif atau kode yang dapat dieksekusi.
  3. 3
    Minifier menciutkan spasi dengan aman
    Dalam mode minify, konten blok pre, script, style, dan textarea ditukar dengan sentinel bernomor sebelum penciutan spasi terjadi. Komentar HTML dihapus, dan rangkaian spasi di antara tag dihapus β€” kecuali di antara elemen inline yang berdekatan, di mana satu spasi dipertahankan agar kata tidak menyatu. Placeholder sentinel kemudian dikembalikan ke konten aslinya.
  4. 4
    Keluaran ditampilkan dan opsional disimpan
    Hasil yang diformat atau di-minify muncul langsung di panel keluaran bersama persentase perubahan ukuran. Anda bisa menyalinnya ke clipboard atau mengunduhnya sebagai file .html, semuanya tanpa meninggalkan browser.

Alat terkait

🎨

Beautifier CSS

Rapikan CSS yang diminify dengan indentasi konsisten, atau minify CSS. Opsi pengurutan properti secara alfabetis untuk perbandingan perubahan yang lebih mudah diprediksi.

Coba
πŸ—œοΈ

Minifier & Beautifier CSS

Minifikasi CSS untuk mengurangi ukuran file atau rapikan CSS yang sudah diminifikasi agar mudah dibaca. Instan, di browser Anda.

Coba
πŸ“°

Formatter & Validator XML

Pretty-print dan validasi XML menggunakan parser DOM native browser Anda. Termasuk output yang diminifikasi untuk penggunaan produksi.

Coba

Pertanyaan yang sering diajukan