ในขั้นต้นของการคิดวิเคราะห์ข้อมูลที่จะนำมาทำเป็น list ในรูปแบบต่างๆ ความเข้าใจในพื้นฐานของความเป็น list คือสิ่งสำคัญ เราจะรู้ได้อย่างไรว่าอันไหนคือ list ที่ต้องเรียงลำดับ (ol) อันไหนคือ list ที่ไม่ต้องเรียงลำดับ (ul) หรืออันไหนคือ list ของข้อมูลที่มีขอบข่ายของหัวข้อและการบรรยายที่กว้างและมากออกไป (dl)

เนื้อหาในบทความนี้เราจะมาดูกันว่าเราจะเลือกใช้ Element กับข้อมูลที่เราต้องการนำเสนอให้เหมาะสมอย่างไร

List ทั้ง 3 รูปแบบ

1. ol หรือ ordered list คือ list ที่ต้องการนำเสนอแบบเรียงลำดับ เช่น ข้อ 1,2,3,… ไปเรื่อยๆ

ตัวอย่างการใช้

<h1> ข้อดีของการทำเว็บแบบ Height Accessibility </h1>
<p> การทำเว็บเพื่อให้ง่ายและมีประสิทธิภาพการเข้าถึงข้อมูล  แบบสุดยอด มีประโยชน์เป็นข้อๆ ดังนี้  </p>
<ol>
    <li>  สามารถทำให้หน้าเว็บมีคุณค่ามากกว่าเดิม  </li>
<li>  Robots ชอบใจและแวะเวียนมาเยี่ยมบ่อยกว่าเดิม  </li>
<li>  เว็บถูกหลักอนามัยเหมาะสำหรับการเข้าถึงทุกรูปแบบ  </li>
<li>  ฯลฯ </li>
</ol>

การแสดงผล Ol

ข้อมูลที่เขียนขึ้นข้างต้นจะถูกนำเสนอออกมาในลักษณะ header ของ h1, description ของ paragraph ของ p และข้อมูลที่เป็น list ที่ถูกเรียงเป็นข้อๆ 1,2,3,4… ของ ol นั่นเอง

2. ul หรือ unordered list คือ list ที่ไม่ต้องการการเรียงลำดับ แต่เน้นการนำเสนอเพื่อสร้างความเข้าใจเป็นหลัก โดยจาก ol ที่มีเลขหน้า ค่าปกติพื้นฐานจะถูกเปลี่ยนมาเป็น bullet (•) นำหน้าแทน

ตัวอย่างการใช้ ul

<h1> เอกสารที่ต้องเตรียมให้พร้อมเมื่อต้องเข้าร่วมสัมมนา  </h1>
<p> ผู้เข้าร่วมฟังการสัมมนาในครั้งนี้  ควรจะมีอุปกรณ์ส่วนตัวที่ต้องเตรียมมา เว้นแต่ว่าหามิได้ </p>
<ul>
    <li>  ถุงยางอนามัย  </li>
    <li>  ปืน </li>
    <li>  กางเกงยีนส์  </li>
    <li>  มะละกอ </li>
</ul>

การแสดงผล Ul

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

จาก list ทั้งสองแบบที่กล่าวมาข้างต้น การนำเสนอข้อมูลจะถูกใช้โดย <li> หรือ list ซึ่งเป็น Definition ของทั้ง ol และ ul นั่นเอง

ในเรื่องต่อไป เราจะมาดูการใช้ dl dt dd กันครับ