HTML
Best Practices
Readable Indentation
บทเรียนนี้สอนผู้เริ่มต้นให้เข้าใจว่า indentation คือการจัดระยะเยื้องของโค้ดเพื่อให้เห็นลำดับการซ้อนของ element ชัดขึ้น แม้จะไม่เปลี่ยนความหมายของ HTML โดยตรงในหลายกรณี แต่มีผลมากต่อความอ่านง่าย การแก้ไข และการทำงานร่วมกับผู้อื่น
1. หัวข้อนี้คืออะไร
Indentation คือการจัดย่อหน้าและระยะเยื้องของโค้ด เพื่อให้เราเห็นลำดับการซ้อนของ element ได้ชัดว่าอะไรเป็น parent และอะไรเป็น child ใน HTML หลายกรณี การเยื้องบรรทัดไม่ได้เปลี่ยนความหมายของเอกสารโดยตรง แต่มีผลมากต่อการอ่านโค้ด เพราะช่วยให้เรามองออกทันทีว่าแท็กไหนเปิดอยู่ภายในแท็กไหน เป้าหมายของ readable indentation คือการทำให้โค้ดดูเป็นระเบียบ สม่ำเสมอ และเข้าใจได้ง่ายตั้งแต่ครั้งแรกที่เห็น
2. ทำไมหัวข้อนี้สำคัญ
- โค้ดที่เยื้องอย่างสม่ำเสมออ่านง่ายกว่าและมองโครงสร้างได้เร็วกว่า
- ช่วยให้แก้ไขโค้ดง่ายขึ้น เพราะเราหาตำแหน่งแท็กเปิดและแท็กปิดได้ชัด
- ช่วยลดความผิดพลาดเวลาโค้ดซ้อนหลายระดับ เช่น section ภายใน article หรือ ul ภายใน section
- ทำให้ตรวจจุดผิดพลาดได้ง่ายขึ้น เมื่อโค้ดไม่อัดกันอยู่บรรทัดเดียว
- เป็นเรื่องสำคัญต่อการทำงานร่วมกับคนอื่น เพราะ readable indentation ช่วยให้ทั้งทีมอ่านโค้ดชุดเดียวกันได้เข้าใจตรงกัน
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงเอกสารที่แบ่งหัวข้อ ย่อหน้า และหัวข้อย่อยชัดเจน ผู้อ่านจะไล่จากบนลงล่างได้ง่ายและรู้ทันทีว่าส่วนไหนอยู่ใต้ส่วนไหน แต่ถ้าเอกสารถูกพิมพ์ติดกันทั้งหมด แม้ข้อความจะยังครบเหมือนเดิม ผู้อ่านก็ต้องใช้เวลาแยกเองว่าอะไรเป็นหัวข้อ อะไรเป็นเนื้อหา และอะไรเป็นรายการย่อย โค้ด HTML ก็เหมือนกัน ถ้าพิมพ์ติดกันจนมองโครงสร้างไม่ออก เราจะอ่านยากและแก้ยากกว่ามาก แม้หน้าเว็บอาจยังแสดงผลได้เหมือนเดิม
4. แนวคิดหลักที่ต้องเข้าใจ
- การเยื้องควรสัมพันธ์กับระดับการซ้อนของ element ยิ่งซ้อนลึกยิ่งต้องเยื้องเพิ่ม
- แท็กเปิดและแท็กปิดควรอยู่ในระดับสายตาที่ช่วยให้เห็นคู่ของมันได้ง่าย
- Readable indentation ไม่ได้ทำให้ HTML มีความหมายใหม่ แต่ช่วยให้คนอ่านเข้าใจโครงสร้างได้ดีขึ้นมาก
- สิ่งสำคัญไม่ใช่ว่าใช้กี่ช่องหรือกี่ space เท่านั้น แต่ต้องใช้ให้สม่ำเสมอทั้งไฟล์
- โค้ดที่อ่านง่ายมักทำให้หาจุดพลาดเรื่องแท็กปิดไม่ครบหรือวาง element ผิดชั้นได้เร็วขึ้น
- ผู้เริ่มต้นควรฝึกดู parent-child relationship ควบคู่กับการเยื้อง ไม่ใช่แค่กดเว้นวรรคให้ดูสวย
5. การทำงานทีละขั้นตอน
- 1) เริ่มจากเขียนโครงสร้าง HTML ให้ครบก่อน ว่าอะไรอยู่ภายในอะไร
- 2) จัดแท็กเปิดและแท็กปิดให้เห็นระดับของแต่ละ element ชัดเจน
- 3) เมื่อมี element ซ้อนภายใน ให้เยื้องบรรทัดของ child เข้าไปอีกระดับ
- 4) ถ้ามีหลาย element ในระดับเดียวกัน เช่น li หลายตัว ให้จัดให้อยู่ระดับเยื้องเดียวกัน
- 5) ตรวจทบทวนทั้งไฟล์ว่ารูปแบบการเยื้องคงที่ ไม่สลับไปมาจนอ่านยาก
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้แสดงโค้ดชุดเดียวกันสองแบบ แบบแรกคือโค้ดที่อ่านยากเพราะไม่จัด indentation ส่วนแบบที่สองคือโค้ดที่จัด indentation อ่านง่ายและเห็นระดับการซ้อนชัดเจน
7. จุดที่ผู้เริ่มต้นมักสับสน
- พิมพ์โค้ดติดกันจนมองไม่ออกว่า element ไหนซ้อนอยู่ภายใน element ไหน
- คิดว่าแค่หน้าเว็บรันได้ก็พอ ทั้งที่โค้ดอาจอ่านยากมาก
- เยื้องบางบรรทัดแต่ไม่เยื้องทั้งไฟล์ ทำให้รูปแบบสลับไปมา
- สับสนว่าแท็กปิดควรอยู่ระดับเดียวกับแท็กเปิดของมันหรือไม่
- มอง indentation เป็นเรื่องความสวยงามอย่างเดียว ทั้งที่จริงมีผลต่อการทำงานร่วมกันและการตรวจโค้ด
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ควรใช้แนวคิดไหน |
|---|---|---|
| indentation สม่ำเสมอ vs เยื้องมั่ว | แบบสม่ำเสมอช่วยให้เห็นระดับการซ้อนชัด ส่วนแบบเยื้องมั่วทำให้ไล่แท็กเปิดปิดยาก | เลือกใช้รูปแบบการเยื้องเดียวกันทั้งไฟล์ |
| โค้ดติดกัน vs โค้ดแยกระดับชัด | โค้ดติดกันอ่านโครงสร้างยาก ส่วนโค้ดแยกระดับชัดทำให้มอง parent-child ได้เร็ว | ถ้ามี nested elements ควรเยื้องตามระดับเสมอ |
| อ่านคนเดียวชั่วคราว vs ทำงานร่วมทีมระยะยาว | โค้ดที่เราอ่านออกคนเดียวอาจยังยากสำหรับคนอื่น แต่โค้ดที่จัดดีช่วยให้ทั้งทีมเข้าใจตรงกัน | จัด indentation ให้ชัดตั้งแต่แรกเพื่อให้คนอื่นรับช่วงต่อได้ง่าย |
| แก้เฉพาะให้รันได้ vs จัดให้อ่านและตรวจสอบง่าย | แบบแรกพอใช้ได้ชั่วคราว แต่แบบหลังช่วยให้ดูแลและหาจุดผิดพลาดได้ง่ายกว่า | ถ้าต้องทำงานต่อในอนาคต ควรเลือกโค้ดที่อ่านง่ายเสมอ |
9. สรุปท้ายบทแบบจำง่าย
- Indentation คือการเยื้องโค้ดเพื่อให้เห็นลำดับการซ้อนของ element
- การเยื้องมักไม่เปลี่ยนความหมายของ HTML โดยตรง แต่เปลี่ยนความอ่านง่ายอย่างมาก
- แท็กเปิดและแท็กปิดควรจัดระดับให้สัมพันธ์กันเสมอ
- ใช้รูปแบบการเยื้องให้สม่ำเสมอทั้งไฟล์ ไม่สลับไปมา
- Readable indentation ช่วยทั้งการแก้โค้ด การหาจุดผิดพลาด และการทำงานร่วมกับคนอื่น
10. Lab สำหรับ Playground
Lab ทั้ง 3 ข้อนี้ออกแบบให้ฝึกจัด indentation ของ HTML ให้เห็นโครงสร้างชัดขึ้น โดยยังคงเนื้อหาและโครงสร้างสำคัญเดิมไว้ เพื่อให้ระบบตรวจผ่าน source text, selector และ browser runtime ได้จริง
Lab 1 (พื้นฐาน): จัด indentation ของโค้ด HTML ให้ถูกต้อง
ชื่อ Lab: จัดระดับรายการให้ชัด เป้าหมาย: ฝึกเยื้องโค้ดตามระดับการซ้อนของ element โจทย์: จัดโค้ดต่อไปนี้ให้อ่านง่าย โดยคงโครงสร้างเดิมของ `section > h2 + ul > li` เงื่อนไข: ต้องมี section 1 ตัว, ul 1 ตัว, li 2 ตัว และ source ต้องมีบรรทัดที่เป็น ` <ul>` และ ` <li>HTML พื้นฐาน</li>` สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text และ browser runtime แนวทางการคิด: มองก่อนว่า ul อยู่ภายใน section และ li อยู่ภายใน ul จึงควรเยื้องเพิ่มตามลำดับ
Lab 2 (กลาง): แก้โค้ดที่เปิดปิด tag แล้วดูยากให้เป็นระเบียบ
ชื่อ Lab: เปิดปิดแท็กให้อ่านง่าย เป้าหมาย: ฝึกแยกแท็กเปิดและแท็กปิดให้เห็นระดับชัดขึ้น โจทย์: จัดโค้ดให้เป็นระเบียบ โดยคงโครงสร้าง `section > article > header + p` และข้อความเดิมไว้ เงื่อนไข: ต้องมี section 1 ตัว, article 1 ตัว, header 1 ตัว, p 1 ตัว และ source ต้องมีบรรทัด ` <article>` กับ ` <header>` สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text และ browser runtime แนวทางการคิด: ให้แท็กเปิดและแท็กปิดอยู่ในระดับที่ทำให้เห็นขอบเขตของแต่ละบล็อกง่ายที่สุด
Lab 3 (ท้าทาย): ปรับโครงสร้าง HTML ที่อ่านยากให้ดูเข้าใจง่ายขึ้นโดยไม่เปลี่ยนเนื้อหา
ชื่อ Lab: ทำโค้ดเดิมให้อ่านง่ายขึ้น เป้าหมาย: ฝึกปรับโค้ดที่มีหลายระดับซ้อนกันให้ดูเข้าใจง่ายขึ้น โดยไม่เปลี่ยนเนื้อหา โจทย์: จัดโค้ดให้เป็นระเบียบ โดยคงข้อความเดิมและคงโครงสร้าง `section > div + article`, ภายใน article ต้องมี `header` และ `p` เงื่อนไข: ต้องมี section 1 ตัว, section > div 1 ตัว, article 1 ตัว, header 1 ตัว, p 1 ตัว และ source ต้องมีบรรทัด `<section>`, ` <div>`, ` <article>` สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text และ browser runtime แนวทางการคิด: อย่าเปลี่ยนข้อความหรือยุบ element ทิ้ง แต่จัดระดับของบรรทัดใหม่ให้มอง parent-child ออกง่ายขึ้น