Cara menggunakan HTML formatter
- Tempel HTML Anda ke kotak input: halaman lengkap, template, atau fragmen yang disalin dari alat pengembang browser Anda.
- Klik Rapikan untuk mengindentasi markup sehingga setiap elemen bersarang berada pada barisnya sendiri.
- Klik Minify untuk menghapus komentar dan spasi yang tidak perlu agar file lebih kecil.
- Salin hasilnya kembali ke editor atau CMS Anda.
Formatter ini bekerja sepenuhnya di browser Anda. Markup Anda tidak diunggah atau disimpan, dan diperlakukan sebagai teks: tidak ada yang Anda tempel yang dijalankan.
Mengapa memformat HTML?
HTML yang dihasilkan oleh page builder, editor email, ekspor CMS, dan alat build sering kali sudah di-minify atau indentasinya berantakan. Itu tidak masalah bagi browser, tetapi membuat strukturnya sulit diikuti manusia. HTML yang dirapikan menampilkan pohon dokumen dengan jelas, sehingga Anda dapat melihat di mana setiap <div> ditutup, menemukan elemen yang salah tempat, dan meninjau perubahan dalam diff.
Minify bekerja sebaliknya. Menghapus komentar, indentasi, dan jeda baris membuat file lebih kecil, yang sedikit mengurangi ukuran transfer. Di sebagian besar situs, kompresi server (gzip atau Brotli) sudah mengecilkan HTML secara signifikan, jadi minify memberi keuntungan tambahan yang lebih kecil, tetapi tetap umum dalam build produksi.
Masalah HTML yang umum dan cara memperbaikinya
Browser bersikap toleran: algoritma parsing HTML pulih dari sebagian besar error alih-alih gagal. Itu praktis, tetapi berarti markup yang rusak sering tampil "hampir benar" dan menyebabkan bug tata letak yang membingungkan. Merapikan membuat masalah-masalah ini lebih mudah terlihat.
Elemen yang tidak ditutup. Ketika indentasi terus bergeser ke kanan dan tidak pernah kembali, kemungkinan ada elemen yang tidak ditutup:
<div class="card">
<div class="card-body">
<p>Hello
</div></div> tunggal itu menutup card-body (dan secara implisit mengakhiri paragraf), sehingga card luar tetap terbuka dan menelan semua yang mengikutinya. Tutup setiap elemen secara eksplisit:
<div class="card">
<div class="card-body">
<p>Hello</p>
</div>
</div>Elemen blok di dalam elemen inline atau di dalam <p>. <div> di dalam <p> tidak diperbolehkan: browser menutup paragraf lebih awal, dan CSS Anda berhenti cocok seperti yang diharapkan.
Tag yang bersarang salah. <b><i>text</b></i> seharusnya <b><i>text</i></b>. Elemen dalam harus ditutup sebelum elemen luar.
ID duplikat. Sebuah id harus unik dalam dokumen. Duplikat merusak getElementById, asosiasi label, dan anchor di dalam halaman.
Elemen void dan spasi
Beberapa elemen tidak pernah boleh berisi konten dan tidak memiliki tag penutup. Elemen void ini adalah:
| Elemen void |
|---|
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr |
Dalam HTML, <br> dan <br /> setara; garis miring di akhir bersifat opsional. Menulis </br> atau <img></img> adalah kesalahan.
Spasi di antara elemen inline bisa terlihat. Dua tombol inline-block yang dipisahkan jeda baris menampilkan celah kecil, sedangkan tombol yang sama dalam satu baris tidak. Formatter yang baik mempertahankan isi <pre> dan <textarea> secara persis, tetapi jika tata letak berubah sedikit setelah dirapikan atau di-minify, spasi inline biasanya penyebabnya.
Tips dan praktik terbaik
- Gunakan indentasi dua spasi; dengan empat spasi, HTML yang bersarang dalam menjadi sangat lebar.
- Simpan blok
<style>dan<script>inline yang besar di file terpisah, dan rapikan dengan CSS formatter dan JavaScript formatter. - Lakukan minify sebagai bagian dari build Anda, bukan secara manual, agar sumber yang mudah dibaca tetap ada di version control.
- Setelah deploy, periksa SEO on-page halaman dengan cek SEO dan waktu muatnya dengan tes kecepatan situs web.
Pertanyaan yang sering diajukan
Apakah merapikan mengubah tampilan halaman saya?
Biasanya tidak. Menambahkan indentasi di antara elemen blok tidak berpengaruh secara visual. Spasi di antara elemen inline dapat membuat atau menghilangkan celah kecil, jadi periksa halaman dengan tata letak inline yang rapat setelah memformat.
Apakah ini validator HTML?
Bukan. Alat ini mengindentasi ulang dan me-minify markup tetapi tidak memeriksanya terhadap spesifikasi HTML. Namun, pemformatan membuat banyak kesalahan struktur mudah dikenali dengan mata.
Apakah HTML yang di-minify lebih baik untuk SEO?
Mesin pencari membaca HTML yang di-minify maupun yang diformat sama baiknya. Minify dapat membuat halaman sedikit lebih kecil, yang sedikit membantu performa, tetapi konten, struktur, dan kecepatan jauh lebih penting daripada spasi.
Bisakah saya memformat template email HTML?
Bisa. HTML email sering mengandalkan tabel bersarang dan gaya inline, dan merapikannya membuat pengeditan jauh lebih mudah. Uji hasilnya di platform email Anda setelahnya, karena beberapa klien email peka terhadap spasi.
Diperbarui