HTML Biçimlendirici

HTML Biçimlendirme Nedir?

HTML biçimlendirici, HTML biçimlendirmesi (güzelleştirme veya pretty-print olarak da bilinir) gerçekleştiren bir araçtır: HTML işaretlemesine tutarlı girinti, satır sonları ve boşluklar ekleyerek iç içe geçme yapısını görünür hale getirir. Tarayıcılar, HTML oluştururken boşlukları yok sayar; bu nedenle tek satırda yazılmış bir belge ile özenle girintilenmiş bir belge aynı çıktıyı üretir. Fark tamamen insanlar içindir: biçimlendirilmiş HTML daha kolay okunur, hata ayıklanır ve bakımı yapılır.

HTML belirtimi (WHATWG tarafından HTML Living Standard olarak yönetilen) 110'dan fazla öğe tanımlar; her birinin kendine özgü bir içerik modeli vardır. <div>, <section> ve <article> gibi blok düzeyinde öğeler genellikle yeni bir satırda başlar ve alt öğelerini girintiler. <br>, <img> ve <input> gibi void öğelerin kapanış etiketi ve girintilenecek alt öğesi yoktur. İyi bir biçimlendirici bu ayrımları kavrar ve her etiketin ardına körce boşluk eklemek yerine girinti kurallarını buna göre uygular.

Biçimlendirme en çok geliştirme sürecinde önem taşır. Küçültülmüş veya makine tarafından üretilmiş HTML, CMS platformlarından gelen çıktı ve tarayıcı DevTools'undan kopyalanan işaretleme çoğunlukla tek yoğun bir satır halinde gelir. Düzgün girinti olmadan, eksik bir kapanış etiketini bulmak veya derin iç içe geçmiş bir yapıyı izlemek önemli ölçüde zaman alır. HTML biçimlendirici, bu metin yığınını tek adımda düzgün girintili, okunabilir bir ağaç yapısına dönüştürür.

Bu HTML Biçimlendiriciyi Neden Kullanmalısınız?

Herhangi bir HTML'yi yapıştırın ve anında düzgün girintili çıktı alın. Yüklenecek eklenti yok, yazılacak yapılandırma dosyası yok, oluşturulacak hesap yok.

HTML Biçimlendirici Kullanım Senaryoları

HTML Girinti Kuralları

Bir HTML biçimlendirici her öğe türünü içerik modeline göre ele alır. Aşağıdaki tablo, yaygın öğelerin 2 boşluk ve 4 boşluk ayarlarıyla nasıl girintilendiğini göstermektedir. Her ikisi de tarayıcıda özdeş oluşturma üretir; fark yalnızca okunabilirliktedir.

Biçimlendirici - Küçültücü - Linter Karşılaştırması

Bu üç araç HTML üzerinde çalışır ancak farklı amaçlara hizmet eder. Biçimlendirme ve küçültme birbirinin zıttı dönüşümlerdir; linting boşlukları değiştirmeden hataları kontrol eder.

Kod Örnekleri

Popüler dil ve araçlarda HTML'yi programatik olarak nasıl biçimlendireceğiniz:

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

Sıkça Sorulan Sorular