Format dan rapikan HTML

Q: Bagaimana dengan JavaScript dan CSS di dalam halaman?

Secara default, isi dan diformat dengan indentasi yang sama. Hapus centang Format script dan style inline untuk membiarkannya persis seperti tertulis.

Tempel HTML yang berantakan atau hasil minify dan dapatkan kembali dengan indentasi rapi, termasuk script dan style inline.

Berjalan sepenuhnya di browser Anda

HTML

Indentasi

2 spasi 4 spasi Tab

Potong baris panjang

Konten Format script dan style inline Pertahankan baris kosong (maksimal satu)

Input hingga sekitar 10 MB. Alat ini mengatur ulang indentasi markup dan tidak pernah menolaknya, jadi tidak memberi tahu apakah HTML-nya tidak valid.

Cara memformat HTML

Tempel HTML Anda ke kotak, atau tekan Sisipkan contoh.
Pilih indentasi, panjang pemotongan baris jika diperlukan, dan apakah <script> dan <style> inline ikut diformat.
Versi yang rapi muncul di bawah saat Anda mengetik. Salin atau unduh sebagai file .html.

Mengindentasi HTML dengan aman

Browser meringkas sebagian besar spasi kosong di HTML, jadi sebuah halaman bisa ditulis dalam satu baris atau seribu baris dan tetap tampil sama. Template, output CMS, dan bundle hasil minify sering menghasilkan markup yang tidak bisa dibaca siapa pun. Alat format dan rapikan HTML ini menaruh elemen blok di barisnya sendiri dan mengindentasi elemen anak di bawah induknya, sehingga tag yang tidak cocok atau salah tempat mudah terlihat.

Detailnya adalah tempat pemformat sering keliru. Void element seperti <br>, <img> dan <input> tidak pernah punya tag penutup, jadi tidak boleh menambah indentasi. Spasi kosong di dalam <pre> dan <textarea> ditampilkan seperti diketik, jadi tidak boleh disentuh. Dan elemen inline berbagi baris dengan kata-kata di sekitarnya, karena jeda baris di sana akan menambah spasi yang terlihat.

Script dan stylesheet yang tertanam di halaman adalah bahasa tersendiri. Pemformat bisa menatanya dengan indentasi halaman, atau membiarkannya apa adanya jika Anda ingin diff tetap kecil atau kodenya memang sengaja di-minify.

Tips

Ingin memperkecil stylesheet? Minify dan rapikan CSS bekerja pada CSS tersendiri.
Mengonversi potongan kode ke Markdown untuk README? Gunakan HTML ke Markdown.
Meninjau perubahan template? Format versi lama dan baru, lalu bandingkan dengan Bandingkan teks.

Pertanyaan umum

Apakah HTML saya diunggah?

Tidak. Pustaka pemformat dimuat dari situs ini saat pertama kali Anda menempel sesuatu, dan markup diproses hanya di browser Anda.

Apakah tampilan halaman berubah?

Alat ini mengubah spasi kosong di antara tag, yang sebagian besar diringkas oleh browser, jadi halaman seharusnya tampak sama. Pengecualiannya adalah spasi kosong yang terlihat: karena itu, teks di dalam <pre> dan <textarea> dibiarkan persis seperti diketik.

Apakah alat ini memberi tahu jika HTML saya rusak?

Tidak. Alat ini memformat secara longgar dan tidak menolak apa pun, jadi tag yang tidak ditutup tidak memunculkan error; indentasinya hanya mengikuti apa yang ditemukan. Untuk menemukan kesalahan struktur, periksa halaman dengan validator.

Bagaimana dengan JavaScript dan CSS di dalam halaman?

Secara default, isi <script> dan <style> diformat dengan indentasi yang sama. Hapus centang Format script dan style inline untuk membiarkannya persis seperti tertulis.

Bagaimana tag inline seperti span dan a ditangani?

Elemen inline tetap di baris yang sama dengan teksnya jika muat, sehingga kalimat yang berisi <strong> tidak dipecah menjadi beberapa baris, yang akan menambah spasi yang terlihat.

Apa fungsi potong baris panjang?

Jika panjang pemotongan diatur, teks yang melewati batas dipindah ke baris baru di batas kata. Mati membiarkan setiap deretan teks di satu baris, sepanjang apa pun.