ลำดับระดับการซ้อนโดยไม่ข้ามขั้น
เรียงจาก h2 ไป h3 ตามลำดับ เพื่อให้โครงร่างยังเป็นเหตุเป็นผล
ลำดับระดับการซ้อนโดยไม่ข้ามขั้น เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
หัวข้อสร้างโครงร่าง
ระดับหัวข้อสร้างโครงร่างคล้ายรายการซ้อนกัน ตัวเลขระดับบอกว่าส่วนใดอยู่ภายในส่วนใด เช่นเดียวกับโครงร่างเรียงความ 🌳
ลดระดับทีละหนึ่ง
หลังจาก h2 ส่วนย่อยควรใช้ h3 ไม่ใช่ h4 การเพิ่มระดับทีละขั้นช่วยให้โครงสร้างตรงตามจริงและติดตามได้ง่าย
<h2>Shipping</h2>
<h3>Delivery Times</h3>การข้ามระดับทำให้โครงสร้างเสีย
การกระโดดจาก h2 ไป h4 โดยตรงสื่อว่าขาด h3 โครงร่างจึงมีช่องว่าง และผู้ใช้สงสัยว่าพลาดอะไรไป
ย้อนกลับขึ้นมากี่ระดับก็ได้
คุณสามารถย้อนกลับขึ้นกี่ระดับก็ได้ หลังจาก h4 หากกลับไป h2 ก็หมายความว่าเริ่มส่วนระดับบนสุดใหม่ ซึ่งทำได้
<h2>Payment</h2>
<h3>Cards</h3>
<h4>Visa</h4>
<h2>Returns</h2>ระดับหมายถึงลำดับชั้น
การลดระดับแต่ละขั้นหมายถึงการอยู่ภายในส่วนก่อนหน้า h3 เป็นส่วนหนึ่งของ h2 ด้านบน ไม่ใช่ส่วนระดับเดียวกัน ตัวเลขบอกความสัมพันธ์ ไม่ใช่ขนาด
อย่าเลือกจากรูปลักษณ์
อย่าเลือก h4 เพียงเพราะต้องการข้อความที่เล็กลง เลือกระดับตามที่โครงสร้างต้องการ แล้วจัดขนาดด้วย CSS
ส่วนระดับเดียวกันใช้ระดับเดียวกัน
ส่วนที่อยู่ลึกเท่ากันควรใช้ระดับหัวข้อเดียวกัน ส่วนย่อยสามส่วนที่อยู่ใต้หัวข้อเดียวกันควรเป็น h3 ทั้งหมดและอยู่เคียงข้างกัน
<h2>Menu</h2>
<h3>Starters</h3>
<h3>Mains</h3>
<h3>Desserts</h3>เริ่มต่ำกว่า h1
หัวข้อของส่วนแรกคือ h2 ซึ่งอยู่ถัดลงมาจาก h1 เพียงหนึ่งระดับ โครงร่างจะขยายลงด้านล่างจากรากเดียวนี้
การซ้อนลึกพบไม่บ่อย
หน้าเว็บส่วนใหญ่หยุดที่ประมาณ h3 หรือ h4 หากคุณใช้ h6 อยู่บ่อยครั้ง เนื้อหาอาจควรแบ่งเป็นส่วนที่เรียบง่ายและไม่ลึกมากขึ้น
ระดับที่ว่างทำให้สับสน
อย่าเพิ่ม h3 ที่ไม่มีเนื้อหาอยู่ด้านล่างเพียงเพื่อให้ถึงระดับนั้น ทุกหัวข้อควรนำเสนอเนื้อหาจริงที่ตามมา
ทดสอบด้วยการอ่านตัวเลข
อ่านหัวข้อของคุณออกเสียงโดยพูดเฉพาะตัวเลข ลำดับ 1, 2, 3, 2, 3 จะลื่นไหล แต่การเปลี่ยนจาก 2 เป็น 4 อย่างกะทันหันเผยให้เห็น ระดับที่ถูกข้าม
ตรวจสอบอย่างรวดเร็ว
คุณมี h2 อยู่หนึ่งรายการ ระดับที่ถูกต้องสำหรับส่วนย่อยภายในคือระดับใด
ทบทวน
คุณได้เรียนรู้ให้ลดระดับหัวข้อทีละหนึ่ง ไม่ข้ามระดับเมื่อลดลง และเลือกระดับตาม ลำดับชั้น ไม่ใช่ขนาด ✅
คำถามที่พบบ่อย
บทเรียน “ลำดับระดับการซ้อนโดยไม่ข้ามขั้น” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ลำดับระดับการซ้อนโดยไม่ข้ามขั้น” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ลำดับระดับการซ้อนโดยไม่ข้ามขั้น”
เรียงจาก h2 ไป h3 ตามลำดับ เพื่อให้โครงร่างยังเป็นเหตุเป็นผล คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ลำดับระดับการซ้อนโดยไม่ข้ามขั้น” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ใช้ h1 เพียงหนึ่งรายการต่อหน้า: ตั้งชื่อหัวข้อหลัก
- ลำดับระดับการซ้อนโดยไม่ข้ามขั้น
- หัวข้อคือการนำทาง ไม่ใช่แค่ข้อความตัวใหญ่
- ตรวจโครงร่างหน้าด้วยการฟัง