HTML
Layout
Card Content Structure
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า card คือบล็อกเนื้อหาย่อยที่รวมข้อมูลที่เกี่ยวข้องไว้ด้วยกัน พร้อมฝึกแยก media, content และ actions ให้ชัดเจน เพื่อให้ card อ่านง่าย ดูแลง่าย และต่อยอดกับ Playground ได้จริง
1. หัวข้อนี้คืออะไร
card คือบล็อกเนื้อหาย่อยที่ใช้รวมข้อมูลที่เกี่ยวข้องกันไว้ในที่เดียว เช่น ชื่อเรื่อง คำอธิบาย รูปภาพ และปุ่มหรือ link สำหรับทำสิ่งถัดไป ผู้เริ่มต้นมักเห็น card เป็นแค่กล่องสวย ๆ แต่ในทาง HTML สิ่งสำคัญกว่าคือการจัดโครงสร้างให้ชัดว่า ส่วนไหนคือ media ส่วนไหนคือเนื้อหา และส่วนไหนคือ action เมื่อโครงสร้างชัด card จะอ่านง่าย แก้ง่าย และนำไปใช้ซ้ำกับข้อมูลหลายชิ้นได้สะดวกขึ้น
2. ทำไมหัวข้อนี้สำคัญ
- card มักใช้กับข้อมูลที่ซ้ำรูปแบบกันหลายชิ้น เช่น รายการคอร์ส บทความ สินค้า หรือผลงาน
- โครงสร้าง card ที่ชัดช่วยให้จัดวางเนื้อหาได้เป็นระเบียบและต่อยอด CSS ได้ง่ายขึ้น
- ช่วยให้ทีมพัฒนาแยกส่วนที่เป็น media, content และ actions ได้ตรงกัน
- ทำให้ card หลายใบในหน้าเดียวกันดูสม่ำเสมอและดูแลง่ายกว่าเดิม
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - การ์ดคอร์สที่มีชื่อคอร์ส คำอธิบายสั้น และปุ่มดูรายละเอียด - การ์ดบทความที่มีภาพปก หัวข้อ และลิงก์อ่านต่อ - การ์ดสินค้าที่มีรูปสินค้า ชื่อ ราคา และปุ่มดูสินค้า - การ์ด portfolio ที่มีภาพผลงาน ชื่อโปรเจกต์ และปุ่มดูผลงาน ทุกตัวอย่างนี้ใช้รูปแบบ card เพราะต้องแสดงข้อมูลหลายชิ้นที่มีโครงสร้างคล้ายกัน
4. แนวคิดหลักที่ต้องเข้าใจ
- card คือกลุ่มข้อมูลที่สัมพันธ์กัน ไม่ใช่แค่กล่องสำหรับตกแต่งหน้า
- card ที่ดีควรแยกส่วนให้ชัด เช่น `media`, `content` และ `actions` เพื่อให้โค้ดอ่านง่าย
- `title` หรือ heading ต้องบอกให้รู้ว่าการ์ดนี้เกี่ยวกับอะไร
- `description` ใช้ขยายความแบบสั้น ช่วยให้คนอ่านเข้าใจเนื้อหาของ card มากขึ้น
- `actions` คือส่วนที่บอกว่าผู้ใช้ควรทำอะไรต่อ เช่น ดูรายละเอียด อ่านต่อ หรือสมัคร
- ถ้า card หนึ่งใบเป็นหน่วยเนื้อหาอิสระ เช่น ข่าว โพสต์ หรือบทความย่อ card นั้นอาจเหมาะกับ `article` มากกว่า `div`
5. การทำงานทีละขั้นตอน
- 1) ดูก่อนว่าการ์ดนี้ต้องสื่อข้อมูลเรื่องอะไร เช่น คอร์ส บทความ หรือสินค้า
- 2) วางส่วนหัวหรือชื่อเรื่องให้ชัดว่า card นี้เกี่ยวกับอะไร
- 3) เติมคำอธิบายสั้นเพื่อช่วยขยายความโดยไม่ยาวเกินไป
- 4) เพิ่ม action ที่ชัดเจนว่าผู้ใช้ควรทำอะไรต่อ เช่น อ่านต่อ หรือดูรายละเอียด
- 5) แยกส่วน card ให้ชัดเป็น media, content และ actions ก่อน แล้วค่อยตกแต่งภายหลัง
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้แสดง card หลายใบใน list เดียวกัน เพื่อให้เห็นว่าการ์ดมักใช้กับข้อมูลที่มีรูปแบบซ้ำกัน โดยแต่ละใบแยกส่วน media, content และ actions ชัดเจน ในตัวอย่างนี้เลือกใช้ `article` กับ card แต่ละใบ เพราะมองว่าแต่ละการ์ดเป็นหน่วยเนื้อหาอิสระที่อ่านแยกได้ ส่วน CSS มีไว้เพียงช่วยให้เห็นการแบ่งส่วนชัดขึ้น
7. จุดที่ผู้เริ่มต้นมักสับสน
- มองว่า card เป็นแค่กล่องสวย ๆ โดยไม่คิดว่าเนื้อหาภายในควรมีโครงสร้าง
- ใส่หัวข้อ คำอธิบาย ปุ่ม และส่วนภาพปะปนกันจนไม่รู้ว่าส่วนไหนทำหน้าที่อะไร
- ใช้ `div` ทั้งหมดโดยไม่คิดว่าบาง card อาจเหมาะกับ `article`
- ใส่ action หลายอย่างแต่ไม่ชัดว่าปุ่มหรือลิงก์ไหนคือสิ่งที่ควรทำต่อหลัก ๆ
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| card ที่โครงสร้างดี vs card ที่ทุกอย่างปะปนกัน | card ที่โครงสร้างดีจะแยก media, content, actions ชัด ส่วน card ที่ปะปนกันทำให้อ่านและแก้โค้ดยาก | เมื่อ card มีหลายองค์ประกอบ ควรแยกส่วนให้ชัดตั้งแต่ต้น |
| card vs section ทั่วไป | card มักเป็นบล็อกย่อยที่มีรูปแบบซ้ำหลายใบ ส่วน section ใช้แบ่งกลุ่มเนื้อหาใหญ่ของหน้า | ถ้าต้องการหน่วยย่อยที่นำไปใช้ซ้ำหลายชิ้น ให้คิดเป็น card |
| card ที่เป็น `div` ทั่วไป vs card ที่เหมาะเป็น `article` | ถ้า card เป็นเพียงกล่องจัดวางทั่วไปอาจใช้ div ได้ แต่ถ้าเป็นเนื้อหาอิสระ เช่น ข่าวหรือโพสต์ย่อ article จะสื่อความหมายชัดกว่า | พิจารณาจากหน้าที่ของ card ไม่ใช่เลือกแท็กจากหน้าตาเพียงอย่างเดียว |
| media / content / actions แยกชัด vs วางรวมกันหมด | การแยกส่วนช่วยให้โครงสร้างและ styling ชัดเจน ส่วนการวางรวมกันหมดทำให้ต่อยอดยาก | เมื่อ card มีทั้งรูป ข้อความ และปุ่ม ควรแยกส่วนเสมอ |
9. สรุปท้ายบทแบบจำง่าย
- card คือบล็อกเนื้อหาย่อยที่รวมข้อมูลที่เกี่ยวข้องไว้ด้วยกัน
- card ที่ดีไม่ใช่แค่กล่องสวย แต่ต้องมีโครงสร้าง HTML ที่ชัด
- แยกส่วนให้ชัดเป็น media, content และ actions จะช่วยให้ card อ่านและดูแลง่าย
- ถ้า card เป็นหน่วยเนื้อหาอิสระ หนึ่งใบอาจเหมาะกับ `article`
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อให้เข้าใจการสร้าง card ตั้งแต่ใบพื้นฐาน การเพิ่มองค์ประกอบให้ครบ ไปจนถึงการแก้โค้ดที่ยังปะปนกันให้แยกส่วนชัดเจน
Lab 1 (พื้นฐาน): สร้าง card พื้นฐาน
ชื่อ Lab: สร้าง card ใบแรก เป้าหมาย: สร้าง card 1 ใบที่มี heading, description และ action โจทย์: ให้สร้าง <article class="card"> ภายในมี <h2> ข้อความ "คอร์สพื้นฐาน", <p> ข้อความ "เริ่มเรียนโครงสร้างเว็บอย่างเป็นขั้นตอน" และ <a> ข้อความ "ดูรายละเอียด" เงื่อนไข: ต้องมี article.card 1 ตัว, h2 1 ตัว, p 1 ตัว และ a 1 ตัวภายใน card สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: เริ่มจาก card -> เติม heading -> เติม description -> เติม action เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เพิ่มองค์ประกอบให้ card ครบ
ชื่อ Lab: แยกส่วน card ให้ครบ เป้าหมาย: สร้าง card ที่มี media, content และ action ชัดเจน โจทย์: ให้สร้าง <article class="card-full"> ภายในมี <div class="card-media"> ข้อความ "Media", <div class="card-content"> ที่มี <h2> ข้อความ "บทความแนะนำ" และ <p> ข้อความ "เข้าใจโครงสร้าง card แบบใช้งานได้จริง", และ <div class="card-actions"> ที่มี <a> ข้อความ "อ่านต่อ" เงื่อนไข: ต้องมี card-full 1 ตัว และภายในต้องมี card-media, card-content, card-actions อย่างละ 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: วางโครงภายนอกก่อน -> แยก media -> แยก content -> แยก actions เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้ card ที่โครงสร้างปนกันให้แบ่งส่วนชัด
ชื่อ Lab: ซ่อม card ที่ยังปะปนกัน เป้าหมาย: เปลี่ยน card ที่รวมทุกอย่างไว้ในกล่องเดียวให้แยกส่วน semantic ชัดขึ้น โจทย์: จาก starter code ให้ปรับเป็น <article class="card-fixed"> ที่มี <div class="card-media"> ข้อความ "Media", <div class="card-content"> ที่มี <h2> ข้อความ "ผลงานแนะนำ" และ <p> ข้อความ "จัดข้อมูลของ card ให้แยกส่วนได้ชัดเจน", และ <div class="card-actions"> ที่มี <a> ข้อความ "ดูผลงาน" เงื่อนไข: ต้องมี article.card-fixed 1 ตัว และภายในต้องมี card-media, card-content, card-actions พร้อมข้อความตามโจทย์ สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: เปลี่ยนกล่องรวมให้เป็น card ที่มีโครงสร้าง -> แยกข้อความออกจาก action -> วางแต่ละส่วนตามบทบาท เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้