Pemformat & Perapih HTML Gratis

Apa itu pemformatan HTML?

Pemformatan HTML (juga disebut "beautification" atau "pretty-printing") adalah kebalikan dari minifikasi. Sebuah formatter mengambil HTML dalam bentuk apa pun, output produksi yang diminifikasi, ditempel dari inspector browser, dihasilkan dari template engine, atau hanya ditulis dengan tangan secara berantakan, dan memancarkannya kembali dengan indentasi yang konsisten, jeda baris antar elemen block, dan struktur visual yang dapat diprediksi. Browser mengabaikan spasi tambahan saat parsing, jadi pemformatan mengubah bagaimana sumber terlihat tetapi tidak pernah mengubah bagaimana halaman dirender. Mengapa repot-repot? Karena mata manusia mengurai hierarki yang diindentasi lebih cepat daripada tag soup yang secara visual datar. Code review, debugging, mempelajari struktur HTML, menyerahkan markup ke developer lain, membandingkan dua versi untuk perubahan, semuanya menjadi jauh lebih mudah ketika pohon dokumen jelas secara visual dari indentasi.

Lima alur kerja dunia nyata di mana sebuah formatter benar-benar berguna: (1) HTML produksi yang diminifikasi ditempel dari "View Source" browser atau "Copy outer HTML" DevTools kembali ke debugger; (2) HTML diekstrak dari textarea CMS di mana editor WYSIWYG menghasilkan output yang bersih secara visual tetapi sumber berantakan; (3) debug output template engine (Jinja, Twig, Handlebars, ERB) di mana HTML yang dirender tidak cocok dengan yang Anda harapkan; (4) mengonversi HTML yang dihasilkan otomatis (dari rendering server-side React, Pandoc, konverter dokumen) menjadi bentuk yang dapat dibaca untuk code review; (5) membersihkan HTML template email sebelum mengirimkannya ke platform pemasaran yang mungkin menghapus pemformatan Anda saat impor.

Formatter HTML Utama

js-beautify (Einar Lielmanis, sejak 2007) adalah formatter ekosistem JavaScript yang sudah lama ada, menangani HTML, CSS, JavaScript, dan JSON dengan satu pustaka. Formatter HTML adalah yang menggerakkan tampilan publik beautifier.io dan secara historis mendukung puluhan situs "format HTML online". Prettier (James Long, 2017) adalah formatter beropinion yang dominan dalam ekosistem frontend modern; dukungan HTML datang segera setelah peluncuran. Filosofi desain Prettier adalah "hampir tanpa konfigurasi", satu gaya indentasi (2 spasi sebagai default), satu target lebar baris (printWidth: 80), satu set aturan pembungkusan atribut. Trade-offnya adalah konsistensi antar tim tanpa bikeshedding; biayanya adalah fleksibilitas pribadi yang lebih sedikit. HTML Tidy (Dave Raggett di W3C pada 1997, sekarang dipelihara oleh HTACG) adalah yang asli, mendahului adegan formatter modern web dan awalnya dirancang untuk membersihkan HTML lama, rusak, deprecated dari akhir 1990-an. Tidy masih dikirim di macOS secara default (/usr/bin/tidy) dan di sebagian besar distribusi Linux; jarang digunakan pada 2026 tetapi masih dihormati karena ketelitiannya. Dalam alur kerja modern, Prettier adalah default untuk proyek baru, terintegrasi ke VS Code (formatter default untuk file HTML), JetBrains IDEs, dan hook pre-commit melalui Husky + lint-staged. Alat ini untuk kasus di mana Anda tidak memiliki pipeline build yang menjalankan Prettier, tempel, format, salin keluar.

Konvensi Indentasi

Tiga gaya indentasi bersaing dalam HTML modern. 2 spasi adalah default web modern, digunakan oleh HTML/CSS Style Guide GitHub, HTML/CSS Style Guide Google, default Prettier, contoh gaya WHATWG, dan sebagian besar paket front-end yang diterbitkan di npm. Argumennya: HTML bersarang dalam (komponen tipikal mungkin 6-10 level indentasi), dan 2 spasi menjaga baris dari berlari keluar tepi kanan layar 80 kolom. 4 spasi adalah tradisi Java / Microsoft lama yang bertahan di beberapa proyek legacy dan standar PSR-12 PHP; menghasilkan hierarki yang lebih jelas secara visual dengan biaya ruang horizontal. Tab disukai oleh komunitas kernel Linux, beberapa proyek Go, dan developer yang berpendapat bahwa karakter tab memungkinkan setiap penonton mengatur preferensi lebar visual mereka sendiri. Argumen "tab vs spasi" lebih tua dari sebagian besar pembaca dan tidak dapat dimenangkan; jawaban praktisnya adalah memilih satu per proyek dan membuat formatter Anda menerapkannya. Alat ini menawarkan ketiganya.

Elemen Inline vs Block, Jebakan Spasi

Jebakan terbesar dalam pemformatan HTML adalah perbedaan antara elemen block-level dan inline. Elemen block (<code><div></code>, <code><p></code>, <code><section></code>, <code><article></code>, <code><ul></code>) mengalir sebagai blok bergaya paragraf; spasi di antara mereka dirender sebagai tidak ada yang terlihat, jadi formatter dapat bebas menambahkan jeda baris dan indentasi di sekitar mereka. Elemen inline (<code><span></code>, <code><a></code>, <code><strong></code>, <code><em></code>, <code><code></code>) mengalir dalam teks; <strong>spasi di antara mereka IS dirender</strong>. Pertimbangkan <code><p>Hello <strong>world</strong>!</p></code>: spasi antara "Hello" dan pembukaan <code><strong></code> adalah karakter spasi nyata yang akan muncul di antara kata-kata. Jika formatter yang naif memecah baris itu dan mengindentasi <code><strong></code> di barisnya sendiri, output yang dirender secara diam-diam mendapatkan spasi terlihat dan sekarang mungkin terbaca "Hello world" dengan spasi tambahan. Lebih buruk, formatter yang menghapus spasi antara elemen inline dapat menggabungkan kata-kata yang berdekatan: "Hello<em>world</em>" tanpa spasi. Opsi "preserve inline tags" (default aktif di sini) memberi tahu formatter untuk menjaga elemen inline di baris yang sama dengan teks sekitarnya, perilaku aman untuk sebagian besar HTML dunia nyata.

Konten yang Dilindungi, pre, textarea, script, style

Empat elemen HTML memiliki konten yang signifikan terhadap spasi yang tidak boleh diformat ulang: <pre> menampilkan teks persis seperti yang ditulis termasuk jeda baris dan spasi; <textarea> konten awal bertahan dengan spasi; <script> berisi JavaScript yang semantiknya bergantung pada spasi (atau setidaknya di mana menambahkan indentasi akan merusak sumber); <style> berisi CSS yang harus diformat ulang oleh formatter yang sadar CSS, bukan HTML. Formatter HTML produksi (Prettier, Tidy, js-beautify) mendeteksi elemen-elemen ini dan melewatkan pemformatan ulang kontennya. Pengungkapan jujur untuk alat ini: implementasi dibuat dengan tangan daripada membungkus pustaka produksi, dan penanganan inline-vs-block + konten yang dilindungi bersifat konservatif tetapi tidak sepenuhnya tahan kesalahan. Jika Anda menjalankan HTML produksi yang berat melaluinya dan output terlihat salah di dalam blok <pre> atau merusak skrip, opsi yang lebih aman adalah menggunakan Prettier secara lokal (instalasi satu perintah: npm install -g prettier, lalu prettier --parser html input.html). Untuk HTML template dan tingkat komponen biasa, alat ini menangani kasus umum.

Konvensi Atribut dan Tag Self-Closing

Atribut HTML memiliki pilihan pemformatan sendiri. Daftar atribut pendek muat dalam satu baris (<a href="/about" class="link">); daftar panjang membungkus satu per baris, sering dengan > penutup di barisnya sendiri. Default printWidth: 80 Prettier memicu pembungkusan ketika baris akan melebihi 80 karakter, yang merupakan konvensi modern. Beberapa tim menerapkan urutan atribut (class dulu, lalu id, lalu data-*, lalu ARIA, lalu event handler); sebagian besar formatter menghormati urutan atribut yang ada daripada menyusun ulang, karena penyusunan ulang dapat mengubah perilaku dalam kasus halus (kekhususan CSS, pencarian kelas JavaScript). Tag self-closing: HTML5 tidak memerlukan garis miring di akhir pada elemen void (<br>, <hr>, <img>, <input>, <meta>, <link>, ada total 14 elemen void di HTML5), tetapi XHTML dan JSX memerlukannya (<br />). Formatter akan mempertahankan garis miring jika ada, menghapusnya (HTML5 bersih), atau menambahkannya (ramah XHTML) tergantung pada konfigurasi. Alat ini mengikuti input, jika sumber Anda menggunakan <br />, output mempertahankannya; jika Anda menggunakan <br>, output mempertahankan itu.

Kasus penggunaan umum

• Tinjauan kode · bersihkan HTML sebelum dibagikan atau ditinjau dengan kolega.
• Debugging · kode yang diformat dengan baik memudahkan menemukan tag yang hilang atau penyusunan yang salah.
• Pembersihan template · format ulang HTML yang dihasilkan oleh template atau alat build.
• Serah terima antar developer · buat kode lebih mudah dibaca untuk developer lain yang bekerja di proyek yang sama.
• Pembelajaran · pahami struktur HTML lebih baik dengan mengamati pola indentasi.
• Inspeksi template email. Pembuat template email (Mailchimp, ConvertKit) sering menghasilkan HTML inline-styled yang sulit dibaca; memformatnya membuat struktur terlihat sebelum mengirimkan perubahan.

Pipeline Modern, Prettier saat Save

Untuk proyek dengan pipeline build, default 2026 adalah Prettier yang berjalan saat save di editor Anda dan di setiap commit melalui hook pre-commit. VS Code mengirimkan Prettier sebagai formatter HTML default ketika ekstensi diinstal; picu dengan Format Document (Shift+Alt+F di Windows/Linux, Shift+Option+F di macOS) atau aktifkan "editor.formatOnSave": true di pengaturan. JetBrains IDEs (WebStorm, IntelliJ) mengintegrasikan Prettier melalui Settings, Languages & Frameworks, JavaScript, Prettier. Hook pre-commit melalui Husky + lint-staged menjalankan Prettier di setiap file yang di-stage sebelum mengizinkan commit, memastikan tidak ada HTML yang tidak diformat mencapai repositori. Pemeriksaan CI menjalankan prettier --check pada pull request untuk menangkap penyimpangan pemformatan. Tidak satu pun dari ini penting untuk snippet sekali pakai yang ditempel dari tempat lain, itulah persis untuk apa alat in-browser ini. Untuk pekerjaan proyek jangka panjang, atur Prettier; alat in-browser adalah opsi tanpa friksi untuk yang lainnya.

Privasi: Mengapa Browser-Saja Penting di Sini

HTML sering berisi hal-hal yang tidak ingin Anda lihat oleh pihak ketiga: template alat admin internal, markup halaman produk yang belum dirilis, varian A/B-test dengan hipotesis eksperimen yang terungkap dalam nama kelas, template email dengan konten yang dipersonalisasi, dashboard pelanggan dengan PII di placeholder. Formatter sisi server mengunggah HTML Anda ke layanan pihak ketiga di mana ia berada di log. Alat ini berjalan sepenuhnya di browser Anda melalui JavaScript, verifikasi di tab Network DevTools saat Anda mengklik Format, atau bawa halaman offline (mode pesawat) setelah dimuat dan formatter masih bekerja. Aman untuk template produk yang belum dirilis, halaman admin internal, varian A/B-test, atau HTML apa pun yang tidak ingin Anda salin ke hard drive orang asing.

Pertanyaan umum

Apa itu perindahan HTML?

Perindahan HTML memformat ulang kode Anda untuk membuatnya lebih mudah dibaca dengan menambahkan indentasi dan jeda baris. Ini sangat memudahkan debugging dan pengeditan, tanpa mengubah cara HTML dirender di browser.

Apakah pemformatan mengubah tampilan HTML saya di browser?

Tidak. Pemformatan hanya menambahkan spasi dan indentasi. Browser mengabaikan spasi tambahan dalam HTML. HTML Anda yang diformat akan ditampilkan secara identik dengan aslinya.

Apa itu tag inline?

Tag inline (seperti <span>, <a>, <strong>) ditempatkan dalam teks tanpa membuat jeda baris. Opsi "pertahankan tag inline" mencegahnya ditempatkan pada baris terpisah dan menjaganya bersama kontennya.

2 spasi, 4 spasi, atau tab?

2 spasi adalah default web modern, digunakan oleh GitHub, Google HTML/CSS Style Guide, Prettier, contoh gaya WHATWG, dan sebagian besar paket npm. 4 spasi bertahan dalam tradisi Java / Microsoft / PHP yang lebih lama. Tab disukai oleh kernel Linux dan beberapa proyek Go. Argumennya lebih tua dari sebagian besar pembaca dan tidak dapat dimenangkan; jawaban praktisnya adalah mencocokkan apa yang sudah digunakan proyek Anda (atau konvensi yang berlaku di tim) dan membuat formatter menerapkannya. Untuk snippet sekali pakai tanpa konteks proyek, 2 spasi adalah default paling aman di 2026.

Haruskah saya menggunakan ini jika sudah menggunakan Prettier?

Mungkin tidak, integrasi Prettier editor Anda melakukan ini saat save, dengan kesadaran AST HTML penuh dan penanganan konten yang dilindungi yang dibutuhkan formatter produksi. Alat ini untuk kasus yang tidak dicakup pipeline build Anda: HTML ditempel dari inspector browser, snippet dari email atau chat, output template engine yang ingin Anda periksa, pemformatan sekali pakai di luar konteks proyek apa pun. Untuk pekerjaan proyek jangka panjang, atur Prettier secara lokal; untuk pekerjaan sekali pakai tanpa friksi, alat ini adalah bentuk yang tepat.

Apakah file HTML saya diunggah?

Tidak. Pemformatan berjalan sepenuhnya di browser Anda melalui JavaScript. HTML yang Anda tempel tidak pernah melintasi jaringan, verifikasi di tab Network DevTools saat Anda mengklik Format, atau bawa halaman offline (mode pesawat) setelah dimuat dan alat masih bekerja. Aman untuk template produk yang belum dirilis, halaman admin internal, varian A/B-test, template email dengan konten yang dipersonalisasi, atau HTML apa pun yang tidak ingin Anda salin ke hard drive orang asing.

Alat terkait