Lists

ลิสต์ปรากฏอยู่ทุกที่ในงานออกแบบ UI — เมนู navigation รายการ feature แบบ bullet ขั้นตอนแบบทีละสเต็ป รายการส่วนผสม ผลการค้นหา HTML มีลิสต์ให้คุณสองชนิดสำหรับเนื้อหา และอีกหนึ่งชนิดสำหรับคู่คำอธิบาย ทั้งหมดสร้างขึ้นจากโครงสร้างที่เรียบง่ายและซ้อนกันได้

ลิสต์แบบไม่มีลำดับ (Unordered list)

ลิสต์แบบไม่มีลำดับ (<ul>) คือกลุ่มของรายการที่ลำดับไม่สำคัญ browser จะแสดงเป็น bullet point โดยค่าเริ่มต้น ใช้กับรายการ feature ส่วนผสม ลิงก์ nav — อะไรก็ตามที่การสลับลำดับรายการไม่เปลี่ยนความหมาย

<ul>
  <li>Sketch</li>
  <li>Figma</li>
  <li>Framer</li>
</ul>

ลิสต์แบบมีลำดับ (Ordered list)

ลิสต์แบบมีลำดับ (<ol>) คือลำดับที่ ลำดับมีความสำคัญ browser จะใส่หมายเลขให้รายการโดยอัตโนมัติ ใช้กับขั้นตอนในกระบวนการ การจัดอันดับ สูตรอาหาร หรือคำแนะนำ

<ol>
  <li>Open a new Figma file</li>
  <li>Set up your frame</li>
  <li>Add a grid</li>
</ol>

ทั้งสองชนิดใช้ <li> — list item — สำหรับแต่ละรายการ และ <li> จะต้องเป็น direct child ของ <ul> หรือ <ol> เสมอ

การซ้อนลิสต์

คุณสามารถวางลิสต์ไว้ภายใน <li> เพื่อสร้างรายการย่อย — เหมือน sub-layer ใน Figma:

<ul>
  <li>Design tools
    <ul>
      <li>Figma</li>
      <li>Sketch</li>
    </ul>
  </li>
  <li>Prototyping tools</li>
</ul>

หนึ่งในแพตเทิร์น HTML ที่พบบ่อยที่สุดที่คุณจะเจอคือเมนู navigation ที่สร้างจากลิสต์แบบไม่มีลำดับ ลิสต์สื่อสารว่า “นี่คือรายการที่เกี่ยวข้องกันและมีความสำคัญเท่ากัน” จากนั้น CSS จะลบ bullet ออกและจัดเรียงในแนวนอน

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<hr />
<h3>My design process</h3>
<ol>
  <li>Discover — user research and problem framing</li>
  <li>Define — synthesize insights into a design brief</li>
  <li>Develop — ideate, prototype, and test</li>
  <li>Deliver — handoff to engineering</li>
</ol>

ลองเพิ่มรายการที่ห้าลงในลิสต์แบบมีลำดับดู สังเกตว่า browser ใส่หมายเลขให้ใหม่โดยอัตโนมัติ — คุณไม่ต้องไปแตะตัวเลขเองเลย

💡 Navigation ควรเป็นลิสต์

การใช้ <ul> สำหรับ navigation ไม่ใช่แค่ธรรมเนียมปฏิบัติ — แต่สื่อสารโครงสร้าง screen reader จะประกาศว่า “list, 4 items” ก่อนอ่านลิงก์ ซึ่งช่วยให้ผู้ใช้เข้าใจว่ามีตัวเลือก navigation กี่ตัว และข้ามไปได้อย่างรวดเร็ว ส่วนแถวของ <a> tag เดี่ยว ๆ ไม่ให้สัญญาณแบบนั้นเลย การห่อลิงก์ nav ไว้ใน <ul> คือนิสัยเล็ก ๆ ที่สร้างความแตกต่างได้มาก

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ใช้ paragraph คั่นด้วย line break แทน <ul>/<ol> จริง ทำให้ screen reader ไม่รู้ว่าเป็น list
ลืมว่า nested list ต้องมี structure ที่ถูกต้อง

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “รายการ bullet” ธรรมดา แต่ developer เห็นว่า semantic list ทำให้ screen reader ประกาศจำนวนไอเทมได้ (เช่น “list, 5 items”)

💡 ตัวอย่างจากของจริง

Notion แสดง nested list และ toggle list ที่ map ตรงกับ <ul>/<ol> ที่ซ้อนกันจริงใน HTML