HTML
Semantic HTML
section ใน Semantic HTML
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า `section` ใช้แบ่งเนื้อหาเป็นส่วนที่มีหัวข้อหรือจุดประสงค์ชัดเจน ไม่ใช่กล่องทั่วไปทุกใบ พร้อมฝึกผ่าน Playground 3 ระดับที่ตรวจผลได้จริง
1. หัวข้อนี้คืออะไร
`section` คือแท็กเชิงความหมาย (Semantic Tag) ที่ใช้แบ่งเนื้อหาออกเป็น "ส่วน" ที่มีหัวข้อหรือจุดประสงค์ชัดเจน โดยปกติ `section` มักมี heading ของตัวเอง เช่น `h2` เพื่อบอกว่ากำลังพูดเรื่องอะไร `section` ไม่ได้หมายถึงกล่องธรรมดาทุกใบ แต่หมายถึงกลุ่มเนื้อหาที่รวมกันเป็นหัวข้อเดียว
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยจัดหน้าเว็บให้เป็นหมวดหมู่และอ่านโครงสร้างง่ายขึ้น
- ทำให้คนในทีมเข้าใจได้ทันทีว่าแต่ละกลุ่มเนื้อหาพูดเรื่องอะไร
- ช่วยแยกเนื้อหาแต่ละหัวข้อให้ดูแลต่อได้ง่ายเมื่อหน้าเริ่มยาว
- ลดการใช้ `div` แบบกว้างเกินไปและทำให้โค้ดสื่อความหมายชัดขึ้น
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงหน้าเว็บไซต์บริษัท: - ส่วน "เกี่ยวกับเรา" อธิบายภาพรวมของทีม - ส่วน "บริการ" อธิบายสิ่งที่บริษัทให้ลูกค้า - ส่วน "คำถามที่พบบ่อย" รวมคำตอบที่ผู้ใช้ถามบ่อย แต่ละส่วนเป็นหัวข้อคนละเรื่องและมีจุดประสงค์ชัดเจน จึงเหมาะกับ `section`
4. แนวคิดหลักที่ต้องเข้าใจ
- `section` ใช้กับกลุ่มเนื้อหาที่รวมเป็นหัวข้อเดียวกัน
- `section` มักมี heading เช่น `h2` เพื่อระบุหัวข้อของส่วนนั้น
- ถ้าเป็นแค่กล่องสำหรับจัดเลย์เอาต์ทั่วไปที่ไม่มีหัวข้อชัดเจน มักใช้ `div` เหมาะกว่า
- `article` เหมาะกับเนื้อหาที่เป็นชิ้นอิสระ ส่วน `section` คือส่วนย่อยตามหัวข้อในหน้า
- อย่าใช้ `section` แบบพร่ำเพรื่อกับทุกบล็อก เพราะจะเสียความหมายของโครงสร้าง
5. การทำงานทีละขั้นตอน
- 1) อ่านเนื้อหาทั้งหน้าก่อน แล้วแยกว่าแต่ละหัวข้อหลักคืออะไร
- 2) ถ้ากลุ่มเนื้อหามีจุดประสงค์ชัด ให้ครอบด้วย `section`
- 3) ใส่ heading ของแต่ละ section เช่น `h2` เพื่อระบุหัวข้อ
- 4) ถ้าบางกล่องมีไว้ตกแต่งหรือจัดเลย์เอาต์อย่างเดียว ให้ใช้ `div` แทน
- 5) ตรวจซ้ำว่าแต่ละ section มีความหมายชัดและไม่ได้ใช้แทนทุกกล่องแบบอัตโนมัติ
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้แสดงการใช้ `section` พร้อม heading ภายใน โดยแบ่งหัวข้อเนื้อหาชัดเจน
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่า `section` คือแท็กแทนกล่องทุกชนิด
- สร้าง section แต่ไม่ใส่ heading ทำให้หัวข้อไม่ชัด
- สับสนระหว่าง `section` กับ `article`
- ใช้ `section` แทน `div` ทั้งหมด ทั้งที่บางกรณีเป็นแค่กล่องตกแต่ง
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `section` vs `div` | `section` สื่อว่ามีกลุ่มเนื้อหาหัวข้อชัดเจน, `div` เป็นตัวครอบทั่วไป | ถ้ามีหัวข้อและจุดประสงค์ชัดให้ใช้ `section`; ถ้าเน้นจัดเลย์เอาต์ใช้ `div` |
| `section` vs `article` | `section` คือส่วนตามหัวข้อในหน้า, `article` คือเนื้อหาที่เป็นชิ้นอิสระ | ถ้าเนื้อหาถูกแยกไปอ่านเดี่ยวได้มักเหมาะกับ `article` |
| `section` ที่มี heading vs section ไม่มี heading | มี heading จะสื่อหัวข้อชัดกว่า | โดยทั่วไปควรมี heading ภายใน section |
9. สรุปท้ายบทแบบจำง่าย
- `section` = ส่วนของเนื้อหาที่มีหัวข้อหรือจุดประสงค์ชัดเจน
- โดยทั่วไป section ควรมี heading ของตัวเอง
- `section` ไม่ใช่กล่องธรรมดาทุกใบ
- ถ้าเป็นกล่องจัดเลย์เอาต์ทั่วไป ใช้ `div`
- `article` เหมาะกับเนื้อหาชิ้นอิสระ ส่วน `section` เหมาะกับการแบ่งหัวข้อในหน้า
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อใช้ `section` ให้ถูกบริบท ตั้งแต่การแบ่งส่วนพื้นฐานไปจนถึงการแก้โค้ดที่ใช้ div ผิดความหมาย
Lab 1 (พื้นฐาน): แบ่งหน้าเป็น 2 sections
ชื่อ Lab: แบ่งเนื้อหาออกเป็น 2 ส่วน เป้าหมาย: ฝึกใช้ section เพื่อแบ่งหัวข้อหลัก โจทย์: ภายใน main ให้สร้าง section จำนวน 2 ตัว โดยกำหนด id เป็น "intro" และ "features" เงื่อนไข: ต้องมี main 1 ตัว และมี section#intro กับ section#features อย่างละ 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: สร้างโครง main ก่อน แล้วเพิ่ม section 2 ส่วนตาม id ที่กำหนด เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เพิ่ม heading ให้แต่ละ section
ชื่อ Lab: ใส่หัวข้อให้แต่ละ section เป้าหมาย: ทำให้แต่ละ section มีหัวข้อชัดเจน โจทย์: สร้าง section#about และ section#faq โดยทั้งสอง section ต้องมี h2 ของตัวเองเป็น "เกี่ยวกับเรา" และ "คำถามที่พบบ่อย" เงื่อนไข: ต้องมี section 2 ตัว, ต้องมี h2 ภายในแต่ละ section และข้อความ h2 ต้องตรงโจทย์ สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: วาง section ก่อน แล้วเติม h2 ให้ตรงบทบาทของแต่ละส่วน เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้โค้ดที่ใช้ div แทน section ทั้งที่เนื้อหามีหัวข้อชัดเจน
ชื่อ Lab: เปลี่ยน div หัวข้อชัดเจนให้เป็น section เป้าหมาย: เลือกแท็กให้ตรงความหมายของเนื้อหา โจทย์: จากโค้ดตั้งต้น ให้เปลี่ยน div#services-block และ div#faq-block เป็น section โดยคง h2 และข้อความเดิมไว้ เงื่อนไข: ต้องไม่มี div#services-block และ div#faq-block เหลืออยู่, ต้องมี section#services-block และ section#faq-block อย่างละ 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: เมื่อกลุ่มเนื้อหามีหัวข้อชัดเจน ควรใช้ section แทน div ทั่วไป เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้