Cara menggunakan Formatter HTML
- Tempel HTML kamu ke kotak Input HTML, seret file
.htmlke sana, atau klik Contoh. - Di mode Rapikan, pilih indentasi (2 spasi, 4 spasi, atau tab), lebar pemecahan baris, dan cara atribut ditata.
- Hasil format diperbarui saat kamu mengetik. Gunakan Salin atau Unduh untuk menyimpannya.
- Butuh kebalikannya? Pilih Minify untuk menghapus komentar dan memadatkan spasi untuk produksi.
Apa itu formatter HTML?
Formatter HTML (atau beautifier) menulis ulang markup dengan satu elemen per baris dan indentasi yang konsisten mengikuti struktur dokumen, sehingga kamu bisa melihat sekilas di mana <div> ditutup. Ini cara tercepat untuk membaca sumber hasil ekspor page builder, template email, potongan CMS, atau HTML yang sudah di-minify untuk produksi. Tool ini memakai mesin open-source js-beautify, formatter yang sama dengan fitur format HTML bawaan VS Code, dan juga merapikan CSS di dalam <style> serta JavaScript di dalam tag <script>.
Penjelasan opsi rapikan
| Opsi | Fungsinya |
|---|---|
| Indentasi | Dua spasi adalah konvensi paling umum untuk HTML; tab membuat setiap developer bisa mengatur lebar tampilannya sendiri. |
| Pemecahan baris | Memecah baris teks dan atribut yang panjang sekitar kolom yang dipilih. “Mati” membuat isi setiap elemen tetap di satu baris. |
| Atribut | “Satu per baris” menempatkan setiap atribut di barisnya sendiri jika sebuah tag punya beberapa atribut — berguna untuk tag Tailwind atau Alpine.js yang panjang dan untuk git diff yang bersih. |
| Indentasi <head> & <body> | Menjorokkan anak elemen <head> dan <body> satu level lagi, alih-alih sejajar dengan <html>. |
| Pertahankan baris kosong | Mempertahankan (paling banyak satu) baris kosong yang disengaja di antara blok, alih-alih menghapus semuanya. |
Elemen inline seperti <a>, <strong>, dan <span> tetap berada di dalam baris teksnya, dan isi <pre> serta <textarea> tidak pernah disentuh, karena mengubah spasi di sana akan mengubah tampilan yang dilihat pengguna.
Cara kerja minifier HTML yang aman
Spasi di HTML tidak selalu tidak berarti: <b>Hello</b> <i>world</i> menampilkan spasi yang terlihat di antara kedua kata. Karena itu, minifier memakai pendekatan yang konservatif:
- Menghapus komentar, kecuali komentar kondisional Internet Explorer (centang Keep comments untuk menyimpan semuanya).
- Memadatkan rangkaian spasi, tab, dan baris baru dalam teks menjadi satu spasi — persis seperti yang memang ditampilkan browser.
- Membuang spasi hanya di tempat yang tidak pernah dirender: di dalam
<head>, di sekitar<html>,<body>, baris tabel, dan wadah daftar. - Merapikan tag (
<p class = "a">menjadi<p class="a">) tanpa mengubah nilai atribut. - Membiarkan
<pre>,<textarea>, dan script template tidak tersentuh, meminify CSS inline, memadatkan JSON-LD, dan meminify JavaScript inline hanya jika lolos pemeriksaan sintaks.
Penghematan biasanya 10–25% sebelum gzip. Untuk pipeline build penuh, alat seperti html-minifier-terser bisa lebih jauh (menghapus tag atau tanda kutip opsional), tetapi dengan risiko transformasi yang lebih besar. Untuk memperkecil stylesheet, gunakan Minifier CSS; untuk script, Formatter JavaScript punya mode minify sendiri.
Masalah umum
Indentasi terlihat salah setelah sebuah tag. Biasanya ada elemen yang tidak tertutup (misalnya </div> yang hilang) — formatter akan menjorokkan semua yang ada setelahnya satu level lebih dalam, sehingga kesalahannya mudah ditemukan. Sintaks template seperti Handlebars, Liquid, Jinja, atau blok PHP dikenali dan dipertahankan, tetapi logika template yang rumit di dalam atribut tetap bisa menghasilkan pemecahan baris yang tidak biasa.
Juga dicari sebagai: beautify html, merapikan html, html prettifier, format html online, minify html, kompres html, html minifier, rapikan kode html.
Tool yang cocok dipakai bersama Formatter HTML
- CSS Formatter — Ubah stylesheet yang di-minify menjadi CSS yang mudah dibaca, dengan satu properti per baris dan blok @media yang tersarang dengan benar.
- Encoder HTML Entity — Escape < > & " supaya teks aman ditampilkan di HTML, ubah aksen dan simbol menjadi named atau numeric entity, atau decode HTML yang penuh entity menjadi teks biasa.
- HTML ke Markdown — Tempel HTML, atau salin rich text langsung dari halaman web, Google Doc, atau email, lalu dapatkan Markdown yang rapi untuk README, wiki, atau static site kamu.
- Markdown ke HTML — Tulis atau tempel Markdown dan langsung dapatkan HTML yang rapi, dengan preview langsung yang sudah dibersihkan, tabel GitHub-flavored, daftar tugas, dan blok kode berpagar.
Pertanyaan yang sering diajukan
Apakah HTML saya diunggah ke server?
Apakah merapikan HTML akan mengubah tampilan halaman?
display:inline-block; isi <pre> dan <textarea> tidak pernah diubah.Apa bedanya memformat dan memvalidasi HTML?
Apakah CSS dan JavaScript di dalam HTML juga diformat?
<style> dan <script> diformat dengan pengaturan indentasi yang sama. Tipe script JSON dan template dibiarkan apa adanya.Seberapa kecil HTML setelah di-minify?
Bisakah saya memformat template Vue, Angular, atau Svelte?
v-if, @click, atau [prop]. Komponen single-file dengan <script setup> dan TypeScript diformat sebagai HTML ditambah script.