HTML Lists ช่วยให้นักพัฒนาเว็บสามารถจัดกลุ่ม “รายการข้อมูลที่เกี่ยวข้องกัน” ให้อยู่ในรูปแบบที่อ่านง่ายและเป็นระเบียบมากขึ้น
ตัวอย่างเบื้องต้นของ HTML Lists
ตัวอย่างต่อไปนี้แสดงทั้งรายการแบบไม่เรียงลำดับ <ul> และรายการแบบเรียงลำดับ <ol>
An Unordered HTML List
- Coffee
- Tea
- Milk
An Ordered HTML List
- Coffee
- Tea
- Milk
Unordered HTML List
Unordered HTML List เริ่มต้นด้วยแท็ก
<ul>
แต่ละรายการจะใช้แท็ก <li> รายการจะถูกแสดงด้วย สัญลักษณ์แสดงหัวข้อย่อย (Bullet) ตามค่าเริ่มต้น เป็นวงกลมสีดำเล็ก ๆ
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
Ordered HTML List เริ่มต้นด้วยแท็ก <ol>
แต่ละรายการใช้แท็ก <li> เช่นเดียวกัน
รายการจะถูกทำเครื่องหมายด้วย ตัวเลขเรียงลำดับ ตามค่าเริ่มต้น (
1, 2, 3, …)
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML Description List ใช้สำหรับสร้าง “คำศัพท์พร้อมคำอธิบาย”
ประกอบด้วยแท็กดังนี้:
<dl>– ใช้กำหนดรายการคำอธิบาย (Description List)<dt>– ใช้กำหนดชื่อคำศัพท์<dd>– ใช้อธิบายรายละเอียดของคำศัพท์
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
แท็กรายการ HTML
| Tag | คำอธิบาย |
|---|---|
| <ul> | ใช้กำหนด Unordered List |
| <ol> | ใช้กำหนด Ordered List |
| <li> | ใช้กำหนด List Item |
| <dl> | ใช้กำหนด Description List |
| <dt> | ใช้กำหนด Description List |
| <dd> | ใช้กำหนดคำอธิบายใน Description List |