ตัวจัดรูปแบบ HTML

การจัดรูปแบบ HTML คืออะไร?

ตัวจัดรูปแบบ HTML คือเครื่องมือที่ทำการจัดรูปแบบ HTML (เรียกอีกอย่างว่า beautification หรือ pretty-printing): เพิ่มการย่อหน้า การขึ้นบรรทัดใหม่ และการเว้นวรรคที่สม่ำเสมอให้กับ HTML markup เพื่อให้โครงสร้างการซ้อนมองเห็นได้ชัดเจน เบราว์เซอร์ไม่สนใจ whitespace เมื่อแสดงผล HTML ดังนั้นเอกสารที่เขียนในบรรทัดเดียวจะให้ผลลัพธ์เดียวกับเอกสารที่มีการย่อหน้าอย่างระมัดระวัง ความแตกต่างอยู่ที่มนุษย์ทั้งหมด: HTML ที่จัดรูปแบบแล้วอ่านง่ายกว่า แก้ไขข้อผิดพลาดได้ง่ายกว่า และดูแลรักษาได้ง่ายกว่า

HTML specification (ดูแลโดย WHATWG ในชื่อ HTML Living Standard) กำหนดองค์ประกอบมากกว่า 110 ประเภท แต่ละประเภทมี content model ของตัวเอง องค์ประกอบระดับบล็อก เช่น <div>, <section> และ <article> มักขึ้นบรรทัดใหม่และย่อหน้าสำหรับเนื้อหาย่อย Void element เช่น <br>, <img> และ <input> ไม่มีแท็กปิดและไม่มีเนื้อหาย่อยที่ต้องย่อหน้า ตัวจัดรูปแบบที่ดีเข้าใจความแตกต่างเหล่านี้และใช้กฎการย่อหน้าตามนั้น แทนที่จะเพิ่ม whitespace หลังทุกแท็กอย่างไม่เลือก

การจัดรูปแบบมีความสำคัญมากที่สุดในระหว่างการพัฒนา HTML ที่ถูก minify หรือสร้างโดยเครื่อง ผลลัพธ์จากแพลตฟอร์ม CMS และ markup ที่คัดลอกจาก browser DevTools มักมาในรูปแบบบรรทัดเดียวที่หนาแน่น หากไม่มีการย่อหน้าที่เหมาะสม การค้นหาแท็กปิดที่หายไปหรือติดตามโครงสร้างที่ซ้อนลึกจะใช้เวลานานกว่ามาก ตัวจัดรูปแบบ HTML แปลงกำแพงข้อความนั้นให้กลายเป็นโครงสร้างแบบต้นไม้ที่ย่อหน้าอย่างเหมาะสมและอ่านได้ในขั้นตอนเดียว

ทำไมต้องใช้ตัวจัดรูปแบบ HTML นี้?

วาง HTML ใดก็ได้แล้วรับผลลัพธ์ที่ย่อหน้าอย่างถูกต้องทันที ไม่ต้องติดตั้ง plugin ไม่ต้องเขียนไฟล์ config ไม่ต้องสร้างบัญชี

กรณีการใช้งานของตัวจัดรูปแบบ HTML

กฎการย่อหน้า HTML

วิธีที่ตัวจัดรูปแบบ HTML จัดการกับองค์ประกอบแต่ละประเภทขึ้นอยู่กับ content model ของมัน ตารางด้านล่างแสดงองค์ประกอบทั่วไปและวิธีที่ถูกย่อหน้าด้วยการตั้งค่า 2 ช่องว่างและ 4 ช่องว่าง ทั้งสองให้ผลลัพธ์การแสดงผลเหมือนกันในเบราว์เซอร์ ความแตกต่างคือความอ่านง่าย

ตัวจัดรูปแบบ vs. Minifier vs. Linter

เครื่องมือทั้งสามทำงานกับ HTML แต่มีวัตถุประสงค์ต่างกัน การจัดรูปแบบและการ minify เป็นการแปลงที่ตรงข้ามกัน ส่วน linting ตรวจสอบข้อผิดพลาดโดยไม่เปลี่ยน whitespace

ตัวอย่างโค้ด

วิธีจัดรูปแบบ 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

คำถามที่พบบ่อย