ใน HTML มีเอลิเมนต์รายการ 3 ประเภท:
- Unordered lists (ที่พบบ่อยที่สุด)
- Ordered lists
- Description lists
Unordered Lists (รายการแบบไม่มีลำดับ)
Unordered lists ถูกกำหนดด้วยเอลิเมนต์ <ul> และแต่ละรายการภายในถูกกำหนดด้วยเอลิเมนต์ <li>:
<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>ผลลัพธ์:
- Apple
- Banana
- Orange
โดยค่าเริ่มต้น Unordered lists จัดสไตล์ด้วยจุดกลม แต่สามารถปรับแต่งได้ด้วย CSS
Ordered Lists (รายการแบบมีลำดับ)
Ordered lists ถูกกำหนดด้วยเอลิเมนต์ <ol> และแต่ละรายการภายในถูกกำหนดด้วยเอลิเมนต์ <li>:
<ol> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ol>ผลลัพธ์:
- Apple
- Banana
- Orange
โดยค่าเริ่มต้น Ordered lists แสดงเป็นตัวเลข แต่สามารถปรับแต่งได้ด้วย CSS
Description Lists (รายการคำอธิบาย)
Description lists ทำงานต่างจาก ordered และ unordered lists มาก
นี่คือวิธีการทำงาน:
- เอลิเมนต์
<dl>กำหนดรายการคำอธิบาย (และเป็นเอลิเมนต์พาเรนต์) - เอลิเมนต์
<dt>กำหนดคำ (ชื่อ) ภายในรายการคำอธิบาย (และเป็นลูกของเอลิเมนต์<dl>) - เอลิเมนต์
<dd>ให้คำอธิบาย นิยาม หรือค่าสำหรับคำในรายการคำอธิบาย (<dt>) ที่เพิ่งมาก่อนหน้า (และเป็นลูกของเอลิเมนต์<dl>เช่นกัน)
ตัวอย่าง:
<dl> <dt>African Elephant</dt> <dd>The worlds largest living land animal.</dd> <dt>Giraffe</dt> <dd>The tallest living animal on Earth.</dd> <dt>Blue Whale</dt> <dd>The largest animal ever (as we know it).</dd> </dl>ผลลัพธ์:
- African Elephant
- The worlds largest living land animal.
- Giraffe
- The tallest living animal on Earth.
- Blue Whale
- The largest animal ever (as we know it).
Description lists นادرาใช้ใน HTML สมัยใหม่ กรณีการใช้งานทั่วไปที่เคยเห็นคือการสร้างกลอสซารี (glossary) หรือแสดงเมตาดาต้า — อย่างไรก็ตาม มีหลายวิธีอื่นในการทำใน HTML
