HTML
Semantic HTML
What are Semantic Tags (Semantic Tags คืออะไร)
บทเรียนนี้สอนผู้เริ่มต้นให้เข้าใจว่าแท็กเชิงความหมาย (Semantic Tags) คือแท็กที่บอกความหมายของเนื้อหา ไม่ใช่แค่ทำให้หน้าเว็บดูต่าง โดยเน้นการเลือกแท็กให้ตรงบริบท และฝึกผ่าน Lab ที่ตรวจอัตโนมัติได้จริง
1. หัวข้อนี้คืออะไร
แท็กเชิงความหมาย (Semantic Tags) คือแท็ก HTML ที่สื่อความหมายของเนื้อหาโดยตรง ตัวอย่างเช่น: - header = ส่วนหัว - nav = เมนูนำทาง - main = เนื้อหาหลัก - footer = ส่วนท้าย คำว่า semantic ไม่ได้แปลว่าหน้าตาต่าง แต่แปลว่า "ความหมายต่าง" ทำให้คนอ่านโค้ดและเครื่องมือที่อ่านหน้าเว็บเข้าใจโครงสร้างได้ง่ายขึ้น
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้โครงสร้างเอกสาร (Document Structure) ชัดเจนขึ้น
- ทำให้โค้ดอ่านง่าย ดูแลรักษาง่าย และส่งต่องานให้ทีมได้ง่าย
- ช่วยให้เครื่องมืออ่านหน้าเว็บเข้าใจส่วนต่าง ๆ ของเอกสารได้ดีขึ้น
- ช่วยวางพื้นฐานเรื่องการเข้าถึง (Accessibility) ตั้งแต่แรกเริ่ม
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงหนังสือหนึ่งเล่ม: - ปกหนังสือ = header - สารบัญ = nav - เนื้อหาหลักของบท = main - บทความย่อยแต่ละเรื่อง = article หรือ section - หมายเหตุด้านข้าง = aside - หน้าปิดท้าย = footer ถ้าเราติดป้ายชื่อส่วนต่าง ๆ ชัดเจน คนอื่นจะอ่านและหาส่วนที่ต้องการได้เร็วขึ้น เช่นเดียวกับหน้าเว็บ
4. แนวคิดหลักที่ต้องเข้าใจ
- `header` ใช้กับส่วนหัวของหน้า หรือส่วนหัวของ section/article ก็ได้
- `nav` ใช้กับกลุ่มลิงก์นำทางหลัก
- `main` ควรเป็นเนื้อหาหลักของหน้า และโดยทั่วไปมีเพียง 1 ส่วนต่อหน้า
- `section` ใช้แบ่งหัวข้อหรือกลุ่มเนื้อหาที่เกี่ยวข้องกัน
- `article` ใช้กับเนื้อหาที่เป็นชิ้นอิสระ เช่น ข่าวหรือบทความ
- `aside` ใช้กับเนื้อหาเสริม เช่น กล่องคำแนะนำหรือข้อมูลข้างเคียง
- `footer` ใช้กับส่วนท้ายของหน้า หรือส่วนท้ายของ section/article
5. การทำงานทีละขั้นตอน
- 1) อ่านเนื้อหาก่อน แล้วแยกว่าอะไรคือส่วนหัว เมนู เนื้อหาหลัก และส่วนเสริม
- 2) เลือก semantic tag ให้ตรงความหมายของแต่ละส่วน
- 3) ถ้ายังไม่มี semantic tag ที่ตรงจริง ๆ จึงค่อยใช้ div เป็นตัวครอบทั่วไป
- 4) ใช้ span สำหรับครอบคำสั้น ๆ ในบรรทัด ไม่ใช่แทนโครงสร้างหลัก
- 5) ตรวจโครงสร้างอีกครั้งว่าคนที่ไม่รู้โปรเจกต์มาก่อนอ่านแล้วเข้าใจได้
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างเปรียบเทียบนี้แสดงความต่างระหว่างโค้ดที่ใช้ div เยอะเกินไป กับโค้ดที่ใช้ semantic tags เหมาะสมกว่า
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่า semantic tags ทำให้เว็บสวยขึ้นโดยตรง ทั้งที่จริงเป็นเรื่องความหมาย
- คิดว่า semantic tags ใช้แทน div ได้ทุกกรณี
- สับสนระหว่าง section กับ article
- สับสนว่า header ใช้ได้แค่หัวเว็บ แต่จริง ๆ ใช้เป็นหัวของ section/article ได้ด้วย
- เลือกแท็กตามชื่อที่คุ้นตา ไม่ได้เลือกตามความหมายจริงของเนื้อหา
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่างหลัก | คำแนะนำใช้งาน |
|---|---|---|
| Semantic tags vs div/span | Semantic บอกความหมายของส่วนเนื้อหา, div/span เป็น generic wrapper | เลือก semantic ก่อน แล้วใช้ div/span เมื่อจำเป็น |
| section vs article | section คือกลุ่มเนื้อหาตามหัวข้อ, article คือชิ้นเนื้อหาอิสระ | ถ้าเนื้อหาถูกแยกไปอ่านเดี่ยวได้ มักเหมาะกับ article |
| header ของหน้า vs header ของ section | ทั้งสองใช้ได้ตามขอบเขตของเนื้อหา | ดูว่าเป็นหัวของส่วนไหน แล้ววางให้ตรงบริบท |
9. สรุปท้ายบทแบบจำง่าย
- Semantic tags = แท็กที่บอกความหมายของเนื้อหา
- semantic ไม่ได้ทำให้หน้าตาสวยขึ้นเอง แต่ทำให้โครงสร้างชัดขึ้น
- แท็กหลักที่ควรรู้: header, nav, main, section, article, aside, footer
- อย่าใช้ div แทนทุกอย่าง ถ้ามี semantic tag ที่เหมาะกว่า
- div ยังมีประโยชน์ เมื่อไม่มี semantic tag ที่ตรงความหมายจริง
10. Lab สำหรับ Playground
ฝึก 3 ระดับจากพื้นฐานไปท้าทาย โดยแต่ละ Lab มีโจทย์ชัดเจนและตรวจผลอัตโนมัติได้
Lab 1 (พื้นฐาน): เปลี่ยน div เป็น semantic tags พื้นฐาน
ชื่อ Lab: เปลี่ยนโครงสร้างหน้าให้สื่อความหมาย เป้าหมาย: ฝึกแทน div ด้วย header, main, footer โจทย์: ในโค้ดเริ่มต้น ให้แทนที่ div#top, div#content, div#bottom ด้วยแท็ก semantic ที่เหมาะสม และคงข้อความเดิม เงื่อนไข: ต้องมี header 1 ตัว, main 1 ตัว, footer 1 ตัว และไม่มี div#top div#content div#bottom เหลืออยู่ สิ่งที่ระบบควรตรวจ: มีแท็ก semantic ตามกำหนด, จำนวนแท็กถูกต้อง, ข้อความเดิมยังอยู่ แนวทางการคิด: ระบุบทบาทของแต่ละส่วนก่อนแล้วค่อยเปลี่ยนแท็ก เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): จัดหน้าเนื้อหาด้วย header, main, section, footer
ชื่อ Lab: โครงหน้าอ่านบทเรียนแบบ semantic เป้าหมาย: จัดโครงหน้าบทเรียนให้มีส่วนหลักครบ โจทย์: สร้างโครง HTML ที่ประกอบด้วย header, main, section#lesson-intro และ footer โดย section ต้องมี h2 ข้อความ "ความหมายของ Semantic Tags" เงื่อนไข: มี header/main/footer อย่างละ 1 ตัว, มี section#lesson-intro 1 ตัว, และใน section มี h2 ที่ข้อความตรงโจทย์ สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text และ runtime text check แนวทางการคิด: วางโครงหลักก่อน แล้วเติมหัวข้อย่อยใน section เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): ปรับโค้ดที่ใช้ div ทั้งหมดให้ semantic มากขึ้น
ชื่อ Lab: แปลงหน้าเว็บ div ล้วนให้สื่อความหมาย เป้าหมาย: ใช้ semantic tags ให้ตรงบทบาท พร้อมคงข้อความหลักไว้ โจทย์: จากโค้ดเริ่มต้น ให้ปรับเป็นโครงที่มี header, nav, main, article, aside, footer และต้องลบคลาส old-block ออกจากโครงหลัก เงื่อนไข: ต้องมีแท็ก semantic ครบทั้ง 6 ตัวตามโจทย์, nav ต้องมีลิงก์อย่างน้อย 2 ตัว, และใน article ต้องมี h2 ข้อความ "บทความประจำวัน" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, runtime โครงสร้าง แนวทางการคิด: แยกก่อนว่าอะไรคือหัวเว็บ เมนู เนื้อหาหลัก เนื้อหาเสริม และส่วนท้าย เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้