Pemformat & Perapi HTML
Format dan rapikan HTML yang berantakan atau minified — indentasi tag bertingkat sesuai kedalamannya, atribut tetap utuh, dan isi <pre>, <script>, <style> serta <textarea> dibiarkan tanpa perubahan. Berjalan sepenuhnya di browser Anda.
Input
Pengaturan
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-formatter-beautifier \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"htmlSource": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta ch…",
"indentation": " ",
"preserveNewlines": "",
"removeComments": ""
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `html-formatter-beautifier` tool (HTML Formatter & Beautifier) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/html-formatter-beautifier/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pemformat & Perapi HTML — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Tempel HTML yang minified, hasil mesin, atau yang indentasinya berantakan, lalu dapatkan kembali dalam format yang rapi — satu tingkat bersarang per baris, atribut tidak diubah, dan tag yang memang tidak boleh diformat ulang dibiarkan sepenuhnya. Berguna untuk membaca sumber halaman yang minified, membersihkan markup yang ditempel dari editor WYSIWYG, atau merapikan template sebelum Anda menyimpannya.
Cara menggunakan
- Tempel HTML Anda ke kotak input, atau unggah file
.html/.htm. - Pilih indentasi: 2 spasi, 4 spasi, atau tab.
- Opsional, aktifkan Pertahankan baris kosong yang ada (menjaga jarak yang disengaja antarbagian) atau Hapus komentar HTML (menghapus semua yang dibungkus
<!-- -->). - Salin hasilnya atau unduh sebagai
formatted.html.
Pemformatan berjalan saat Anda mengetik — tidak ada tombol yang perlu ditekan.
Cara alat memutuskan apa yang berada dalam satu baris
Tag yang seluruh isinya berupa teks, atau teks yang bercampur dengan elemen inline seperti <a>, <span>, <strong>, <em> atau <img>, tetap berada dalam satu baris — <li>Item 1</li> dan <p>Halo <strong>dunia</strong>!</p> tidak akan terpecah menjadi lima baris hanya karena ada tag bersarang di dalamnya. Tag yang berisi anak berlevel blok (<div>, <ul>, <section>, dan sejenisnya) akan dipecah: tag pembuka, setiap anak, dan tag penutup masing-masing mendapat baris sendiri, dengan indentasi satu tingkat lebih dalam dari induknya.
Elemen void — <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr> — tidak pernah mendapat tag penutup atau tingkat indentasi palsu untuk "anak" yang memang tidak bisa dimilikinya. Sintaks self-closing (<img />) dipertahankan persis seperti yang Anda tulis.
Yang tidak pernah disentuh
- Isi
<pre>,<script>,<style>dan<textarea>direproduksi byte demi byte. Spasi di dalamnya adalah bagian dari yang ditampilkan atau dijalankan — memformat ulang blok<pre>mengubah teks yang ditampilkan, dan mengindentasi ulang isi<script>bisa mengubah perilaku jika berisi template literal atau string yang sensitif terhadap indentasi. Alat ini hanya mengindentasi ulang tag pembuka dan membiarkan semua yang ada di antaranya dan tag penutup yang sesuai tetap persis seperti yang Anda tulis. - Atribut tidak pernah diurutkan ulang, ditulis ulang, atau diformat ulang. Tanda kutip dan spasi yang dipakai pada tag Anda tetap sama; hanya posisi dan indentasi tag yang berubah.
- HTML yang rusak tidak membuat formatter crash. Tag penutup yang tidak berpasangan dibuang, sehingga tidak merusak sisa keluaran, dan menempelkan potongan HTML (bukan dokumen lengkap) tetap berfungsi.
Mengapa tidak memperbaiki tag yang tidak ditutup atau memvalidasi markup saya?
Ini adalah formatter, bukan validator — alat ini mengindentasi ulang struktur yang bisa diurai dan membiarkan markup yang memang rusak sedekat mungkin dengan maksud asli Anda. Jika Anda perlu memeriksa tag yang hilang, nesting yang tidak cocok, atau atribut yang tidak valid, jalankan hasilnya melalui validator HTML setelahnya.
Apakah ini memperkecil atau menghapus sesuatu?
Tidak — indentasi ditambahkan, bukan dihapus, dan tidak ada tag, atribut, atau teks yang dihapus (komentar hanya dihapus jika Anda mengaktifkan opsi itu). Jika Anda ingin memperkecil ukuran byte halaman, gunakan Minifier HTML.
Apakah HTML saya diunggah ke suatu tempat?
Tidak. Formatter berjalan sepenuhnya di browser Anda — markup Anda tidak pernah dikirim ke server, dicatat, atau disimpan, dan mengunggah file hanya membacanya secara lokal di halaman. Alat ini juga bisa digunakan secara offline.