List หรือ ข้อมูลที่เป็นลิสต์ (ol, ul, dl)

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

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

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

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

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

การแสดงผล Ol

ข้อดีของการทำเว็บแบบ Height Accessibility

การทำเว็บเพื่อให้ง่ายและมีประสิทธิภาพการเข้าถึงข้อมูล แบบสุดยอด มีประโยชน์เป็นข้อๆ ดังนี้

  1. สามารถทำให้หน้าเว็บมีคุณค่ามากกว่าเดิม
  2. Robots ชอบใจและแวะเวียนมาเยี่ยมบ่อยกว่าเดิม
  3. เว็บถูกหลักอนามัยเหมาะสำหรับการเข้าถึงทุกรูปแบบ
  4. ฯลฯ

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

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

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

การแสดงผล Ul

เอกสารที่ต้องเตรียมให้พร้อมเมื่อต้องเข้าร่วมสัมมนา

ผู้เข้าร่วมฟังการสัมมนาในครั้งนี้ ควรจะมีอุปกรณ์ส่วนตัวที่ต้องเตรียมมา เว้นแต่ว่าหามิได้

  • ถุงยางอนามัย
  • ปืน
  • กางเกงยีนส์
  • มะละกอ

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

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

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

Back to Top

2 Responses to List หรือ ข้อมูลที่เป็นลิสต์ (ol, ul, dl)

  1. jommann

    อ่านแล้วทำให้เข้าใจขึ้นเยอะเลยครับ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top