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