HTML Formatter

Apa itu Pemformatan HTML?

HTML formatter adalah alat yang melakukan pemformatan HTML (disebut juga beautifikasi atau pretty-printing): alat ini menambahkan indentasi, jeda baris, dan spasi yang konsisten ke markup HTML sehingga struktur nestingnya menjadi terlihat. Browser mengabaikan spasi saat merender HTML, sehingga dokumen yang ditulis dalam satu baris menghasilkan output yang sama dengan dokumen yang memiliki indentasi rapi. Perbedaannya sepenuhnya untuk keperluan manusia: HTML yang terformat lebih mudah dibaca, di-debug, dan dipelihara.

Spesifikasi HTML (dikelola oleh WHATWG sebagai HTML Living Standard) mendefinisikan lebih dari 110 elemen, masing-masing dengan content model tersendiri. Elemen block-level seperti <div>, <section>, dan <article> biasanya dimulai pada baris baru dan mengindentasi child-nya. Void element seperti <br>, <img>, dan <input> tidak memiliki closing tag dan tidak memiliki child untuk diindentasi. Sebuah formatter yang baik memahami perbedaan ini dan menerapkan aturan indentasi secara tepat, bukan sekadar menambahkan spasi setelah setiap tag.

Pemformatan paling dibutuhkan selama proses pengembangan. HTML yang di-minify atau dihasilkan mesin, output dari platform CMS, dan markup yang disalin dari browser DevTools sering kali hadir sebagai satu baris yang padat. Tanpa indentasi yang tepat, menemukan closing tag yang hilang atau menelusuri struktur nesting yang dalam membutuhkan waktu jauh lebih lama. HTML formatter mengubah tembok teks itu menjadi struktur pohon yang terindentasi dengan baik dan mudah dibaca dalam satu langkah.

Mengapa Menggunakan HTML Formatter Ini?

Tempel HTML apa pun dan dapatkan output yang terindentasi dengan benar secara instan. Tidak ada plugin yang perlu diinstal, tidak ada file konfigurasi yang perlu ditulis, tidak ada akun yang perlu dibuat.

Kasus Penggunaan HTML Formatter

Aturan Indentasi HTML

Cara HTML formatter memperlakukan setiap tipe elemen bergantung pada content model-nya. Tabel di bawah menunjukkan elemen-elemen umum dan cara indentasinya dengan pengaturan 2 spasi dan 4 spasi. Keduanya menghasilkan rendering yang identik di browser; perbedaannya hanya pada keterbacaan.

Formatter vs. Minifier vs. Linter

Ketiga alat ini beroperasi pada HTML tetapi memiliki tujuan yang berbeda. Pemformatan dan minifikasi adalah transformasi yang berlawanan; linting memeriksa kesalahan tanpa mengubah spasi.

Contoh Kode

Cara memformat HTML secara programatik dalam bahasa dan alat yang populer:

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

Pertanyaan yang Sering Diajukan