ในเอกสาร HTML มีรายการ 3 ประเภท ได้แก่ รายการไม่เรียงลำดับ (unordered), รายการเรียงลำดับ (ordered) และ รายการอธิบาย (description)
รายการ HTML ไม่เรียงลำดับ
กำหนดโดยใช้แท็ก <ul> โดยแต่ละรายการถูกล้อมรอบด้วยแท็ก <li>
ไวยากรณ์
<ul> <li>รายการ</li> <li>รายการ</li> <li>รายการ</li> </ul>
รายการ HTML เรียงลำดับ
กำหนดโดยใช้แท็ก <ol> โดยแต่ละรายการถูกล้อมรอบด้วยแท็ก <li>
ไวยากรณ์
<ol> <li>รายการ</li> <li>รายการ</li> <li>รายการ</li> </ol>
รายการ HTML อธิบาย
กำหนดโดยใช้แท็ก <dl> โดยแต่ละคำศัพท์ถูกล้อมรอบด้วย <dt> และคำอธิบายถูกล้อมรอบด้วย <dd>
ไวยากรณ์
<dl> <dt>คำศัพท์</dt> <dd>คำอธิบาย</dd> <dt>คำศัพท์</dt> <dd>คำอธิบาย</dd> </dl>
ตัวอย่าง
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
</style>
<body>
<h1>ตัวอย่าง HTML Lists</h1>
<h3>รายการไม่เรียงลำดับ</h3>
<ul>
<li>วิชาฟิสิกส์</li>
<li>วิชาเคมี</li>
<li>วิชาเศรษฐศาสตร์</li>
</ul>
<h3>รายการเรียงลำดับ</h3>
<ol>
<li>หนังสือฟิสิกส์ เล่ม 1</li>
<li>หนังสือฟิสิกส์ เล่ม 2</li>
<li>หนังสือฟิสิกส์ เล่ม 3</li>
</ol>
<h3>รายการอธิบาย</h3>
<dl>
<dt>หนังสือฟิสิกส์</dt>
<dd>- ครอบคลุมฟิสิกส์สมัยใหม่และฟิสิกส์ควอนตัม</dd>
<dt>หนังสือเคมี</dt>
<dd>- ครอบคลุมเคมีอินทรีย์ อินทรีย์ และเคมีฟิสิกส์</dd>
</dl>
</body>
</html>
ผลลัพธ์
แสดงตัวอย่างทั้ง 3 ประเภทของรายการ HTML พร้อมการจัดรูปแบบ
