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