HTML
Layout
Hero Section
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า hero section คือส่วนเด่นช่วงบนของหน้าเว็บที่ใช้สื่อสารข้อความหลักของหน้าอย่างชัดเจน พร้อมฝึกวางโครงสร้างด้วย heading, paragraph และ CTA ให้พร้อมต่อยอดใน Playground และตรวจผลได้จริง
1. หัวข้อนี้คืออะไร
hero section คือส่วนเด่นช่วงบนของหน้าเว็บที่มักเป็นบริเวณแรก ๆ ที่ผู้ใช้มองเห็นเมื่อเปิดหน้า หน้าที่ของมันคือบอกอย่างรวดเร็วว่า หน้านี้เกี่ยวกับอะไร มีคุณค่าอะไร และผู้ใช้ควรทำอะไรต่อ เช่น สมัครใช้งาน เริ่มเรียน หรือดูรายละเอียดเพิ่มเติม สำหรับผู้เริ่มต้น สิ่งสำคัญคือต้องมอง hero section เป็นเรื่องของโครงสร้างเนื้อหาก่อน ไม่ใช่คิดถึงภาพสวยหรือเอฟเฟกต์ก่อนเสมอ
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้ผู้ใช้เข้าใจทันทีว่าหน้านี้เกี่ยวกับอะไรโดยไม่ต้องเลื่อนลงไปก่อน
- ช่วยเน้น action หลักของหน้า เช่น สมัคร เริ่มต้น หรือดูรายละเอียดเพิ่มเติม
- ทำให้ส่วนบนของหน้าเว็บมีโครงสร้างที่ชัดเจนและอ่านโค้ดง่ายขึ้น
- ช่วยให้ทีมออกแบบและทีมพัฒนาคุยกันง่ายขึ้น เพราะสารหลักของหน้าอยู่รวมกันอย่างเป็นระบบ
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - หน้าเว็บคอร์สออนไลน์ที่ขึ้นหัวข้อคอร์สและปุ่มเริ่มเรียนทันที - หน้าเว็บสมัครใช้งานที่บอกประโยชน์หลักพร้อมปุ่มสมัครฟรี - หน้าแนะนำสินค้าที่สรุปคุณค่าของสินค้าไว้ด้านบนพร้อมปุ่มสั่งซื้อหรือดูฟีเจอร์ - หน้า portfolio ที่แนะนำตัวเจ้าของผลงานพร้อมปุ่มดูผลงานหรือช่องทางติดต่อ ทุกตัวอย่างนี้ใช้ hero section เพื่อสรุปสารสำคัญของหน้าในช่วงแรกที่ผู้ใช้เห็น
4. แนวคิดหลักที่ต้องเข้าใจ
- hero section คือส่วนเปิดหน้าที่รวมสารสำคัญของหน้าไว้ในที่เดียว ไม่ใช่แค่พื้นที่ตกแต่งให้ดูเด่น
- `headline` คือข้อความหลักที่ควรสั้น ชัด และบอกใจความสำคัญของหน้า
- `subheadline` คือข้อความรองที่ช่วยขยายความหรืออธิบายประโยชน์เพิ่มจาก headline
- `call-to-action` หรือ CTA คือปุ่มหรือลิงก์ที่บอกให้ผู้ใช้ทำสิ่งถัดไปอย่างชัดเจน
- ภาพหรือ visual เป็นองค์ประกอบเสริมที่ช่วยสื่ออารมณ์หรือบริบท แต่ไม่ควรแย่งความชัดของข้อความหลัก
- ใน HTML มักใช้ `section` ครอบ hero แล้วใช้ heading, paragraph และ `a` หรือ `button` ภายในให้แยกบทบาทอ่านง่าย
5. การทำงานทีละขั้นตอน
- 1) กำหนดก่อนว่าหน้านี้ต้องการสื่ออะไรเป็นเรื่องหลัก เช่น ชวนสมัครคอร์สหรือแนะนำบริการ
- 2) เขียน headline ให้บอกใจความเดียวที่คนอ่านเข้าใจได้ทันที
- 3) เติม subheadline เพื่ออธิบายรายละเอียดหรือประโยชน์เพิ่มโดยไม่ยาวเกินไป
- 4) เพิ่ม CTA ที่ชัดเจนว่าผู้ใช้ควรทำอะไรต่อ เช่น เริ่มเรียน สมัครฟรี หรือดูรายละเอียด
- 5) จัดทุกอย่างให้อยู่ในโครงสร้าง semantic HTML ที่อ่านง่าย เช่น `section`, heading, paragraph และลิงก์หรือปุ่ม
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้เป็น hero section พื้นฐานที่เริ่มจากโครงสร้างเนื้อหาก่อน โดยมี headline, subheadline และ CTA ครบ พร้อมจัดกลุ่มข้อความกับ visual แบบอ่านง่าย CSS ที่ใส่มีเพียงระดับพื้นฐานเพื่อช่วยให้เห็นการแบ่งส่วนของ hero ชัดขึ้น ไม่ใช่ประเด็นหลักของบทนี้
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่า hero section คือแค่แบนเนอร์สวย ๆ ทั้งที่จริงหน้าที่หลักคือสื่อสารสารสำคัญของหน้า
- ใส่ข้อความหลายประเด็นเกินไปจน headline ไม่ชัดว่าต้องการบอกอะไร
- มี CTA หลายปุ่มแต่ไม่รู้ว่าปุ่มไหนคือ action หลักของหน้า
- ใช้ `div` ครอบทุกอย่างโดยไม่แยก heading, paragraph และ CTA ให้ชัดเจน
- ให้ visual เด่นเกินข้อความจนคนอ่านไม่เข้าใจว่าหน้านี้ต้องการสื่ออะไร
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `hero section` vs `header` | hero section คือส่วนเด่นที่สื่อสารสารหลักของหน้า ส่วน header มักเป็นส่วนหัวของหน้า เช่น โลโก้หรือเมนูนำทาง | ถ้าต้องการสรุปคุณค่าหลักและ action ของหน้า ให้คิดเป็น hero section |
| `headline` vs `subheadline` | headline คือข้อความหลักที่ต้องเห็นแล้วเข้าใจเร็ว ส่วน subheadline คือข้อความรองที่ช่วยขยายความ | ใช้ headline เพื่อสรุปใจความ และใช้ subheadline เพื่ออธิบายเพิ่มอย่างกระชับ |
| CTA แบบลิงก์ vs CTA แบบปุ่ม | ลิงก์มักใช้เมื่อพาไปยังหน้าอื่นหรือส่วนอื่น ส่วนปุ่มมักใช้กับการกระทำในหน้า เช่น เปิด modal หรือส่งข้อมูล | เลือกตามพฤติกรรมที่ผู้ใช้ต้องทำต่อ ไม่ใช่เลือกจากหน้าตาอย่างเดียว |
| เน้นโครงสร้างก่อน vs เน้นตกแต่งก่อน | เริ่มจากโครงสร้างช่วยให้สารชัดและโค้ดอ่านง่าย ส่วนการตกแต่งก่อนอาจทำให้ลืมสารหลักของ hero | สำหรับผู้เริ่มต้น ควรวาง semantic HTML ให้ชัดก่อนแล้วค่อยเพิ่ม CSS |
9. สรุปท้ายบทแบบจำง่าย
- hero section คือส่วนเด่นช่วงบนที่บอกสารหลักของหน้าเว็บ
- โครงสร้างพื้นฐานที่พบบ่อยคือ `section` + heading + paragraph + CTA
- headline ต้องชัด subheadline ต้องช่วยขยายความ และ CTA ต้องบอกสิ่งที่ควรทำต่อ
- เริ่มจากโครงสร้างเนื้อหาก่อน แล้วค่อยตกแต่ง visual ภายหลัง
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อให้เข้าใจการสร้าง hero section ตั้งแต่โครงพื้นฐาน การเติมองค์ประกอบสำคัญให้ครบ ไปจนถึงการแก้โค้ดที่ยังไม่ semantic ให้ชัดเจนขึ้น
Lab 1 (พื้นฐาน): สร้าง hero section พื้นฐาน
ชื่อ Lab: สร้าง hero แรกของหน้า เป้าหมาย: สร้าง hero section พื้นฐานด้วยโครงสร้างที่ชัดเจน โจทย์: ให้สร้าง <section class="hero"> ภายในมี <h1> ข้อความ "เรียน HTML อย่างเป็นขั้นตอน", <p> ข้อความ "เริ่มจากโครงสร้างที่ถูกต้องก่อนตกแต่ง" และ <a> ข้อความ "เริ่มเรียน" เงื่อนไข: ต้องมี section.hero 1 ตัว, h1 1 ตัว, p 1 ตัว และ a 1 ตัวภายใน hero สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: เริ่มจาก section -> เติมข้อความหลัก -> เติมข้อความรอง -> เติม CTA เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เพิ่ม headline, subheadline และ CTA
ชื่อ Lab: เติมสารหลักของ hero ให้ครบ เป้าหมาย: ฝึกจัดองค์ประกอบสำคัญของ hero section ให้ครบและชัดเจน โจทย์: ให้สร้าง <section id="course-hero"> ภายในมี <h1> ข้อความ "สร้างหน้าเว็บแรกของคุณ", <p> ข้อความ "เรียนรู้โครงสร้าง HTML ที่ใช้ได้จริงในหน้าเว็บ", และ <a> ข้อความ "ดูบทเรียน" พร้อม href ที่ไม่ว่าง เงื่อนไข: ต้องมี section#course-hero 1 ตัว, h1 1 ตัว, p 1 ตัว และ a 1 ตัว โดยลิงก์ต้องมี href สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: ระบุ section ให้ชัด -> เขียน headline -> เขียน subheadline -> ใส่ CTA ที่มีจุดประสงค์ชัด เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): ปรับ hero ที่ยังไม่ semantic
ชื่อ Lab: ซ่อม hero ที่มีแต่ div และข้อความลอย เป้าหมาย: เปลี่ยนโค้ดที่ยังไม่ semantic ให้เป็น hero section ที่อ่านง่ายขึ้น โจทย์: จาก starter code ที่มีแต่ div และข้อความ ให้ปรับเป็น <section class="hero-fixed"> ที่ภายในมี <h1> ข้อความ "พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง", <p> ข้อความ "จัดโครงสร้าง hero ให้สื่อสารได้ชัดเจนตั้งแต่ส่วนบนของหน้า", และ <a> ข้อความ "เริ่มตอนนี้" เงื่อนไข: ต้องมี section.hero-fixed 1 ตัว, h1 1 ตัว, p 1 ตัว และ a 1 ตัวภายใน section พร้อมข้อความตามกำหนด สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content และ browser runtime แนวทางการคิด: เปลี่ยนกล่องทั่วไปให้เป็น section ที่มีความหมาย -> แยกข้อความหลัก/รอง -> เติม CTA ให้ชัด เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้