ตัวจัดรูปแบบ HTML
จัด HTML ให้อ่านง่ายโดยรักษาองค์ประกอบ แอตทริบิวต์ ข้อความ ความคิดเห็น และโครงสร้างเอกสาร
Make HTML structure easier to inspect
HTML แบบย่ออาจซ่อน nesting แอตทริบิวต์ ข้อความ และความคิดเห็นไว้ในบรรทัดเดียว เครื่องมือนี้แสดง markup ให้อ่านง่าย
การจัดรูปแบบเปลี่ยนการแสดงผล ไม่ได้ยืนยันว่า HTML ถูกต้อง เข้าถึงได้ ปลอดภัย หรือเข้ากับ browser เก็บ source และ diff ไว้
ใช้ตัวอย่างที่มีองค์ประกอบซ้อน แอตทริบิวต์ ข้อความ ความคิดเห็น และ entity แล้วรันการตรวจที่จำเป็น
Formatting is not HTML validation
HTML คือ tree ขององค์ประกอบ แอตทริบิวต์ ข้อความ ความคิดเห็น และ declaration การเยื้องทำให้ parent-child และ closing tag ชัด
Formatter จัด whitespace แต่ไม่รับรองมาตรฐาน accessibility security template หรือพฤติกรรมแอป
Browser อาจกู้ markup ผิดต่างกัน ตรวจ void element optional tag script style และ entity ด้วยเครื่องมือเป้าหมาย
How to format HTML
- ใส่เอกสาร HTML ครบหรือ fragment ที่รองรับ
- ตรวจ nesting tag แอตทริบิวต์ ข้อความ ความคิดเห็น script และ style
- เปรียบเทียบค่า entity ข้อความ และลำดับกับ source
- รัน HTML validator accessibility template และ browser tests
- ลบ credential และข้อมูลส่วนบุคคลจากตัวอย่าง
Formatting method
- อ่านองค์ประกอบ แอตทริบิวต์ ข้อความ
อ่านองค์ประกอบ แอตทริบิวต์ ข้อความ ความคิดเห็น declaration และส่วนที่ฝัง
- เพิ่มบรรทัดและการเยื้องให้เห็น nesting และลำดับพี่น้อง
เพิ่มบรรทัดและการเยื้องให้เห็น nesting และลำดับพี่น้อง
- รักษาค่า ข้อความ ความคิดเห็น
รักษาค่า ข้อความ ความคิดเห็น entity script และ style ตาม source
การกู้ parser optional tag whitespace ภาษาที่ฝัง และ error ที่แน่นอนต้องตรวจด้วย engine จริง
Read the formatted result
ผลสำเร็จคือ HTML ที่จัดให้อ่านง่าย ตรวจโครงสร้าง แอตทริบิวต์ ข้อความ ความคิดเห็น entity และ script กับ source
ผลล้มเหลวไม่ได้พิสูจน์ browser recovery หรือข้อความ parser เฉพาะ
ปัญหา validator accessibility หรือ build เป็นสัญญาอีกส่วน การจัดรูปแบบไม่เพิ่ม semantics หรือ security
ข้อผิดพลาดที่พบบ่อย
การมองการเยื้องเป็น validation อาจซ่อนแอตทริบิวต์ที่ขาด nesting ผิด หรือปัญหา accessibility
การเปลี่ยน entity แอตทริบิวต์ หรือข้อความที่ไวต่อ whitespace อาจเปลี่ยนพฤติกรรม
อย่าคิดว่า browser recovery เหมือน formatter
อย่าใส่ template ลับ token หรือข้อมูลผู้ใช้
ข้อจำกัดและกรณีพิเศษ
ความสามารถนี้คือการจัด HTML ไม่รับรองมาตรฐาน accessibility security compatibility template หรือ minify
optional tag void element CSS JavaScript entity และเอกสารใหญ่ต้องทดสอบด้วยเครื่องมือเป้าหมาย
อย่าใส่ markup production ลับหากนโยบายไม่อนุญาต
Examples
การจัดรูปแบบตรวจ HTML หรือไม่
การจัดรูปแบบตรวจ HTML หรือไม่
ใส่เอกสาร HTML ครบหรือ fragment ที่รองรับ
ผลสำเร็จคือ HTML ที่จัดให้อ่านง่าย ตรวจโครงสร้าง แอตทริบิวต์ ข้อความ ความคิดเห็น entity และ script กับ source
พฤติกรรมหน้าจะเปลี่ยนไหม
พฤติกรรมหน้าจะเปลี่ยนไหม
ตรวจ nesting tag แอตทริบิวต์ ข้อความ ความคิดเห็น script และ style
ผลล้มเหลวไม่ได้พิสูจน์ browser recovery หรือข้อความ parser เฉพาะ
แอตทริบิวต์ถูกเก็บไหม
แอตทริบิวต์ถูกเก็บไหม
เปรียบเทียบค่า entity ข้อความ และลำดับกับ source
ปัญหา validator accessibility หรือ build เป็นสัญญาอีกส่วน การจัดรูปแบบไม่เพิ่ม semantics หรือ security
ความคิดเห็นถูกเก็บไหม
ความคิดเห็นถูกเก็บไหม
รัน HTML validator accessibility template และ browser tests
ผลสำเร็จคือ HTML ที่จัดให้อ่านง่าย ตรวจโครงสร้าง แอตทริบิวต์ ข้อความ ความคิดเห็น entity และ script กับ source
จัด fragment ได้ไหม
จัด fragment ได้ไหม
ลบ credential และข้อมูลส่วนบุคคลจากตัวอย่าง
ผลล้มเหลวไม่ได้พิสูจน์ browser recovery หรือข้อความ parser เฉพาะ
ช่วย accessibility ไหม
ช่วย accessibility ไหม
ใส่เอกสาร HTML ครบหรือ fragment ที่รองรับ
ปัญหา validator accessibility หรือ build เป็นสัญญาอีกส่วน การจัดรูปแบบไม่เพิ่ม semantics หรือ security
Frequently asked questions
การจัดรูปแบบตรวจ HTML หรือไม่
ไม่ ใช้ HTML validator accessibility browser และ template tests
พฤติกรรมหน้าจะเปลี่ยนไหม
สำหรับ input ที่รองรับควรเปลี่ยนเฉพาะ whitespace แต่ต้องเทียบและทดสอบ
แอตทริบิวต์ถูกเก็บไหม
ตัวอย่างเก็บชื่อและค่า ตรวจ URL class id ด้วย diff
ความคิดเห็นถูกเก็บไหม
ตัวอย่างเก็บความคิดเห็น ตรวจด้วย input จริง
จัด fragment ได้ไหม
ใช้เอกสารครบหรือ fragment ที่รองรับ
ช่วย accessibility ไหม
ไม่ semantics focus contrast และ ARIA ต้องตรวจแยก
HTML ผิดถูกแก้ไหม
อย่าสันนิษฐานว่าซ่อมเอง แก้ source แล้วตรวจ
หลังจัดควรทำอะไร
ตรวจ diff รัน validator และ accessibility แล้ว render ใน browser เป้าหมาย