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