Formatter HTML
Rapikan HTML berantakan, atau minify untuk production.
Jalan di browser kamu. Apa pun yang kamu ketik tidak dikirim ke mana pun.
- Indent 2 atau 4 spasi
- Minify satu klik
- Tidak ada yang diupload
Cara memformat HTML
- Tempel HTML kamu.
- Pilih ukuran indent, atau aktifkan minify.
- Salin atau unduh hasilnya.
Rapikan vs minify
| Rapikan | Minify | |
|---|---|---|
| Indentasi | Menambah 2, 4, atau 8 spasi | Menghapusnya |
| Komentar | Dipertahankan | Dihapus |
| Whitespace antar tag | Dinormalkan | Dihapus |
| Konten di pre, textarea, script, style | Tidak disentuh | Tidak disentuh |
Kapan HTML yang di-minify penting
- Halaman production dimuat sedikit lebih cepat dan memakai lebih sedikit bandwidth setelah whitespace dan komentar hilang.
- Markup yang di-minify lebih sulit dibaca di view-source, yang jadi trade-off wajar di production tapi merugikan saat debugging.
Tips memformat HTML
- Simpan salinan yang mudah dibaca dan terindentasi di source control, dan minify hanya yang kamu deploy, karena debugging markup ter-minify dengan mata itu lambat.
- Indent 2 spasi cocok untuk markup yang sangat bersarang, dan 4 spasi lebih mudah dipindai di halaman sederhana yang tidak dalam.
Apa yang dipengaruhi dan tidak dipengaruhi indentasi
- Ini tidak pernah mengubah apa yang dirender browser, karena whitespace di antara tag block-level tetap kolaps apa pun kondisinya.
- Ini bisa terlihat menggeser spasi antar elemen inline seperti <span>, kalau desainnya bergantung pada whitespace persis di situ. Cek bagian itu setelah memformat.
- Ini tidak berpengaruh ke perilaku JavaScript, karena struktur DOM halamannya tetap sama.
FAQ Formatter HTML
Apa fungsi minify di sini?
Ini menghapus komentar dan whitespace di antara tag, tanpa menyentuh teks atau atribut di dalam tag pre, textarea, script, dan style.
Apakah pemformatan mengubah tampilan halamanku?
Tidak. Indentasi dan spasi di antara tag tidak memengaruhi rendering, jadi halamannya terlihat sama sebelum dan sesudahnya.
Apakah ini memperbaiki tag yang rusak atau belum ditutup?
Tidak. Ini hanya memformat ulang HTML yang kamu berikan. Perbaiki dulu tag yang hilang atau tidak cocok di editor kamu.
Bisakah aku memformat dokumen HTML yang lengkap?
Bisa, termasuk doctype, head, dan body. Dokumen yang sangat panjang mungkin butuh waktu sebentar untuk diformat.
Apakah ini memvalidasi HTML-ku?
Tidak. Ini hanya memformat ulang atau minify markup apa pun yang kamu berikan, dan tidak mengecek alt text yang hilang, tag yang belum ditutup, atau masalah validasi lainnya.
Apakah tag style dan script inline juga diformat ulang?
Ya, saat merapikan. Formatter ini mengindentasi CSS di dalam tag style dan JavaScript di dalam tag script bersamaan dengan markup di sekitarnya.
Apakah minify menghapus komentar yang dipakai sistem templating?
Komentar HTML standar (<!-- ... -->) selalu dihapus, termasuk yang mungkin dipakai sistem templating sebagai penanda. Kalau komentarmu punya arti penting di tempat lain, format saja dan lewati minify.
Bisakah aku memformat cuma sebagian fragmen, tanpa dokumen lengkap?
Bisa. Potongan beberapa tag diformat dengan cara yang sama seperti halaman penuh. Tidak perlu doctype, head, atau body supaya ini jalan.