HTML
Layout
Footer Structure
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า footer structure คือโครงสร้างส่วนท้ายของหน้าเว็บที่ช่วยสรุปหรือสนับสนุนเนื้อหาหลัก พร้อมฝึกจัดข้อความ ลิงก์ และข้อมูลติดต่อให้เป็นระเบียบ และพร้อมต่อยอดใน Playground ได้จริง
1. หัวข้อนี้คืออะไร
footer structure คือโครงสร้างของส่วนท้ายหน้าเว็บที่ใช้วางข้อมูลปิดท้ายหรือข้อมูลสนับสนุนของหน้าอย่างเป็นระเบียบ ผู้เริ่มต้นมักคิดว่า footer คือแค่พื้นที่ล่างสุดของหน้า แต่จริง ๆ แล้ว footer มีบทบาทมากกว่านั้น เพราะมันช่วยสรุปหน้าและรวบรวมข้อมูลที่ผู้ใช้ยังอาจต้องใช้ต่อ เช่น ลิขสิทธิ์ ลิงก์เพิ่มเติม ข้อมูลติดต่อ หรือ social links สิ่งสำคัญคือมอง footer เป็นส่วนหนึ่งของโครงสร้างหน้าเว็บ ไม่ใช่แค่กล่องล่างสุดที่ใส่อะไรก็ได้
2. ทำไมหัวข้อนี้สำคัญ
- footer ช่วยปิดท้ายหน้าเว็บอย่างมีระบบและทำให้โครงสร้างหน้าเว็บสมบูรณ์ขึ้น
- ช่วยรวมลิงก์หรือข้อมูลสนับสนุนไว้ในจุดที่ผู้ใช้หาเจอได้ง่าย
- ทำให้โค้ดส่วนท้ายอ่านง่ายและขยายต่อได้สะดวกในอนาคต
- ช่วยแยกข้อมูลรองออกจากเนื้อหาหลักโดยไม่ทำให้ทั้งหน้าดูปะปนกัน
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - footer ของเว็บคอร์สที่มีลิงก์คอร์สทั้งหมด หน้าช่วยเหลือ และลิขสิทธิ์ - footer ของเว็บบริษัทที่มีข้อมูลติดต่อ ที่อยู่ และลิงก์เกี่ยวกับองค์กร - footer ของเว็บพอร์ตโฟลิโอที่มีลิงก์ติดต่อและ social links - footer ของเว็บบทความที่มีลิงก์กลับไปหน้าหลัก หมวดหมู่ และช่องทางติดตาม ทุกตัวอย่างนี้แสดงให้เห็นว่า footer เป็นส่วนสนับสนุนที่ช่วยให้หน้าจบอย่างเป็นระเบียบ ไม่ใช่แค่แถบด้านล่างธรรมดา
4. แนวคิดหลักที่ต้องเข้าใจ
- footer structure คือส่วนท้ายของหน้าเว็บจริงที่ช่วยสรุปหรือสนับสนุนเนื้อหาหลักของหน้า
- ข้อมูลใน footer มักเป็นข้อมูลรองแต่ยังสำคัญ เช่น copyright, ลิงก์เพิ่มเติม, ข้อมูลติดต่อ และ social links
- footer ที่ดีควรจัดข้อมูลให้เป็นระเบียบและขยายต่อได้ แม้จะเริ่มจากแบบเรียบง่ายก่อน
- เมื่อบทบาทเป็นส่วนท้ายของหน้าอย่างชัดเจน ควรใช้ `footer` แทน `div`
- โครงสร้างที่อ่านง่ายมักแยกเป็นกลุ่มข้อความหลัก กลุ่มลิงก์ และข้อมูลเสริม ไม่ควรวางทุกอย่างปนกัน
- สำหรับผู้เริ่มต้น ควรเริ่มจาก footer พื้นฐานที่มีข้อมูลจำเป็นก่อน แล้วค่อยเพิ่มส่วนย่อยเมื่อจำเป็นจริง
5. การทำงานทีละขั้นตอน
- 1) ดูก่อนว่าหน้านี้ควรมีข้อมูลปิดท้ายอะไรบ้าง เช่น ลิขสิทธิ์ ลิงก์ช่วยเหลือ หรือข้อมูลติดต่อ
- 2) เริ่มจาก `footer` พื้นฐานที่มีข้อความหลักหนึ่งส่วนก่อน เช่น copyright
- 3) เพิ่มลิงก์หรือข้อมูลติดต่อที่จำเป็น เช่น ติดต่อเรา ช่วยเหลือ หรือ social links
- 4) จัดกลุ่มข้อมูลให้อ่านง่าย เช่น แยกข้อความปิดท้ายกับกลุ่มลิงก์ออกจากกัน
- 5) เมื่อโครงสร้างชัดแล้ว ค่อยขยายต่อในอนาคตถ้าต้องการข้อมูลเพิ่ม
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้เป็น footer ของทั้งหน้าเว็บแบบเรียบง่าย โดยมีข้อความลิขสิทธิ์ กลุ่มลิงก์เพิ่มเติม และข้อมูลติดต่อในโครงสร้างที่อ่านง่ายก่อน ยังไม่ลงลึกหลายคอลัมน์หรือ layout ซับซ้อน เป้าหมายของตัวอย่างคือให้เห็นว่า footer ที่ดีเริ่มจากโครงสร้างชัดเจนก่อน แล้วค่อยต่อยอด styling ในขั้นต่อไป
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่า footer คือแค่แถบล่างสุดที่ใส่อะไรก็ได้โดยไม่ต้องมีโครงสร้าง
- ใส่ข้อมูลทุกอย่างปนกันจนอ่านยากและไม่รู้ว่าส่วนไหนสำคัญกว่า
- ใช้ `div` ทั้งที่บทบาทเป็นส่วนท้ายของหน้าอย่างชัดเจน
- เริ่มทำ footer หลายคอลัมน์เร็วเกินไป ทั้งที่ยังไม่เข้าใจ footer แบบพื้นฐานก่อน
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| footer structure vs แค่กล่องด้านล่างธรรมดา | footer structure มีบทบาทเป็นส่วนสรุปหรือส่วนสนับสนุนของหน้า ส่วนกล่องด้านล่างธรรมดาอาจไม่มีความหมายชัดเจน | ถ้าส่วนนี้ทำหน้าที่ปิดท้ายหน้าอย่างชัดเจน ให้คิดเป็น footer structure |
| `footer` vs `div` | footer สื่อความหมายว่าเป็นส่วนท้ายของหน้า ส่วน div เป็นเพียงตัวครอบทั่วไป | เมื่อบทบาทชัดว่าเป็นท้ายของหน้า ควรใช้ footer |
| footer แบบเรียบง่าย vs footer ที่ยัดข้อมูลปะปนกัน | footer แบบเรียบง่ายอ่านง่ายและขยายต่อได้ ส่วน footer ที่ยัดทุกอย่างรวมกันทำให้โครงสร้างสับสน | สำหรับผู้เริ่มต้น ควรเริ่มจาก footer ที่มีข้อมูลจำเป็นก่อน |
| ข้อมูลปิดท้ายหลัก vs ลิงก์เสริม/ข้อมูลสนับสนุน | ข้อมูลปิดท้ายหลักคือข้อความอย่างลิขสิทธิ์ ส่วนลิงก์เสริมหรือข้อมูลสนับสนุนช่วยให้ผู้ใช้ไปต่อได้ | ควรแยกสองส่วนนี้ให้อ่านง่าย แม้อยู่ใน footer เดียวกัน |
9. สรุปท้ายบทแบบจำง่าย
- footer structure คือโครงสร้างส่วนท้ายของหน้าเว็บ ไม่ใช่แค่พื้นที่ล่างสุด
- footer ที่ดีช่วยสรุปหน้าและรวมข้อมูลสนับสนุนไว้อย่างเป็นระเบียบ
- ถ้าบทบาทเป็นส่วนท้ายของหน้าอย่างชัดเจน ควรใช้ `footer` แทน `div`
- เริ่มจาก footer แบบเรียบง่ายก่อน แล้วค่อยขยายต่อเมื่อจำเป็น
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อให้เข้าใจการสร้าง footer ตั้งแต่แบบพื้นฐาน การเพิ่มลิงก์หรือข้อมูลติดต่อ ไปจนถึงการปรับโครงสร้างที่ใช้ div แบบไม่เป็นระเบียบให้เป็น footer ที่ชัดเจนขึ้น
Lab 1 (พื้นฐาน): สร้าง footer พื้นฐาน
ชื่อ Lab: สร้าง footer แรกของหน้า เป้าหมาย: สร้าง footer พื้นฐานที่มีข้อความลิขสิทธิ์และข้อมูลปิดท้าย โจทย์: ให้สร้าง <footer class="site-footer"> ภายในมี <p> ข้อความ "© 2026 Learn HTML" และ <a> ข้อความ "ติดต่อเรา" เงื่อนไข: ต้องมี footer.site-footer 1 ตัว, p 1 ตัว และ a 1 ตัวภายใน footer สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: เริ่มจาก footer -> ใส่ข้อความลิขสิทธิ์ -> เติมลิงก์ที่จำเป็น เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เพิ่มลิงก์หรือข้อมูลติดต่อใน footer
ชื่อ Lab: เติมข้อมูลสนับสนุนใน footer เป้าหมาย: สร้าง footer ที่มีลิงก์หรือข้อมูลติดต่ออย่างเป็นระเบียบ โจทย์: ให้สร้าง <footer id="page-footer"> ภายในมี <p> ข้อความ "© 2026 Learn Web", และมีลิงก์ 2 รายการคือ "ช่วยเหลือ" กับ "ติดต่อ" เงื่อนไข: ต้องมี footer#page-footer 1 ตัว, p 1 ตัว และ a 2 ตัวภายใน footer สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: วางข้อความลิขสิทธิ์ก่อน -> เติมลิงก์ที่จำเป็น -> จัดให้อ่านง่าย เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้ footer ที่ใช้ div แบบไม่เป็นระเบียบ
ชื่อ Lab: เปลี่ยนกล่องล่างหน้าให้เป็น footer เป้าหมาย: ปรับโครงสร้างท้ายหน้าให้ใช้ footer และแยกข้อมูลชัดเจนขึ้น โจทย์: จาก starter code ให้เปลี่ยน div class="bottom-box" เป็น <footer class="bottom-box"> โดยภายในมี <p> ข้อความ "© 2026 Learn Layout" และมีลิงก์ "ช่วยเหลือ" กับ "Social" เงื่อนไข: ต้องไม่มี div.bottom-box เหลืออยู่, ต้องมี footer.bottom-box 1 ตัว, มี p 1 ตัว และ a 2 ตัวภายใน footer สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: ถ้าส่วนนี้ทำหน้าที่ปิดท้ายหน้า ควรเปลี่ยนเป็น footer แล้วจัดข้อความกับลิงก์ให้เป็นระเบียบ เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้