MoreOnlineTools
ESC

ตัวจัดรูปแบบ / ตกแต่ง HTML

จัดรูปแบบ ตกแต่ง และบีบอัดโค้ด HTML เพื่อความสามารถในการอ่านหรือใช้งานจริง

อินพุต HTML

ผลลัพธ์ที่จัดรูปแบบ

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ใดๆ

ตัวอย่างการใช้งาน

ทำความสะอาด HTML ที่ยุ่งเหยิง

นำ HTML ที่ไม่ได้จัดรูปแบบบรรทัดเดียวมาตกแต่งด้วยการย่อหน้าที่เหมาะสมเพื่อให้อ่านและแก้ไขได้ง่าย

การบีบอัดสำหรับการผลิต

บีบอัด HTML ที่จัดรูปแบบดีแล้วโดยลบช่องว่างและคอมเมนต์เพื่อลดขนาดไฟล์สำหรับการนำไปใช้งานจริง

การจัดรูปแบบเทมเพลต

จัดรูปแบบเทมเพลต HTML ที่ซับซ้อนพร้อมตารางซ้อน ฟอร์ม และคอมโพเนนต์ให้เป็นโค้ดที่สะอาดและเป็นระเบียบ

คุณสมบัติ

การย่อหน้าอัจฉริยะ

ย่อหน้าอิลิเมนต์ HTML ที่ซ้อนกันโดยอัตโมมัติด้วยขนาดการย่อหน้าที่ปรับแต่งได้

การบีบอัด HTML

ลบช่องว่าง คอมเมนต์ และตัวแบ่งบรรทัดเพื่อลดขนาดไฟล์ HTML สำหรับการผลิต

รักษาเนื้อหา

รักษาเนื้อหาภายในแท็ก pre, code, script และ style โดยไม่จัดรูปแบบใหม่

ความเป็นส่วนตัวต้องมาก่อน

การประมวลผลทั้งหมดทำงานในเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์

วิธีใช้งาน

1

ตั้งค่าการย่อหน้า

เลือกการย่อหน้าที่ต้องการ: 2 ช่องว่าง, 4 ช่องว่าง หรืออักขระแท็บ

2

วางโค้ด HTML

วางหรือพิมพ์โค้ด HTML ที่คุณต้องการจัดรูปแบบหรือบีบอัด

3

ตกแต่งหรือบีบอัด

คลิกตกแต่งสำหรับการจัดรูปแบบที่อ่านได้หรือบีบอัดสำหรับเอาต์พุตที่กะทัดรัด คัดลอกผลลัพธ์

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

Beautify (หรือเรียกอีกอย่างว่า pretty-print) คือการจัดรูปแบบ HTML code ใหม่โดยการเพิ่มการย่อหน้าที่เหมาะสม การขึ้นบรรทัดใหม่ และการเว้นวรรคที่สม่ำเสมอ แต่ละองค์ประกอบที่ซ้อนกันจะถูกย่อหน้าให้ลึกกว่าตัวหลักหนึ่งระดับ ผลลัพธ์คือโค้ดที่มนุษย์อ่านง่าย สามารถตรวจสอบ (debug) และแก้ไขได้ง่ายขึ้น เครื่องมือนี้จะมีประโยชน์อย่างยิ่งเมื่อคุณได้รับ HTML ที่ถูก minify หรือสร้างอัตโนมัติซึ่งแสดงผลเป็นบรรทัดเดียวยาวๆ ของ tags

การทำ Minification จะลบช่องว่างทั้งหมด (spaces, tabs, newlines) คอมเมนต์ และการขึ้นบรรทัดใหม่ที่ไม่จำเป็นซึ่งมีไว้เพื่อให้อ่านง่ายสำหรับมนุษย์เท่านั้น HTML ที่ได้จะทำงานเหมือนเดิมทุกประการแต่ใช้พื้นที่น้อยลง โดยปกติแล้วจะช่วยลดขนาดไฟล์ลง 10-30% สำหรับเทมเพลตที่มีการใส่คอมเมนต์อย่างดี การโหลด HTML ที่ถูก minify จะเร็วขึ้นและประหยัดแบนด์วิดท์ ทำให้กลายเป็นมาตรฐานสำหรับการนำไปใช้งานจริง (production deployments)

ไม่ เครื่องมือนี้จะเปลี่ยนเฉพาะช่องว่างและการย่อหน้าเท่านั้น — tags, attributes, ค่าของ attribute และเนื้อหาข้อความที่แสดงให้เห็นจะไม่มีการเปลี่ยนแปลง การทำ Minification จะลบเฉพาะช่องว่างที่ไม่มีผลต่อการแสดงผลและ HTML comments เท่านั้น ข้อกำหนดสำคัญประการหนึ่งคือ: เนื้อหาภายใน tags ของ pre, code, script, และ style จะถูกคงไว้ตามเดิมโดยไม่มีการจัดรูปแบบใหม่ เนื่องจากช่องว่างภายในองค์ประกอบเหล่านี้มีความสำคัญ (pre-formatted text, การย่อหน้าของโค้ด, การจัดรูปแบบ JavaScript)

นี่ขึ้นอยู่กับข้อตกลงของทีมหรือโปรเจกต์เป็นส่วนใหญ่ Two spaces: เป็นที่นิยมในโปรเจกต์ JavaScript, React และเว็บเฟรมเวิร์กสมัยใหม่ (ค่าเริ่มต้นของ ESLint/Prettier) Four spaces: เป็นมาตรฐานเดิมในคู่มือสไตล์หลายแห่ง พบได้บ่อยใน Python และเทมเพลตฝั่ง backend Tabs: นักพัฒนาบางคนแนะนำเพราะความกว้างของ tab สามารถตั้งค่าได้ตามผู้ใช้งานในทุกโปรแกรมแก้ไข (เหตุผลด้านการเข้าถึงหรือ accessibility) เลือกสิ่งใดก็ได้ที่ตรงกับสไตล์เดิมของโปรเจกต์คุณ หากคุณกำลังเริ่มต้นใหม่ 2 spaces เป็นตัวเลือกที่นิยมที่สุดในการพัฒนา front-end สมัยใหม่

เครื่องมือจัดรูปแบบจะทำงานได้ดีที่สุดกับ HTML ที่ถูกต้อง หากเป็น HTML ที่พัง (tags ไม่ปิด, องค์ประกอบไม่ตรงกัน, เครื่องหมายคำพูดที่หายไปใน attributes) อาจทำให้เกิดการย่อหน้าที่ไม่คาดคิดในผลลัพธ์ที่สวยงาม หรืออาจไม่สามารถ minify ได้อย่างสะอาดตา ให้ใช้เครื่องมือตรวจสอบ HTML เพื่อแก้ไขข้อผิดพลาดก่อนหากผลลัพธ์ที่จัดรูปแบบแล้วดูผิดปกติ Tags ที่ปิดตัวเองได้ เช่น <img />, <br />, และ <input /> จะถูกจัดการอย่างถูกต้องไม่ว่าคุณจะใช้สไตล์ XHTML หรือ HTML5 ก็ตาม

ผลลัพธ์แตกต่างกันไปอย่างมากขึ้นอยู่กับปริมาณช่องว่างและจำนวนคอมเมนต์ใน HTML เดิมของคุณ HTML ที่จัดรูปแบบมาแล้วเล็กน้อยอาจลดลง 5-15% ส่วนเทมเพลตที่มีการย่อหน้าหนักๆ (table ซ้อนกันหลายชั้น) และมีคอมเมนต์จำนวนมาก สามารถลดลงได้ถึง 25-40% สำหรับไฟล์ HTML ทั่วไป คาดหวังการลดขนาดลง 10-20% เพื่อการประหยัดสูงสุด ให้ใช้การทำ HTML minification ร่วมกับการบีบอัด Gzip ที่ฝั่งเซิร์ฟเวอร์ — การรวมกันนี้ปกติจะช่วยลดขนาดได้ถึง 70-80%

ได้ เพียงวางส่วนของ HTML ที่คุณต้องการจัดรูปแบบ เครื่องมือจัดการกับเอกสาร HTML ทั้งหมด (<html>, <head>, <body>) หรือจะเฉพาะบางส่วนก็ได้ (เช่น โครงสร้าง <div> หรือ ฟอร์ม) นอกจากนี้ยังรองรับเทมเพลต HTML พร้อมไวยากรณ์ทั่วไปจากเฟรมเวิร์กต่างๆ แม้ว่า tags เฉพาะของเทมเพลต (เช่น Jinja2 {% %} หรือบล็อก PHP <?php ?>) จะถูกปฏิบัติเป็นเนื้อหาข้อความ

ไม่ การจัดรูปแบบให้สวยงามและการทำ Minification ทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณโดยใช้ JavaScript โค้ด HTML ของคุณจะไม่ถูกอัปโหลด, ส่งต่อ หรือบันทึกที่ใดเลย คุณสามารถจัดรูปแบบโค้ดที่มี markup ภายในที่ละเอียดอ่อน, ตรรกะเทมเพลตฝั่งเซิร์ฟเวอร์ หรือโครงสร้างคอมโพเนนต์ที่เป็นกรรมสิทธิ์ได้อย่างปลอดภัย

ตัวจัดรูปแบบ/ตกแต่ง HTML คืออะไร?

เปิดดู source ของหน้าเว็บแล้วเจอ HTML ยาวเป็นบรรทัดเดียว ไม่มีการย่อหน้า ไม่มีขึ้นบรรทัดใหม่ แค่กำแพงแท็กยาวเหยียด เครื่องมือนี้จะจัดการความยุ่งเหยิงนั้นให้กลายเป็นโค้ดที่อ่านง่ายและจัดย่อหน้าอย่างเรียบร้อยในคลิกเดียว หรือจะทำกลับกันก็ได้ บีบอัด HTML ให้เหลือบรรทัดเดียวสำหรับ production เลือกรูปแบบการย่อหน้า (2 ช่องว่าง, 4 ช่องว่าง, แท็บ) แล้วเครื่องมือจัดการที่เหลือ เนื้อหาใน pre, code, script และ style จะไม่ถูกแตะต้อง

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

ดีบัก HTML ที่บีบอัดแล้วนั้นทรมานมาก ตกแต่งก่อน หาปัญหา แก้ไข แล้วค่อยบีบอัดใหม่สำหรับ deploy ทำให้ workflow เป็นระเบียบ ทุกอย่างทำงานในเบราว์เซอร์ โค้ดของคุณไม่เคยไปถึงเซิร์ฟเวอร์ ใช้ได้กับ HTML ทุกแบบ ตั้งแต่หน้าง่ายๆ ไปจนถึงเทมเพลตซับซ้อน

ความปลอดภัยและความเป็นส่วนตัว

ความปลอดภัยของข้อมูลของคุณคือความสำคัญอันดับแรกของเรา

การประมวลผลภายใน

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ

ไม่มีการถ่ายโอนข้อมูล

ข้อมูลของคุณจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา

ไม่มีการจัดเก็บข้อมูล

ไม่มีข้อมูลถูกเก็บหรือแบ่งปัน

การเข้ารหัส SSL

การเข้ารหัส SSL สำหรับการเชื่อมต่อที่ปลอดภัย

ขั้นตอนถัดไป

ตัวย่อและจัดรูปแบบ CSS/JS

ย่อและจัดรูปแบบโค้ด CSS และ JavaScript ออนไลน์

ตัวเข้ารหัสเอนทิตี HTML

เข้ารหัสและถอดรหัสเอนทิตี HTML และอักขระพิเศษ

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างเฉดสี

สร้างพาเลตสีสไตล์ Tailwind พร้อม 10 เฉดและคะแนน WCAG

ตัวสร้าง Robots.txt

สร้างไฟล์ robots.txt สำหรับเว็บไซต์ของคุณ

ตรวจสอบคอนทราสต์สี

ตรวจสอบอัตราส่วนคอนทราสต์สีและการปฏิบัติตาม WCAG 2.1 AA/AAA

ตัวสร้างนิพจน์ Cron

ตัวสร้างนิพจน์ cron แบบภาพพร้อมค่าที่ตั้งไว้

ตัวสร้าง Box Shadow

สร้าง CSS box-shadow พร้อมหลายชั้นและตัวอย่างสด

ตัวทดสอบ Regex

ทดสอบและดีบักนิพจน์ทั่วไปด้วยการจับคู่และไฮไลต์แบบเรียลไทม์

อีกมากมายใน MoreOnlineTools

เครื่องมือออนไลน์ฟรี

109 เครื่องมือสำหรับข้อความ รูปภาพ ความปลอดภัย และการพัฒนา

ดูเครื่องมือทั้งหมด →
Cheat Sheet สำหรับนักพัฒนา

อ้างอิงด่วนสำหรับ Regex, Git, รหัส HTTP, CSS, Markdown และอื่นๆ

ดู Cheat Sheet →
เครื่องคิดเลขออนไลน์

BMI, สินเชื่อ, เปอร์เซ็นต์, ทิป, อายุ และเครื่องคิดเลขอื่นๆ

ดูเครื่องคิดเลข →
คอลเลกชันเครื่องมือ

เวิร์กโฟลว์ที่คัดสรร: การพัฒนา API, ไปป์ไลน์รูปภาพ, การตรวจสอบความปลอดภัย และอื่นๆ

ดูคอลเลกชัน →