Basic Content Tags

1. หัวข้อนี้คืออะไร

แท็กรายการ (List Tags) ใช้เมื่อข้อมูลควรถูกแสดงเป็นข้อ ๆ เพื่อให้อ่านง่ายและสแกนได้เร็ว แท็กหลักที่ต้องรู้มี 3 ตัว: - ul = รายการแบบไม่เรียงลำดับ (unordered list) - ol = รายการแบบเรียงลำดับ (ordered list) - li = รายการย่อย (list item) ที่อยู่ภายใน ul หรือ ol

2. ทำไมหัวข้อนี้สำคัญ

• ช่วยจัดข้อมูลให้เป็นระเบียบและอ่านง่ายขึ้นทันที
• ช่วยสื่อความหมายว่าข้อมูลนั้นมีลำดับหรือไม่มีลำดับ
• ลดความสับสนเมื่อข้อมูลมีหลายข้อในหัวข้อเดียวกัน
• ทำให้โครงสร้างเอกสาร HTML ชัดเจนและดูแลต่อได้ง่าย

3. ตัวอย่างจากชีวิตจริง

ลองนึกถึงสิ่งที่เราใช้ทุกวัน: - รายการซื้อของ มักไม่ต้องเรียงลำดับตายตัว จึงเหมาะกับ ul - ขั้นตอนทำอาหารต้องทำตามลำดับ จึงเหมาะกับ ol - แต่ละข้อในรายการ คือ li แนวคิดนี้เหมือนกันบนหน้าเว็บ: เลือกชนิดรายการตามความหมายของข้อมูล ไม่ใช่เลือกเพราะหน้าตาอย่างเดียว

4. แนวคิดหลักที่ต้องเข้าใจ

• ul ใช้กับข้อมูลที่เป็นข้อ ๆ แต่ไม่เน้นลำดับก่อนหลัง
• ol ใช้กับข้อมูลที่ต้องมีลำดับขั้นตอน
• li ใช้เป็นรายการย่อยภายใน ul หรือ ol เท่านั้น
• สามารถทำ nested list (รายการซ้อนรายการ) ได้ เมื่อข้อมูลมีโครงสร้างหลักและโครงสร้างย่อย
• การเลือก ul/ol ให้ตรงความหมาย จะทำให้เนื้อหาเข้าใจง่ายขึ้นทั้งคนอ่านและเครื่องมืออ่านหน้าเว็บ

5. การทำงานทีละขั้นตอน

• 1) ตัดสินใจก่อนว่าข้อมูลต้องมีลำดับหรือไม่
• 2) ถ้าไม่เน้นลำดับใช้ ul ถ้าเน้นลำดับใช้ ol
• 3) เพิ่ม li ภายในรายการตามจำนวนข้อที่ต้องการ
• 4) ถ้ามีหัวข้อย่อย ให้ซ้อนรายการภายใน li ของหัวข้อหลัก
• 5) เบราว์เซอร์จะแสดง bullet สำหรับ ul และเลขลำดับสำหรับ ol โดยอัตโนมัติ

6. ตัวอย่างเชิงเทคนิค / โค้ด

ตัวอย่างนี้แสดงทั้ง ul, ol และ nested list แบบง่าย

7. จุดที่ผู้เริ่มต้นมักสับสน

• ใช้ li โดยไม่มี ul หรือ ol ครอบอยู่
• เลือก ul/ol ไม่ตรงกับความหมายของข้อมูล
• สับสนเวลาทำ nested list ว่าต้องซ้อนภายใน li ของรายการหลัก
• ใช้ย่อหน้า (paragraph) หลายบรรทัดแทน list ทั้งที่ข้อมูลควรเป็นข้อ ๆ

8. เปรียบเทียบกับสิ่งที่ใกล้เคียง

9. สรุปท้ายบทแบบจำง่าย

• ข้อมูลเป็นข้อ ๆ ให้คิดถึง list ก่อน
• ul ใช้เมื่อไม่เน้นลำดับ, ol ใช้เมื่อมีลำดับ
• li ต้องอยู่ภายใน ul หรือ ol เสมอ
• nested list ใช้เมื่อข้อมูลมีโครงสร้างหลักและย่อย
• กฎสำคัญ: เลือกรายการตามความหมายของข้อมูล

10. Lab 1: สร้างรายการซื้อของ

ชื่อ Lab: รายการซื้อของในครัว เป้าหมาย: ใช้ ul และ li ให้ถูกต้อง โจทย์: ใน section#shopping-area ให้สร้าง ul ที่มี id="shopping-list" และมี li 3 ข้อคือ "นม", "ไข่", "ข้าวสาร" เงื่อนไข: ต้องใช้ ul (ไม่ใช่ ol) และมี li ครบ 3 ข้อ สิ่งที่ระบบควรตรวจ: selector count + text content แนวทางการคิด: สร้าง ul ก่อน แล้วเพิ่ม li ตามข้อความที่โจทย์กำหนด เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 2: สร้างลำดับขั้นตอน

ชื่อ Lab: ขั้นตอนชงกาแฟ เป้าหมาย: ใช้ ol และ li สำหรับข้อมูลที่มีลำดับ โจทย์: ใน article#coffee-steps ให้สร้าง ol id="step-list" พร้อม li 4 ข้อคือ "ต้มน้ำ", "ใส่กาแฟ", "เติมน้ำร้อน", "คนให้เข้ากัน" เงื่อนไข: ต้องใช้ ol และมีรายการครบ 4 ขั้นตอน สิ่งที่ระบบควรตรวจ: ชนิดของ list + จำนวนรายการ + text content แนวทางการคิด: คิดเป็นลำดับขั้นตอนก่อน แล้วใส่ข้อความตามลำดับจริง เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 3: สร้าง nested list แบบง่าย

ชื่อ Lab: แผนการเรียนแบบมีหัวข้อย่อย เป้าหมาย: สร้าง nested list ให้โครงสร้างถูกต้อง โจทย์: ใน section#study-plan ให้สร้าง ul id="main-topics" ที่มี li หลัก 2 ข้อ: - ข้อที่ 1 ข้อความ "HTML พื้นฐาน" และมี ol id="html-subtopics" ซ้อนอยู่ภายใน พร้อม li ย่อย 2 ข้อคือ "แท็กโครงสร้าง" และ "แท็กเนื้อหาพื้นฐาน" - ข้อที่ 2 ข้อความ "CSS พื้นฐาน" เงื่อนไข: ต้องมี ul หลัก 1 ชุด, ol ย่อย 1 ชุด, และจำนวน li ให้ตรงโจทย์ สิ่งที่ระบบควรตรวจ: selector + selector count + source text + browser runtime แนวทางการคิด: สร้าง list หลักก่อน แล้วซ้อน list ย่อยใน li ของหัวข้อแรก เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 4: สร้างรายการหัวข้อพื้นฐาน

ชื่อ Lab: รายการหัวข้อแบบไม่เรียงลำดับ เป้าหมาย: ใช้ ul และ li สร้างรายการหัวข้อพื้นฐานให้ครบ โจทย์: ใน section id="frontend-tools" ให้สร้าง ul id="tool-list" ที่มี li 3 ตัวตามลำดับนี้: - HTML - CSS - JavaScript เงื่อนไข: ต้องมี ul 1 ตัว และ li 3 ตัว ภายใน ul นั้น สิ่งที่ระบบควรตรวจ: selector exists + selector count + text content + browser runtime แนวทางการคิด: เริ่มจากสร้าง ul ก่อน แล้วเพิ่ม li ตามลำดับข้อความที่โจทย์กำหนด เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 5: สร้างรายการแบบเรียงลำดับพร้อมหัวข้อย่อย

ชื่อ Lab: รายการลำดับขั้นตอนและหัวข้อย่อย เป้าหมาย: ใช้ ol, ul และ li ร่วมกันเพื่อแสดงขั้นตอนและหัวข้อย่อย โจทย์: ใน section id="setup-steps" ให้สร้าง ol id="main-steps" ที่มี li 2 ข้อตามนี้: - ข้อแรก: "เตรียมโปรเจกต์" และมี ul id="project-items" ซ้อนอยู่ข้างใน โดยมี li 2 ตัวคือ "สร้างไฟล์ index.html" และ "เปิดในเบราว์เซอร์" - ข้อสอง: "เริ่มเขียนโค้ด" เงื่อนไข: ต้องมี ol หลัก 1 ตัว, ul ซ้อน 1 ตัว, li หลัก 2 ตัว และ li ย่อย 2 ตัว สิ่งที่ระบบควรตรวจ: selector exists + selector count + text content + browser runtime แนวทางการคิด: แยกก่อนว่าอะไรคือรายการหลัก และอะไรคือรายการย่อยที่อยู่ใต้ข้อแรก เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check

10. Lab 6: ซ่อมรายการที่ใช้แท็กผิดประเภท

ชื่อ Lab: แก้ list ที่ใช้ ul/ol ผิดความหมาย เป้าหมาย: ซ่อมโครงสร้างรายการให้เลือกใช้ ul และ ol ได้เหมาะกับบริบท โจทย์: จาก starter code ใน section id="daily-routine" ให้แก้ดังนี้: - เปลี่ยน ul id="steps-list" ให้เป็น ol id="steps-list" - ต้องมี li 3 ตัวตามลำดับนี้: "เปิดคอมพิวเตอร์", "เปิดโปรเจกต์", "เริ่มเขียนโค้ด" เงื่อนไข: ต้องไม่มี ul#steps-list เหลืออยู่ และต้องมี ol#steps-list 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists + selector count + source text + browser runtime แนวทางการคิด: ถ้าข้อมูลเป็นขั้นตอนที่มีลำดับ ควรใช้ ol แทน ul เฉลยตัวอย่าง: ดูได้หลังผ่านทุก check