Trình Định Dạng HTML

Định Dạng HTML là gì?

Trình định dạng HTML là công cụ thực hiện việc định dạng HTML (còn gọi là làm đẹp hoặc pretty-printing): nó thêm thụt lề, ngắt dòng và khoảng cách nhất quán vào mã HTML để cấu trúc lồng nhau trở nên rõ ràng. Trình duyệt bỏ qua khoảng trắng khi hiển thị HTML, vì vậy một tài liệu viết trên một dòng cho ra kết quả giống hệt một tài liệu có thụt lề cẩn thận. Sự khác biệt hoàn toàn dành cho con người: HTML đã định dạng dễ đọc, gỡ lỗi và bảo trì hơn.

Đặc tả HTML (được WHATWG duy trì dưới dạng HTML Living Standard) định nghĩa hơn 110 phần tử, mỗi phần tử có mô hình nội dung riêng. Các phần tử cấp khối như <div>, <section> và <article> thường bắt đầu trên một dòng mới và thụt lề các phần tử con. Các phần tử rỗng như <br>, <img> và <input> không có thẻ đóng và không có phần tử con để thụt lề. Một trình định dạng tốt hiểu những sự khác biệt này và áp dụng các quy tắc thụt lề phù hợp, thay vì mù quáng thêm khoảng trắng sau mỗi thẻ.

Định dạng quan trọng nhất trong quá trình phát triển. HTML đã được rút gọn hoặc do máy tạo ra, đầu ra từ nền tảng CMS, và mã đánh dấu được sao chép từ DevTools của trình duyệt thường xuất hiện dưới dạng một dòng dày đặc. Nếu không có thụt lề thích hợp, việc tìm thẻ đóng còn thiếu hoặc theo dõi cấu trúc lồng nhau sâu sẽ mất nhiều thời gian hơn đáng kể. Trình định dạng HTML biến bức tường văn bản đó thành cấu trúc cây được thụt lề đúng cách, dễ đọc chỉ trong một bước.

Tại sao dùng Trình Định Dạng HTML này?

Dán bất kỳ HTML nào và nhận ngay kết quả được thụt lề đúng cách. Không cần cài plugin, không cần viết file cấu hình, không cần tạo tài khoản.

Các Trường Hợp Sử Dụng Trình Định Dạng HTML

Quy Tắc Thụt Lề HTML

Cách một trình định dạng HTML xử lý từng loại phần tử phụ thuộc vào mô hình nội dung của nó. Bảng dưới đây cho thấy các phần tử phổ biến và cách chúng được thụt lề với cài đặt 2 khoảng và 4 khoảng. Cả hai đều cho kết quả hiển thị giống hệt nhau trong trình duyệt; sự khác biệt là khả năng đọc.

Trình Định Dạng so với Minifier so với Linter

Ba công cụ này đều hoạt động trên HTML nhưng phục vụ các mục đích khác nhau. Định dạng và rút gọn là các phép biến đổi ngược chiều nhau; linting kiểm tra lỗi mà không thay đổi khoảng trắng.

Ví Dụ Mã

Cách định dạng HTML theo chương trình trong các ngôn ngữ và công cụ phổ biến:

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

Câu Hỏi Thường Gặp