Formatter HTML

Rapikan HTML dengan Prettier: indentasi konsisten, satu elemen per baris, serta CSS dan JavaScript tersemat ikut diformat. Pilih 2, 4 spasi, atau tab.

Indentasi

Input HTML

Keluaran

Berjalan sepenuhnya di browser Anda. Data Anda tidak pernah diunggah.

Alat Terkait

Lihat Semua

Formatter JSON Validator JSON Formatter XML camelCase snake_case kebab-case PascalCase CONSTANT_CASE

Apa itu Formatter HTML?

Formatter HTML menulis ulang HTML dengan indentasi bersih dan konsisten memakai Prettier, formatter yang dipakai sebagian besar proyek front-end. Blok <style> dan <script> inline juga diformat sebagai CSS dan JavaScript.

Cara menggunakan Formatter HTML

Tempel HTML Anda ke kotak input atau klik Muat contoh.
Pilih Indentasi.
Klik Format (keluaran juga diperbarui saat Anda mengetik).
Salin atau unduh hasilnya.

Contoh

Masukan

<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>

Keluaran

<div>
  <p>Hi<b>x</b></p>
  <img src="a.png" alt="" />
</div>

Kapan menggunakan Formatter HTML

Pakai untuk merapikan HTML dari ekspor CMS, templat email, atau markup hasil generate sebelum diedit atau ditinjau. Ini formatter, bukan validator: untuk tag tidak tertutup atau id ganda pakai HTML Validator. Dokumen yang sangat besar mungkin butuh waktu karena Prettier berjalan di browser Anda.

Cara kerja Formatter HTML

Kode diformat dengan Prettier 3 (build standalone) dan plugin HTML, CSS, serta Babel-nya, yang dimuat sesuai kebutuhan. Prettier mem-parse markup menjadi pohon, lalu mencetaknya agar baris muat dalam 80 kolom, memberi kutip pada atribut, dan menambahkan /> pada elemen void. Elemen inline yang sensitif spasi dijaga bersama agar halaman yang dirender tidak berubah. Error sintaks dilaporkan dengan baris dan kolom Prettier.