Perapih & Pemformat HTML Online (HTML Beautifier)

Format, beri indentasi, dan bersihkan kode HTML5 yang berantakan atau terkompresi (minified) secara real-time. Menangani tag void HTML5, elemen inline, attribute wrapping dengan tepat, serta mempertahankan blok <pre>, <script>, dan <style>.

Preset Cepat:

Karakter: 0

Baris: 0

Ukuran: 0 B

Apa Itu Perapih & Pemformat HTML Online?

Perapih HTML (HTML Beautifier)—juga dikenal sebagai pemformat HTML atau pretty-printer—mengambil kode sumber HTML yang terkompresi, diperkecil (minified), atau memiliki indentasi tidak konsisten lalu menyusunnya kembali menjadi hierarki DOM yang bersih dan mudah dibaca manusia. Baik Anda sedang memeriksa template produksi yang diperkecil, membersihkan ekspor CMS, atau menstandarkan kode sebelum melakukan commit ke Git, indentasi yang tepat memudahkan Anda menemukan tag yang belum ditutup dan kontainer yang bersarang terlalu dalam.

Berbeda dengan pemformat berbasis ekspresi reguler sederhana yang memecah setiap tanda kurung siku ke baris baru dan merusak blok <pre> atau <script>, alat ini menggunakan tokenizer HTML5 context-aware. Alat ini mengenali ke-14 elemen void HTML5, menjaga tag pemformatan inline pendek (<strong>, <em>, <a>, <span>) tetap terbaca pada baris yang sama, dan menyertakan Minifier HTML sekali klik saat Anda siap memadatkan markup untuk produksi.

Cara Merapikan atau Memperkecil Kode HTML Secara Online

  1. Tempel markup HTML Anda: Tempel kode HTML yang belum diformat atau diperkecil ke dalam kotak Kode HTML Input, atau klik Muat Contoh HTML untuk menguji pemformat dengan template HTML5 lengkap.
  2. Pilih preferensi pemformatan Anda: Gunakan bilah Preset Cepat atau kolom pengaturan di sebelah kanan untuk mengatur indentasi (2, 4, atau 8 spasi, atau tab), attribute wrapping, pengelompokan tag inline, dan penghapusan komentar.
  3. Salin, unduh, atau perkecil (minify): HTML yang diformat diperbarui secara otomatis saat Anda mengetik. Klik Salin ke Clipboard, Unduh .html untuk menyimpan file secara lokal, atau Minify HTML untuk memadatkan markup menjadi satu baris tunggal.

Perbandingan Pemformatan HTML Sebelum vs. Sesudah

Mode Pemformatan Contoh Output HTML Kegunaan Terbaik
HTML Diperkecil (Minified) <div class="card" id="hero"><h2>Halo <strong>Dunia</strong></h2><img src="a.jpg" alt="Hero"></div> Penerapan produksi, mengurangi ukuran payload HTTP, dan template HTML email.
Dirapikan Standar (4 Spasi) <div class="card" id="hero">
    <h2>Halo <strong>Dunia</strong></h2>
    <img src="a.jpg" alt="Hero">
</div> 		Pengembangan web sehari-hari, debugging sarang DOM, dan peninjauan kode (code review).
Mode Atribut Terbungkus <div
    class="card"
    id="hero"> 		Komponen dengan banyak kelas utilitas Tailwind CSS, atribut data-*, atau properti ARIA.

Elemen Void HTML5 & Pemformatan Tag Inline vs. Blok

  • Elemen Void HTML5 Tidak Pernah Menambah Kedalaman Sarang: Dalam HTML5, elemen void (<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track>, dan <wbr>) tidak memerlukan tag penutup atau garis miring di akhir. Pemformat kami melacak elemen-elemen ini secara otomatis sehingga elemen sejajar tetap rata.
  • Elemen Inline vs. Blok: Memecah elemen inline seperti <p>Baca <a href="/docs">dokumentasi</a> kami hari ini.</p> menjadi lima baris terpisah membuat kalimat sulit dibaca dan dapat menimbulkan spasi kosong yang tidak diinginkan di antara kata-kata pada browser. Membiarkan Biarkan Tag Inline Pendek dalam Satu Baris tetap aktif akan menjaga alur kalimat tetap alami.
  • Mempertahankan Blok Mentah: Spasi kosong di dalam tag <pre>, <code>, dan <textarea> dirender secara harfiah oleh browser. Membiarkan opsi Tanpa Format tetap dicentang menjamin cuplikan kode, diagram ASCII, dan blok <script> atau <style> yang disematkan tidak pernah berubah.

Pertanyaan yang Sering Diajukan (FAQ)

Apa perbedaan antara merapikan (beautify) HTML dan memperkecil (minify) HTML?

Merapikan HTML (pretty-printing) menambahkan jeda baris terstruktur dan indentasi bertingkat sehingga pengembang dapat dengan mudah membaca, men-debug, dan memelihara markup. Memperkecil HTML (minify) menghapus spasi kosong, baris baru, dan komentar yang tidak perlu untuk mengurangi ukuran file demi pemuatan halaman produksi yang lebih cepat.

Mengapa tag <pre>, <code>, <script>, dan <style> tidak boleh diformat ulang?

Di dalam elemen <pre>, <code>, dan <textarea>, spasi kosong dan jeda baris dirender secara harfiah oleh browser, sehingga mengubah indentasi akan merusak tampilan output. Demikian pula, memecah baris di dalam tag <script> atau <style> dengan parser HTML dapat merusak literal string JavaScript atau selektor CSS. Mengaktifkan Biarkan <pre>, <script>, <style> Tanpa Format akan menjaga blok-blok ini tetap utuh apa adanya.

Bagaimana Perapih HTML menangani elemen void (menutup sendiri) HTML5?

HTML5 mendefinisikan 14 elemen void (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, dan wbr) yang tidak pernah memiliki tag penutup. Pemformat ini secara otomatis mengenali ke-14 elemen void tersebut—ditambah deklarasi <!DOCTYPE> dan instruksi XML/SGML—sehingga tidak pernah mendorong tag sejajar berikutnya ke tingkat indentasi yang lebih dalam.

Sebaiknya saya menggunakan 2 spasi, 4 spasi, atau tab untuk indentasi HTML?

Baik 2 spasi maupun 4 spasi sama-sama banyak digunakan. Panduan Gaya HTML/CSS Google dan toolchain frontend modern (Prettier, Vue, React) menggunakan default 2 spasi karena dokumen HTML sering kali memiliki sarang DOM yang dalam. WordPress dan banyak mesin template backend lebih memilih tab atau 4 spasi. Anda dapat beralih di antara ketiganya secara instan menggunakan bilah Preset Cepat.

Apakah kode HTML saya diunggah ke server mana pun?

Tidak. Semua penguraian, pemformatan, dan minifikasi HTML dilakukan 100% secara lokal di browser Anda menggunakan JavaScript. Kode sumber dan template Anda tidak pernah meninggalkan perangkat Anda.