HTML
Layout
Page Layout Structure
บทนี้สอนผู้เริ่มต้นให้เข้าใจการวางโครงสร้างภาพรวมของหน้าเว็บด้วย semantic HTML เช่น `header`, `nav`, `main`, `section`, `footer` เพื่อให้หน้าอ่านง่าย ดูแลง่าย และต่อยอด CSS ได้สะดวกขึ้นในภายหลัง
1. หัวข้อนี้คืออะไร
page layout structure คือการจัดโครงสร้างภาพรวมของหน้าเว็บว่าแต่ละส่วนอยู่ตรงไหนและทำหน้าที่อะไร ก่อนที่เราจะตกแต่งสี ระยะห่าง หรือความสวยงามด้วย CSS เราควรมีโครงสร้าง HTML ที่ชัดเจนก่อน เพราะโครงสร้างที่ดีคือฐานของหน้าเว็บที่อ่านง่ายและพัฒนาต่อได้ง่าย
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้หน้าเว็บอ่านง่ายขึ้น เพราะแต่ละส่วนมีที่อยู่และหน้าที่ชัดเจน
- ช่วยให้ดูแลโค้ดง่ายขึ้น เมื่อกลับมาแก้ภายหลังก็เข้าใจโครงของหน้าได้เร็ว
- ทำให้ต่อยอด CSS ได้ง่าย เพราะเรารู้ว่ากำลังตกแต่งส่วนไหนของหน้า
- ช่วยให้แต่ละส่วนของหน้าไม่ปนกันจนโครงสร้างอ่านยาก
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - หน้าเว็บบริษัทที่มีส่วนหัว เนื้อหา และส่วนท้ายชัดเจน - หน้า landing page ที่มี header, เนื้อหาแนะนำ และ footer - หน้า blog หรือ article ที่มีเมนูด้านบนและเนื้อหาหลักตรงกลาง - หน้า docs หรือหน้า course ที่ต้องจัดส่วนต่าง ๆ ให้เป็นระเบียบ ทุกหน้าพวกนี้เริ่มต้นจากการวางโครงสร้างก่อน แล้วค่อยตกแต่งให้สวยงามในขั้นต่อไป
4. แนวคิดหลักที่ต้องเข้าใจ
- โครงสร้างหน้าควรคิดจากบทบาทของแต่ละส่วน ไม่ใช่คิดจากหน้าตาอย่างเดียว
- `header` คือส่วนบนของหน้า เช่น ชื่อเว็บไซต์ โลโก้ หรือหัวเรื่องหลัก
- `nav` คือพื้นที่สำหรับลิงก์นำทาง
- `main` คือเนื้อหาหลักของหน้านั้น
- `section` คือกลุ่มเนื้อหาย่อยที่มีหัวข้อหรือจุดประสงค์ชัดเจน
- `footer` คือส่วนท้ายของหน้า เช่น ข้อมูลลิขสิทธิ์หรือลิงก์เสริม
- semantic HTML คือการใช้แท็กที่สื่อความหมายของส่วนต่าง ๆ ให้ชัดขึ้นแทนการใช้ `div` ครอบทุกอย่าง
5. การทำงานทีละขั้นตอน
- 1) คิดก่อนว่าหน้านี้มีส่วนหลักอะไรบ้าง เช่น ส่วนหัว เมนู เนื้อหา และส่วนท้าย
- 2) วางโครงจากบนลงล่าง เช่น `header -> main -> footer`
- 3) ถ้าหน้ามีลิงก์นำทาง ให้เพิ่ม `nav` ในตำแหน่งที่เหมาะสม
- 4) ถ้าเนื้อหาหลักมีหลายกลุ่ม ให้แบ่งภายใน `main` ด้วย `section`
- 5) เมื่อโครงสร้างชัดแล้ว ค่อยเติมข้อความ เนื้อหา และ CSS ในขั้นถัดไป
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้เป็น layout พื้นฐานทั้งหน้าที่เริ่มจาก semantic HTML ก่อน โดยแต่ละส่วนมีหน้าที่ชัดเจน เช่น `header` สำหรับส่วนหัว, `nav` สำหรับเมนู, `main` สำหรับเนื้อหาหลัก และ `footer` สำหรับส่วนท้าย CSS ที่ใส่มีเพียงระดับพื้นฐานเพื่อช่วยให้มองโครงหน้าได้ง่ายขึ้น ไม่ได้มีไว้เพื่อสอนการตกแต่งละเอียดในบทนี้
7. จุดที่ผู้เริ่มต้นมักสับสน
- ใช้ `div` ทั้งหน้าโดยไม่แยกบทบาทของแต่ละส่วน ทำให้โค้ดอ่านยาก
- คิดว่า layout คือเรื่องของ CSS อย่างเดียว ทั้งที่ HTML structure คือจุดเริ่มต้น
- ใส่ `main` หลายตัวในหน้าเดียว ทั้งที่โดยทั่วไปควรมีเนื้อหาหลักเพียงชุดเดียวต่อหน้า
- ใช้ `section` ทั้งที่ไม่มีหัวข้อหรือไม่ได้แบ่งเนื้อหาอย่างมีเหตุผล
- เอาเมนูไปปนกับเนื้อหาหลักจนโครงสร้างหน้าไม่ชัดเจน
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| semantic layout vs ใช้ `div` ล้วน | semantic layout บอกหน้าที่ของแต่ละส่วนชัดเจน ส่วน `div` ล้วนต้องตีความจาก class หรือบริบทเพิ่ม | เริ่มต้นควรใช้ semantic tags เมื่อส่วนของหน้ามีบทบาทชัดเจน |
| `main` vs `section` | main คือเนื้อหาหลักของทั้งหน้า ส่วน section คือกลุ่มย่อยภายในเนื้อหา | ใช้ main เป็นโครงหลัก และใช้ section เพื่อแบ่งหัวข้อย่อยภายใน |
| `header` ของทั้งหน้า vs หัวข้อย่อยใน section | header ของทั้งหน้าใช้กับส่วนบนของหน้า ส่วนหัวข้อย่อยใน section เป็นโครงของเนื้อหาย่อย | แยกบทบาทของหัวเรื่องระดับหน้าออกจากหัวข้อระดับย่อยให้ชัดเจน |
| วางโครงก่อน vs ตกแต่งก่อน | วางโครงก่อนช่วยให้หน้าเป็นระเบียบ ส่วนการตกแต่งก่อนอาจทำให้โครงสร้างสับสน | เริ่มจาก HTML structure ก่อน แล้วค่อยต่อด้วย CSS |
9. สรุปท้ายบทแบบจำง่าย
- เริ่มจากโครงสร้างก่อนสไตล์
- คิดจากหน้าที่ของแต่ละส่วนในหน้าเว็บ
- ใช้ semantic tags เพื่อให้โครงสร้างชัดเจนและอ่านง่าย
- layout ที่ดีช่วยให้ต่อ CSS และดูแลโค้ดในอนาคตได้ง่ายขึ้น
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อให้เข้าใจการวางโครงหน้าพื้นฐาน การเติมส่วนหลักให้ครบ และการแปลงโค้ดที่ใช้ `div` ทั้งหน้าให้มี semantic structure ที่ชัดเจน
Lab 1 (พื้นฐาน): สร้างโครงหน้าพื้นฐาน
ชื่อ Lab: วางโครงหน้าแรก เป้าหมาย: สร้างหน้าแบบพื้นฐานด้วย `header`, `main`, `footer` โจทย์: ให้สร้างโครงหน้าที่มี <header>, <main> และ <footer> อย่างละ 1 ตัว พร้อมข้อความ Header Area, Main Content และ Footer Area เงื่อนไข: ต้องมีแท็กทั้ง 3 ครบ และข้อความต้องอยู่ในส่วนที่ถูกต้อง สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: วางส่วนบน -> วางเนื้อหาหลัก -> วางส่วนท้าย
Lab 2 (กลาง): เติมส่วนหลักให้ครบ
ชื่อ Lab: จัดโครงหน้าให้สมบูรณ์ขึ้น เป้าหมาย: เพิ่มส่วนสำคัญของหน้าเว็บให้ครบและชัดเจน โจทย์: ให้สร้างหน้าโครงที่มี <header>, <nav>, <main>, <section> อย่างน้อย 2 ตัว และ <footer> พร้อมข้อความ Site Menu, Introduction Section และ Lesson Section เงื่อนไข: nav ควรอยู่ในส่วนบนของหน้า และ section ควรอยู่ภายใน main สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: สร้าง header ก่อน -> ใส่ nav -> วาง main -> แบ่ง section ภายใน main
Lab 3 (ท้าทาย): แก้โค้ดที่ใช้ div ทั้งหน้าให้มีโครงสร้างชัดขึ้น
ชื่อ Lab: แปลง div ให้เป็น semantic layout เป้าหมาย: เปลี่ยนโค้ดที่ใช้ div ครอบทั้งหน้าให้มีโครงสร้างที่ชัดขึ้น โจทย์: จากโค้ดตั้งต้น ให้แปลงหน้าให้มี <header>, <main> และ <footer> โดยยังคงข้อความเดิมคือ Learn Portal, Course Overview และ Contact Info ไว้ครบ เงื่อนไข: ต้องคงข้อความเดิมไว้ และลดการใช้ div เป็นโครงหลักอย่างเดียว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: มองบทบาทของแต่ละ block เดิม แล้วค่อยแทนด้วย semantic tags ที่เหมาะสม