Best Practices

1. หัวข้อนี้คืออะไร

หัวข้อนี้คือการเรียนรู้ว่า `div` เป็น generic element ที่ใช้จัดกลุ่มเนื้อหา เมื่อเรายังไม่มี element ที่สื่อความหมายชัดเจนกว่านี้ `div` ไม่ได้ผิด และยังมีประโยชน์มากในงานจัด layout หรือครอบกลุ่มเนื้อหาเพื่อใส่ class เพิ่มเติม แต่ปัญหาจะเกิดเมื่อเราใช้ `div` ครอบทุกอย่างจน HTML ซ้อนกันหลายชั้นโดยไม่มีเหตุผล เป้าหมายของบทนี้ไม่ใช่การเลิกใช้ `div` แต่คือการใช้ `div` เท่าที่จำเป็น และรู้ว่าเมื่อไรควรเปลี่ยนไปใช้ semantic tag ที่บอกความหมายของส่วนต่าง ๆ ของหน้าเว็บได้ชัดกว่า

2. ทำไมหัวข้อนี้สำคัญ

• `div` ที่มากเกินไปทำให้โค้ดรกและอ่านลำดับโครงสร้างได้ยาก
• การซ้อน wrapper โดยไม่จำเป็นทำให้เวลาจะหา element หรือแก้ CSS ต้องไล่หลายชั้นเกินไป
• HTML ที่สั้นลงและตรงหน้าที่ช่วยให้ทั้งเราและเพื่อนร่วมทีมเข้าใจหน้าเว็บได้เร็วขึ้น
• เมื่อเลือก semantic tag ที่เหมาะสม เช่น `header`, `main`, `section`, `article`, `footer` โค้ดจะสื่อความหมายได้ดีกว่าใช้ `div` ล้วน
• ผู้เริ่มต้นมักใช้ `div` ครอบทุกอย่างเพราะรู้สึกว่าปลอดภัย บทนี้จะช่วยให้แยกได้ว่าอะไรจำเป็นและอะไรเกินจำเป็น

3. ตัวอย่างจากชีวิตจริง

ลองนึกถึงการแพ็กของใส่กล่อง ถ้าเรามีกล่องเล็กใส่กล่องกลาง แล้วเอากล่องกลางใส่กล่องใหญ่ต่อ ทั้งที่ของชิ้นเดียวกันวางในกล่องเดียวก็พอ เวลาจะหยิบของออกมาก็ต้องแกะหลายชั้นเกินจำเป็น HTML ที่มี `div` เยอะเกินไปก็คล้ายกัน เนื้อหาอาจยังแสดงผลได้ แต่คนอ่านโค้ดต้องค่อย ๆ เปิดแต่ละชั้นเพื่อดูว่าข้างในมีอะไร สุดท้ายสิ่งที่ควรอ่านง่ายอย่างหัวข้อ รายการ หรือส่วนท้าย กลับถูกซ่อนอยู่หลัง wrapper หลายชั้น ถ้าเราเหลือเฉพาะชั้นที่จำเป็น โครงสร้างจะเหมือนการจัดของเป็นหมวดพอดี หยิบง่าย มองก็เข้าใจทันที

4. แนวคิดหลักที่ต้องเข้าใจ

• `div` คือ generic element สำหรับจัดกลุ่มเนื้อหา ไม่ได้สื่อความหมายเฉพาะทางด้วยตัวเอง
• `div` ไม่ผิด แต่ไม่ควรใช้พร่ำเพรื่อ โดยเฉพาะกรณีที่มี semantic tag ชัดเจนกว่า
• ถ้าตัด wrapper ออกแล้วโครงสร้างยังทำงานและยังเข้าใจได้เหมือนเดิม แปลว่า wrapper นั้นอาจไม่จำเป็น
• การลดจำนวน wrapper ช่วยให้ HTML สั้นลง อ่านง่ายขึ้น และมองเห็นโครงของหน้าได้เร็วกว่าเดิม
• ถ้าส่วนของหน้าเป็นหัวเรื่อง เนื้อหาหลัก กลุ่มหัวข้อ หรือส่วนท้าย ควรพิจารณา `header`, `main`, `section`, `article`, `footer` ก่อนใช้ `div`
• ควรเก็บ `div` ไว้ใช้เมื่อยังไม่มี element ที่สื่อความหมายดีกว่านี้ หรือเมื่อเราต้องการ wrapper สำหรับ layout จริง ๆ

5. การทำงานทีละขั้นตอน

• 1) อ่านโครงสร้างเดิมก่อน แล้วหาว่า `div` แต่ละชั้นมีหน้าที่จริงหรือแค่ครอบไว้เฉย ๆ
• 2) ลองมองจากเนื้อหาข้างใน ถ้าเป็นส่วนหัว เนื้อหาหลัก หรือบทความย่อย ให้พิจารณา semantic tag ก่อน
• 3) ลบ wrapper ที่ไม่ได้เพิ่มความหมายหรือไม่ได้ช่วย layout ออกทีละชั้น
• 4) หลังลบแล้ว ตรวจว่าข้อความสำคัญและลำดับเนื้อหายังเหมือนเดิม
• 5) ทบทวนอีกครั้งว่าหน้าเหลือเพียงโครงสร้างที่จำเป็น และอ่านจากบนลงล่างได้เข้าใจทันที

6. ตัวอย่างเชิงเทคนิค / โค้ด

ตัวอย่างนี้วางโครงสร้างสองแบบคู่กัน แบบแรกคือโครงสร้างที่ใช้ div เยอะเกินไป ส่วนแบบที่สองคือโครงสร้างที่กระชับและสื่อความหมายกว่า โดยลด wrapper ที่ไม่จำเป็นและเปลี่ยนบางจุดไปใช้ semantic tag

7. จุดที่ผู้เริ่มต้นมักสับสน

• คิดว่า `div` คือคำตอบกลางสำหรับทุกอย่าง จึงเผลอครอบทุกส่วนของหน้าโดยอัตโนมัติ
• เข้าใจผิดว่าถ้า wrapper เยอะจะปลอดภัยกว่า ทั้งที่หลายชั้นไม่ได้ช่วยอะไรเพิ่ม
• กลัวใช้ semantic tag เพราะรู้สึกว่า `div` คุ้นมือกว่า
• ลบ `div` แล้วกังวลว่าโครงสร้างจะพัง ทั้งที่หลายครั้งลบออกแล้ว HTML กลับชัดขึ้น
• สับสนระหว่าง `div` ที่จำเป็นต่อ layout กับ `div` ที่มีไว้เพราะติดนิสัยจากการเขียนแบบครอบทุกอย่าง

8. เปรียบเทียบกับสิ่งที่ใกล้เคียง

9. สรุปท้ายบทแบบจำง่าย

• `div` มีประโยชน์ แต่ไม่ควรใช้พร่ำเพรื่อ
• ใช้ `div` เมื่อไม่มี element ที่สื่อความหมายชัดเจนกว่านี้ หรือเมื่อจำเป็นต่อ layout จริง ๆ
• ถ้าเห็น `div` ซ้อนหลายชั้น ให้ถามว่าทุกชั้นจำเป็นหรือไม่
• การลด wrapper ทำให้ HTML สั้นลง อ่านง่ายขึ้น และดูแลง่ายขึ้น
• ถ้าส่วนของหน้าเว็บมีบทบาทชัด ให้พิจารณา semantic tag ก่อน `div`

10. Lab สำหรับ Playground

Lab ทั้ง 3 ข้อนี้ออกแบบให้ฝึกตัด `div` ที่ไม่จำเป็นออกทีละระดับ โดยกำหนดโครงสร้างเป้าหมายชัดเจน เพื่อให้ระบบตรวจด้วย selector count, selector exists, source text และ browser runtime ได้จริง