HTML Beautifier

HTML Beautifier จะจัดรูปแบบมาร์กอัปที่ถูกย่อ บีบอัด หรือมีการเยื้องที่ไม่เรียบร้อยใหม่ให้เป็น HTML ที่สะอาดและอ่านง่าย — การเยื้องที่ถูกต้องตามการซ้อนของแท็ก หนึ่งองค์ประกอบต่อหนึ่งบรรทัด และการล้างความคิดเห็น/บรรทัดว่างแบบเลือกได้ — เพื่อให้คุณสามารถอ่านและดีบักโครงสร้าง DOM ได้จริง วาง HTML ที่ถูกย่อ ไฟล์ที่ส่งออกจาก CMS หรือมาร์กอัปที่ยุ่งเหยิงจากที่ใดก็ได้ แล้วรับผลลัพธ์ที่จัดรูปแบบแล้วทันที

• •การเยื้อง: 2 ช่องว่าง, 4 ช่องว่าง หรือแท็บ — นำมาใช้ใหม่โดยอัตโนมัติตามความลึกของการซ้อนแท็ก
• •การจัดรูปแบบแท็กใหม่โดยอัตโนมัติ: แต่ละองค์ประกอบจะถูกวางไว้ในบรรทัดของตัวเองและเยื้องเพื่อสะท้อนโครงสร้างแม่-ลูก
• •การรับรู้องค์ประกอบแบบ void/ปิดตัวเอง: แท็กอย่าง <img>, <br>, <input> และ <meta> จะถูกจดจำและจะไม่ถูกกำหนดระดับการเยื้องที่ผิดพลาด
• •การลบความคิดเห็น (เลือกได้): ลบความคิดเห็น <!-- --> ขณะจัดรูปแบบใหม่ หรือเก็บไว้
• •การลบบรรทัดว่าง (เลือกได้): ยุบบรรทัดว่างที่เหลือจากเอนจิ้นเทมเพลตหรือมาร์กอัปที่สร้างขึ้น
• •การตรวจสอบโครงสร้างแบบเรียลไทม์: ตั้งค่าสถานะแท็กที่ไม่ได้ปิด แท็กปิดที่ไม่ตรงกัน และแท็กปิดที่ไม่คาดคิด พร้อมหมายเลขบรรทัด

• •ดีบักหน้าโปรดักชันที่ถูกย่อหรือมาร์กอัปที่ส่งออกจาก CMS โดยจัดรูปแบบใหม่เพื่อดูโครงสร้าง DOM ที่แท้จริง
• •ตรวจสอบ HTML ที่สร้างโดยเอนจิ้นเทมเพลต (Handlebars, EJS, Pug) หรือเฟรมเวิร์กที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ก่อนคอมมิต
• •ทำให้ HTML บรรทัดเดียวหรือที่ถูกทำให้สับสนจากหน้าที่ถูกดึงข้อมูลหรือเทมเพลตอีเมลอ่านง่ายขึ้น
• •ทำให้การเยื้องเป็นมาตรฐานทั่วทั้งโค้ดเบสหรือก่อนการรีวิวโค้ด
• •ติดตามข้อบกพร่องของเลย์เอาต์โดยดูอย่างชัดเจนว่าองค์ประกอบซ้อนกันอย่างไร

1. 1.วาง HTML ของคุณลงในตัวแก้ไขข้อมูลนำเข้า หรืออัปโหลดไฟล์ .html/.htm
2. 2.เลือกรูปแบบการเยื้อง (2 ช่องว่าง, 4 ช่องว่าง หรือแท็บ)
3. 3.เปิดการลบความคิดเห็นและการลบบรรทัดว่างตามต้องการ
4. 4.ผลลัพธ์ที่จัดรูปแบบแล้วพร้อมโครงสร้างการซ้อนที่ถูกต้องจะปรากฏโดยอัตโนมัติขณะที่คุณพิมพ์
5. 5.คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์ .html

• •องค์ประกอบ void (br, hr, img, input, meta, link, area, base, col, embed, param, source, track, wbr) จะถูกยกเว้นจากการเพิ่มการเยื้อง ดังนั้นจะไม่ทำให้แท็กที่ตามมาถูกซ้อนอย่างผิดพลาด
• •เนื้อหาภายในบล็อก <script> และ <style> จะถูกจัดรูปแบบใหม่เป็นข้อความธรรมดาควบคู่กับมาร์กอัปโดยรอบ แทนที่จะถูกแยกวิเคราะห์ใหม่เป็น JS/CSS — เนื้อหาสคริปต์อินไลน์ที่ผิดปกติซึ่งมีสตริงคล้ายแท็กอาจส่งผลต่อขั้นตอนการแบ่งบรรทัดเป็นครั้งคราว
• •ตัวตรวจสอบนี้เป็นตัวตรวจสอบสแต็กแท็กแบบเบา ไม่ใช่ตัวแยกวิเคราะห์ HTML5 ที่สมบูรณ์ — จะตรวจจับแท็กที่ไม่ได้ปิด ไม่ตรงกัน และไม่คาดคิด แต่ไม่ใช่ทุกข้อผิดพลาดของมาร์กอัประดับข้อกำหนด

• •นี่คือเครื่องมือจัดรูปแบบ ไม่ใช่ตัวตรวจสอบโค้ด HTML หรือตัวตรวจสอบการช่วยการเข้าถึง — จะไม่ตรวจจับแอตทริบิวต์ alt ที่ขาดหายไป การใช้ ARIA ที่ไม่ถูกต้อง หรือปัญหาเชิงความหมายอื่น ๆ
• •ไฟล์ HTML ขนาดใหญ่มาก (ไฟล์ที่ส่งออกหลาย MB) อาจจัดรูปแบบใหม่ทั้งหมดในเบราว์เซอร์ได้ช้า
• •สำหรับการบังคับใช้รูปแบบ HTML ที่สอดคล้องกันทั่วทั้งทีมหรือที่เก็บโค้ด เครื่องมือจัดรูปแบบเฉพาะทางที่รวมเข้ากับเอดิเตอร์/CI ของคุณ (เช่น Prettier) เหมาะสมกว่าการจัดรูปแบบผ่านเบราว์เซอร์แบบเฉพาะกิจ

หากคุณมี HTML ที่อ่านง่ายและต้องการย่อขนาดสำหรับโปรดักชัน — ลดน้ำหนักของหน้าเว็บและปรับปรุงเวลาโหลด — ให้ใช้ HTML Minifier แทน มันจะลบความคิดเห็นและช่องว่าง ย่อ CSS/JS แบบอินไลน์ และแสดงเปอร์เซ็นต์การลดขนาดที่แน่นอน