วิธีใช้รายการ HTML (

,
,

)

ใน HTML มีองค์ประกอบรายการ 3 ประเภท:

• รายการไม่เรียงลำดับ (ที่พบบ่อยที่สุด)
• รายการสั่งซื้อ
• รายการคำอธิบาย

รายการที่ไม่เรียงลำดับ

รายการที่ไม่เรียงลำดับถูกกำหนดด้วย <ul> องค์ประกอบและแต่ละรายการภายในถูกกำหนดด้วย <li> องค์ประกอบ:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

ผลลัพธ์:

• แอปเปิ้ล
• กล้วย
• สีส้ม

โดยค่าเริ่มต้น รายการที่ไม่เรียงลำดับจะถูกจัดรูปแบบด้วยสัญลักษณ์แสดงหัวข้อย่อยแบบวงกลม แต่สามารถปรับแต่งได้ด้วย CSS

รายการที่สั่งซื้อ

รายการที่เรียงลำดับถูกกำหนดด้วย <ol> องค์ประกอบและแต่ละรายการภายในถูกกำหนดด้วย <li> องค์ประกอบ:

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ol>

ผลลัพธ์:

1. แอปเปิ้ล
2. กล้วย
3. สีส้ม

โดยค่าเริ่มต้น รายการที่เรียงลำดับจะแสดงเป็นตัวเลข แต่สามารถปรับแต่งได้ด้วย CSS

รายการคำอธิบาย

รายการคำอธิบายทำงานต่างจากรายการที่เรียงลำดับและไม่เรียงลำดับมาก

วิธีการทำงาน:

• ตัว <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>

ผลลัพธ์:

ช้างแอฟริกา

สัตว์บกที่มีชีวิตที่ใหญ่ที่สุดในโลก

ยีราฟ

สัตว์ที่สูงที่สุดในโลก

ปลาวาฬสีน้ำเงิน

สัตว์ที่ใหญ่ที่สุดเท่าที่เคยมีมา (อย่างที่เรารู้)

รายการคำอธิบายมักไม่ค่อยใช้ใน HTML สมัยใหม่ กรณีการใช้งานที่พบบ่อยที่สุดที่ฉันเคยเห็นคือการสร้างอภิธานศัพท์บางประเภทหรือเพื่อแสดงข้อมูลเมตา อย่างไรก็ตาม มีวิธีอื่นอีกมากมายในการทำเช่นนี้ใน HTML