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