HTML
Accessibility
Heading Hierarchy
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า heading (`h1` ถึง `h6`) ใช้สำหรับบอกโครงสร้างหัวข้อของเนื้อหา ไม่ได้มีไว้เลือกจากขนาดตัวอักษรอย่างเดียว พร้อมฝึกจัดลำดับหัวข้อให้สมเหตุสมผลและตรวจผ่าน Playground ได้จริง
1. หัวข้อนี้คืออะไร
Heading Hierarchy คือการจัดลำดับหัวข้อด้วยแท็ก `h1` ถึง `h6` อย่างมีโครงสร้าง เพื่อบอกว่าอะไรคือหัวข้อหลัก อะไรคือหัวข้อย่อย และอะไรคือหัวข้อย่อยลงไปอีก เมื่อเราใช้ heading ถูกลำดับ ผู้อ่านจะมองหน้าเว็บแล้วเข้าใจโครงเรื่องได้ง่ายขึ้น และเครื่องมือช่วยอ่านหน้าจอก็สามารถตีความภาพรวมของเนื้อหาได้ดีขึ้นด้วย สิ่งสำคัญคือ heading ไม่ได้ถูกเลือกเพราะตัวใหญ่หรือตัวเล็ก แต่ถูกเลือกเพราะบทบาทของหัวข้อนั้นในโครงสร้างของหน้า
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้หน้าเว็บมีโครงสร้างที่อ่านง่ายและตามเนื้อหาได้เป็นลำดับ
- ช่วยให้ผู้ใช้เห็นทันทีว่าอะไรคือหัวข้อหลัก และอะไรคือหัวข้อย่อย
- ช่วยเรื่อง accessibility เพราะเครื่องมือช่วยอ่านหน้าจอใช้ heading เพื่อสำรวจโครงสร้างหน้า
- ลดปัญหาการใช้ heading แบบสุ่มเพียงเพราะอยากได้ตัวอักษรใหญ่หรือเล็ก
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงหน้าเว็บคอร์สเรียนที่มีชื่อคอร์สเป็นหัวข้อใหญ่ที่สุด จากนั้นมีหัวข้อย่อยอย่าง "สิ่งที่คุณจะได้เรียน" และภายใต้หัวข้อนั้นมีหัวข้อย่อยลงไป เช่น "พื้นฐาน HTML" หรือ "การฝึกทำ Lab" แบบนี้ผู้อ่านจะไล่ความคิดตามได้ง่าย แต่ถ้าหน้าเดียวกันใช้หัวข้อแรกเป็น `h1` แล้วกระโดดไป `h4` ทันทีเพียงเพราะอยากให้ตัวเล็กลง หน้าอาจยังดูสวยได้ แต่โครงสร้างจะเริ่มสับสน เพราะลำดับหัวข้อไม่สะท้อนความสัมพันธ์จริงของเนื้อหา
4. แนวคิดหลักที่ต้องเข้าใจ
- heading ใช้บอกลำดับและความสัมพันธ์ของหัวข้อ ไม่ใช่ใช้เลือกขนาดตัวอักษรอย่างเดียว
- โดยทั่วไปหน้าเว็บควรมี `h1` หลักของหน้าเพื่อบอกหัวข้อใหญ่ที่สุด
- หัวข้อย่อยของ `h1` มักใช้ `h2` และหัวข้อย่อยของ `h2` มักใช้ `h3` ตามลำดับ
- ไม่ควรกระโดดข้ามระดับแบบไร้เหตุผล เช่น จาก `h1` ไป `h4` เพียงเพื่อให้ตัวหนังสือเล็กลง
- ถ้าอยากปรับหน้าตา ควรใช้ CSS จัดการเรื่องขนาด สี หรือระยะห่าง แยกจากหน้าที่ของ heading
- ลำดับหัวข้อคือเรื่องของโครงสร้าง ส่วนหน้าตาการตกแต่งคือเรื่องของการแสดงผล ทั้งสองอย่างไม่ควรปะปนกัน
5. การทำงานทีละขั้นตอน
- 1) หาให้เจอก่อนว่าอะไรคือหัวข้อหลักที่สุดของหน้า แล้วกำหนดเป็น `h1`
- 2) แบ่งหัวข้อหลักออกเป็นกลุ่มเนื้อหาย่อย แล้วใช้ `h2` สำหรับแต่ละกลุ่ม
- 3) ถ้าในกลุ่มใดมีหัวข้อย่อยลงไปอีก จึงค่อยใช้ `h3` ภายใต้ `h2` นั้น
- 4) ตรวจว่าลำดับ heading สะท้อนโครงสร้างจริงของเนื้อหา ไม่ได้ถูกเลือกเพราะอยากได้ขนาดตัวอักษร
- 5) ถ้าต้องการให้หัวข้อดูใหญ่หรือเล็กขึ้น ให้ใช้ CSS ปรับ style แทนการเปลี่ยนระดับ heading
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้วางทั้งโครงสร้างที่ดีและโครงสร้างที่ชวนสับสนไว้ด้วยกัน เพื่อให้เห็นชัดว่า heading ที่ถูกต้องต้องสะท้อนลำดับหัวข้อจริง ส่วนเรื่องตัวใหญ่ตัวเล็กควรปล่อยให้ CSS ดูแล
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่า heading มีไว้ทำให้ตัวอักษรใหญ่หรือเล็ก จึงเลือก tag จากหน้าตาเป็นหลัก
- ใช้ `h1` หลายตัวแบบไม่มีเหตุผล เพราะอยากให้หลายบรรทัดดูเด่นเท่ากัน
- กระโดดจาก `h1` ไป `h3` หรือ `h4` โดยไม่ได้มีลำดับหัวข้อรองรับจริง
- สับสนระหว่างการจัดโครงสร้างเนื้อหากับการตกแต่งด้วย CSS
- มองว่า heading เป็นแค่ข้อความตัวหนา ทั้งที่จริงเป็นส่วนหนึ่งของโครงสร้างเอกสาร
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| ลำดับหัวข้อ vs ขนาดตัวอักษร | ลำดับหัวข้อบอกโครงสร้างของเนื้อหา ส่วนขนาดตัวอักษรเป็นเรื่องหน้าตาและการตกแต่ง | เลือก `h1` ถึง `h6` จากบทบาทของหัวข้อ และใช้ CSS ปรับหน้าตาตามต้องการ |
| heading ที่มีโครงสร้าง vs heading ที่เลือกตามหน้าตา | heading ที่มีโครงสร้างทำให้รู้ว่าหัวข้อไหนอยู่ใต้หัวข้อไหน ส่วนการเลือกตามหน้าตาทำให้หน้าอาจดูดีแต่โครงสร้างสับสน | เมื่อเขียนบทความหรือ lesson page ให้เริ่มจากโครงสร้างก่อน แล้วค่อยแต่งหน้าตา |
| `h2`/`h3` ตามลำดับ vs การกระโดดข้ามระดับ | `h2` และ `h3` ใช้ต่อเนื่องตามความลึกของหัวข้อ ส่วนการกระโดดข้ามระดับมักเกิดจากการใช้ heading ผิดวัตถุประสงค์ | ถ้าหัวข้อเป็นลูกของ `h1` ให้เริ่มที่ `h2` และใช้ `h3` เมื่อมีหัวข้อย่อยภายใต้ `h2` |
| heading vs ข้อความที่แต่งให้ดูเหมือน heading | heading เป็นแท็กที่มีความหมายเชิงโครงสร้าง ส่วนข้อความที่แค่ตัวใหญ่หรือหนาเป็นเพียงการตกแต่ง | ถ้าข้อความนั้นเป็นหัวข้อจริงให้ใช้ heading ถ้าแค่ต้องการความเด่นให้ใช้ CSS กับ element ที่เหมาะสม |
9. สรุปท้ายบทแบบจำง่าย
- heading ใช้บอกโครงสร้างหัวข้อของเนื้อหา
- โดยทั่วไปหน้าเว็บควรมี `h1` หลักของหน้า
- หัวข้อย่อยควรไล่จาก `h2` ไป `h3` อย่างสมเหตุสมผล
- อย่าเลือก heading จากขนาดตัวอักษรอย่างเดียว
- ถ้าอยากเปลี่ยนหน้าตา ให้ใช้ CSS แยกจากลำดับหัวข้อ
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อเข้าใจ heading hierarchy ตั้งแต่การสร้างโครงพื้นฐาน การเพิ่มหัวข้อย่อยให้ถูกลำดับ และการแก้ตัวอย่างที่ใช้ heading กระโดดหรือใช้ผิดบริบท
Lab 1 (พื้นฐาน): สร้างโครงหัวข้อพื้นฐาน
ชื่อ Lab: โครงหัวข้อของหน้าเรียน เป้าหมาย: สร้าง heading หลักและหัวข้อย่อยพื้นฐานให้ครบ โจทย์: สร้าง <article id="lesson-outline"> ที่มี <h1>Heading Hierarchy</h1> และมี <h2>ทำไมหัวข้อนี้สำคัญ</h2> อยู่ภายใน เงื่อนไข: ต้องมี h1 1 ตัว, h2 อย่างน้อย 1 ตัว และข้อความ heading ต้องตรงตามโจทย์ สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text และ browser runtime แนวทางการคิด: เริ่มจาก h1 ของหน้าก่อน แล้วค่อยเพิ่ม h2 สำหรับหัวข้อย่อย เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เพิ่มหัวข้อย่อยให้ถูกลำดับ
ชื่อ Lab: เติมหัวข้อย่อยภายใต้ section เป้าหมาย: เพิ่ม h3 ใต้หัวข้อ h2 ให้ถูกลำดับ โจทย์: ใน article id="course-structure" ให้คง <h1>คอร์ส HTML เบื้องต้น</h1> และ <h2>บทที่ 1</h2> ไว้ แล้วเพิ่ม <h3>Heading Hierarchy คืออะไร</h3> ต่อจาก h2 เงื่อนไข: ต้องมี h1 1 ตัว, h2 1 ตัว, h3 1 ตัว และลำดับใน DOM ต้องเป็น h1 > h2 > h3 สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text และ browser runtime แนวทางการคิด: h3 ต้องเป็นหัวข้อย่อยของ h2 ไม่ใช่แทนที่ h2 เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้บทความที่ใช้ heading กระโดดหรือใช้ผิดบริบท
ชื่อ Lab: ซ่อมลำดับ heading ที่สับสน เป้าหมาย: แก้โครงสร้าง heading ที่กระโดดและใช้ผิดบทบาทให้เป็นลำดับที่สมเหตุสมผล โจทย์: จาก starter code ให้แก้ article id="broken-article" ให้เหลือ heading ตามลำดับนี้เท่านั้น - <h1>คู่มือการอ่านหน้าเว็บ</h1> - <h2>หัวข้อหลักย่อย</h2> - <h3>รายละเอียดเพิ่มเติม</h3> เงื่อนไข: ต้องไม่มี h4 อยู่ใน article และลำดับต้องเป็น h1 > h2 > h3 สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text และ browser runtime แนวทางการคิด: แยกโครงสร้างหัวข้อออกจากความต้องการเรื่องหน้าตา แล้วจัดระดับใหม่ให้ตรงบทบาท เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้