Cara menggunakannya

Tampal HTML ke dalam kotak input, buka fail .html, atau cuba contoh.
Pilih Beautify untuk markup berinden yang mudah dibaca atau Minify untuk output padat.
Semasa mencantikkan, pilih 2 ruang, 4 ruang atau tab, dan tentukan sama ada komen dikekalkan.
Salin hasil atau muat turunnya sebagai fail .html.

Cara ia berfungsi

Pemformat membaca HTML dengan tokenizer yang longgar, seperti yang dilakukan oleh pelayar, dan menulisnya semula. Ia tidak pernah memaparkan input, jadi skrip dalam kod yang ditampal tidak dapat dijalankan dan tiada apa-apa dimuatkan daripada web.

Beautify meletakkan setiap elemen aras blok (div, p, ul, li, section, table, …) pada barisnya sendiri, diinden mengikut kedalaman sarang. Teks dan elemen sebaris seperti a, b, em, span, code, img dan br kekal bersama dalam satu baris, jadi ruang antara perkataan dan pautan tidak diubah dengan cara yang mengubah halaman yang dipaparkan. Rentetan ruang dan pemisah baris dalam teks menjadi satu ruang, yang mana ia adalah cara pelayar memaparkannya.

Kandungan elemen pre, textarea, script dan style disalin tepat seperti yang ditulis, termasuk ruang putihnya dan sebarang aksara < atau >. Elemen void seperti br, img, input, meta dan link tidak pernah mendapat tag penutup. Tag penutup sendiri seperti <path /> dalam SVG sebaris dikekalkan sebagai penutup sendiri.

Minify meruntuhkan ruang putih dalam teks menjadi satu ruang, membuang ruang putih bersebelahan elemen blok, menormalkan ruang antara atribut dan, jika “Simpan komen” dimatikan, membuang komen. Komen bersyarat sentiasa dikekalkan.

Alat ini tidak membetulkan HTML yang tidak sah, menambah tag yang hilang, menyusun semula atribut atau meminify CSS dan JavaScript di dalam elemen style dan script. Elemen yang dibiarkan terbuka akan ditutup pada akhir induknya, dan tag penutup tanpa tag pembuka yang sepadan dikekalkan seperti yang ditulis.

Contoh

Membaca markup yang dijana

CMS mengeluarkan templat sebagai satu baris panjang. Beautify dengan 2 ruang memaparkan nav, item senarai dan kandungan utama sebagai pepohon berinden, manakala “Harga termasuk <strong>VAT</strong>.” kekal pada satu baris yang mudah dibaca.

Menyediakan templat e-mel

Minify e-mel HTML dengan komen dimatikan untuk mengurangkan saiznya. Blok <pre> dengan jadual harga dan <style> sebaris dikekalkan sepenuhnya seperti asal.

Menyemak struktur

Apabila </div> penutup tiada, output yang dicantikkan menunjukkan elemen-elemen berikutnya diinden satu tahap terlalu dalam, menjadikannya mudah untuk melihat di mana elemen itu sepatutnya berakhir.

Soalan Lazim

Adakah mencantikkan akan mengubah rupa halaman saya?

Dalam hampir semua kes, tidak. Ruang kosong dalam elemen blok digabungkan dan dialihkan kepada pemisah baris yang diabaikan oleh pelayar. Teks dan elemen sebaris kekal pada baris yang sama, dan pre, textarea, script serta style tidak diubah. Halaman yang bergantung pada CSS white-space: pre pada elemen biasa adalah pengecualian.

Adakah ia mengecilkan CSS dan JavaScript di dalam halaman?

Tidak. Kandungan script dan style dikekalkan sepenuhnya seperti yang ditulis supaya tidak rosak. Gunakan pemformat CSS untuk mengecilkan helaian gaya secara berasingan.

Adakah selamat untuk menampal HTML daripada sumber yang tidak diketahui?

Ya. Input dianggap semata-mata sebagai teks dan tidak pernah dimasukkan ke dalam halaman, jadi skripnya tidak dijalankan dan imej atau pautannya tidak dimuatkan.

Adakah ia mengesahkan HTML saya?

Tidak. Ia sengaja bertoleransi dan memformat markup yang rosak dan bukannya menolaknya. Tag penutup yang tidak sepadan dikekalkan, jadi inden membantu anda mengesannya, tetapi tiada senarai ralat dihasilkan.

Privasi

HTML anda diproses hanya dalam pelayar anda dan tidak pernah dipaparkan atau dimuat naik. Tiada apa-apa disimpan atau disertakan dalam analitik.