ประเภทของรายการ (Lists) ใน HTML

ใน HTML มีรายการ (Lists) 3 ประเภทหลัก:

• Unordered List <ul> - รายการแบบมีสัญลักษณ์ (bullet) ไม่มีลำดับเฉพาะ
• Ordered List <ol> - รายการแบบมีลำดับ (ตัวเลข/ตัวอักษร)
• Definition List <dl> - รายการแสดงนิยามของคำศัพท์ (<dt> term, <dd> definition)

เราสามารถซ้อน (nest) รายการเหล่านี้ได้ และจัดสไตล์ด้วยคุณสมบัติ CSS list-style

ไวยากรณ์ (Syntax)

<type of list>
  <li></li>
</type of list>

ตัวอย่างที่ 1: Nested ol และ ul

<!DOCTYPE html>
<html>
<head>
  <style>
    ul { background-color: papayawhip; list-style-type: square; font-style: italic; }
    ol { background-color: azure; }
  </style>
</head>
<body>
  <ol>
    <li>demo1</li>
    <li> demo 2
      <ul>
        <li>demo a</li>
        <li>demo b</li>
      </ul>
    </li>
    <li>demo 3</li>
  </ol>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Definition List (dl, dt, dd)

<!DOCTYPE html>
<html>
<head>
  <style>
    dt { font-weight: bold; font-style: italic; }
    dd { border: thin dotted; }
  </style>
</head>
<body>
  <h2>Programming Languages and Databases</h2>
  <dl>
    <dt>Java</dt> <dd>A programming language developed by James Gosling.</dd>
    <dt>C++</dt> <dd>A programming language developed by Bjarne Stroustrup.</dd>
    <dt>MySQL</dt> <dd>MySQL is an open-source relational database management system.</dd>
  </dl>
</body>
</html>

ผลลัพธ์

คุณสมบัติ CSS สำหรับ Lists

การซ้อนรายการ (Nesting)

• <ul> ใน <ol> หรือ <ol> ใน <ul> ได้
• Browser จะเปลี่ยน numbering style อัตโนมาติ (decimal → lower-alpha → lower-roman)
• ใช้ CSS list-style-type ควบคุมได้เอง