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