فرمت‌کننده HTML

فرمت‌دهی HTML چیست؟

فرمت‌کننده HTML ابزاری است که عمل فرمت‌دهی HTML (که به آن زیباسازی یا چاپ زیبا نیز می‌گویند) را انجام می‌دهد: تورفتگی یکدست، شکست خط و فاصله‌گذاری به نشانه‌گذاری HTML اضافه می‌کند تا ساختار تودرتوی آن نمایان شود. مرورگرها هنگام رندر HTML فضای خالی را نادیده می‌گیرند، بنابراین سندی که در یک خط نوشته شده همان خروجی سندی با تورفتگی دقیق را تولید می‌کند. این تفاوت فقط برای انسان‌هاست: خواندن، رفع اشکال و نگهداری HTML فرمت‌شده آسان‌تر است.

مشخصات HTML (که توسط WHATWG به عنوان HTML Living Standard نگهداری می‌شود) بیش از ۱۱۰ عنصر تعریف می‌کند که هرکدام مدل محتوای خاص خود را دارند. عناصر سطح بلوک مانند <div>، <section> و <article> معمولاً در یک خط جدید شروع می‌شوند و فرزندانشان را تورفته می‌کنند. عناصر خالی مانند <br>، <img> و <input> تگ بستن و فرزندی برای تورفتگی ندارند. یک فرمت‌کننده خوب این تمایزات را درک می‌کند و قوانین تورفتگی را بر اساس آن اعمال می‌کند، نه اینکه کورکورانه بعد از هر تگ فضای خالی اضافه کند.

فرمت‌دهی بیشترین اهمیت را در طول توسعه دارد. HTML فشرده یا ماشین‌ساخته، خروجی پلتفرم‌های CMS، و نشانه‌گذاری کپی‌شده از DevTools مرورگر اغلب به صورت یک خط متراکم می‌رسند. بدون تورفتگی مناسب، پیدا کردن یک تگ بستن گمشده یا ردیابی یک ساختار با تودرتویی عمیق خیلی بیشتر طول می‌کشد. یک فرمت‌کننده HTML آن دیوار متن را در یک مرحله به یک درخت با تورفتگی مناسب و خوانا تبدیل می‌کند.

چرا از این فرمت‌کننده HTML استفاده کنیم؟

هر HTML را الصاق کنید و فوراً خروجی با تورفتگی مناسب دریافت کنید. بدون نصب افزونه، بدون نوشتن فایل‌های پیکربندی، بدون ایجاد حساب کاربری.

موارد استفاده از فرمت‌کننده HTML

قوانین تورفتگی HTML

نحوه رفتار یک فرمت‌کننده HTML با هر نوع عنصر به مدل محتوای آن بستگی دارد. جدول زیر عناصر رایج و نحوه تورفتگی آن‌ها با تنظیمات ۲ فاصله و ۴ فاصله را نشان می‌دهد. هر دو رندر یکسانی در مرورگر تولید می‌کنند؛ تفاوت در خوانایی است.

فرمت‌کننده در مقابل Minifier در مقابل Linter

این سه ابزار روی HTML کار می‌کنند اما اهداف متفاوتی دارند. فرمت‌دهی و فشرده‌سازی تبدیل‌های متضاد هستند؛ linting بدون تغییر فضای خالی، خطاها را بررسی می‌کند.

نمونه‌های کد

نحوه فرمت‌دهی HTML به‌صورت برنامه‌نویسی در زبان‌ها و ابزارهای محبوب:

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

سوالات متداول