Pemformatan kode / MULTIVERTO

Format HTML

Tata tag HTML yang bersarang dengan indentasi agar strukturnya mudah diperiksa.

Konverter interaktifMasukan Anda tetap di peramban ini. Teks tidak diunggah untuk dikonversi.

HTML — Input

HTML — Hasil

Buka berkas lokalBerkas tetap berada di peramban Anda.

Rangkai alat

Terapkan setiap alat teks pada hasil sebelumnya. Alur kerja teks ↗

Pilih alat berikutnya

Nama rangkaian

Rangkaian tersimpan

Hanya nama rangkaian dan urutan alat yang disimpan di peramban ini. Masukan dan hasil Anda tidak pernah disimpan.

01 / Contoh

Contoh

Masukan Anda<main><h1>Halo</h1><p>Selamat datang</p></main>

Hasil

<main>
  <h1>Halo</h1>
  <p>Selamat datang</p>
</main>

02 / Panduan

Format HTML — Cara kerja

Apa yang berubah dalam alat ini

Letakan tag HTML yang bersarang secara eksplisit untuk inspeksi yang lebih mudah. Indentasi dan pembagian baris mengungkapkan struktur sementara mempertahankan token input yang didukung. Peformat ini memaparkan tag bersarang secara eksplisit sebagai pohon. Hal ini dapat menempatkan elemen saudara pada baris terpisah sementara mempertahankan teks di dalam mereka. Gunakan untuk memeriksa komponen atau fragmen surat elektronik; dokumen penuh dengan tag penutupan pilihan memerlukan pembacaan tingkat peramban.

Tahu formatnya

HTML memiliki elemen, atribut dan node teks, dan ruang kosong dalam teks dapat mempengaruhi rendering. Formattor lokal menerima tag bersarang secara eksplisit dan mempertahankan teks di antara mereka. Ia menolak kontener teks mentah seperti skrip, gaya, pre dan textarea, di mana pemindai tag umum dapat menyesatkan.

Alur kerja yang andal

Pemformatan paling berguna selama tinjauan atau debugging, ketika indentasi dapat mengungkapkan tingkat bersarang yang hilang atau saudara yang tidak terduga. Tempel fragmen yang lengkap dan mewakili dan jalankan formater sekali. Baca keluaran dari struktur paling luar ke dalam, memperhatikan di mana setiap elemen, blok atau klausa dimulai dan berakhir. Halaman ini sengaja menghindari berpura-pura menjadi kompiler untuk setiap ekstensi bahasa yang mungkin. Dalam contoh ini, “<main><h1>Halo</h1><p>Selamat datang</p></main>” menghasilkan pratinjau ringkas “<main> ⏎ <h1>Halo</h1> ⏎ <p>Selamat datang</p> ⏎ </main>” (⏎ menandai baris baru). Baca tanda baca serta kata-kata yang terlihat: sampel kecil itu adalah hasil yang dapat diamati dari operasi tertentu ini. Ubah satu fitur yang Anda pedulikan di sumber dan bandingkan tempat yang sama di hasil. Gunakan kartu pendek dengan elemen kuat bersarang dan paragraf tetangga. Setelah berformat, identifikasikan orang tua dari setiap tag penutup sebelum render. Jika sebuah peramban secara diam-diam memperbaiki masukan yang tidak sesuai, DOMnya mungkin berbeda dari sumber yang ditampilkan di sini; alat ini mengharapkan markup yang eksplisit dan seimbang.

Periksa hasil

Tempel komponen dengan tag pembukaan dan penutupan eksplisit ketika nesting sulit dilihat. Periksa posisi induk dan saudara yang dihasilkan, lalu render komponen untuk memeriksa jarak teks. Tag penutupan pilihan dan skrip atau tubuh gaya membutuhkan parser HTML penuh; formater ini tidak sengaja menebak bagaimana peramban memperbaiki markup yang tidak lengkap. Simpan asli di samping keluaran dan uji contoh kecil yang diketahui sebelum mengendalikan dokumen besar. Bandingkan konten yang berarti, bukan hanya ukuran file atau jumlah baris. Periksa nama, string kutipan, karakter non-ASCII, akhir baris dan semua bidang berulang setelah transformasi.

Cara konversi mengubah masukan

HTML — Input

Baca dan transformasi struktur

HTML — Hasil