HTML Lists

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

HTML lists ช่วยให้นักพัฒนาเว็บจัดกลุ่มชุดของรายการที่เกี่ยวข้องกันในรายการ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

</body>
</html>

Unordered HTML List

Unordered HTML List เริ่มต้นด้วย<ul>แท็ก แต่ละรายการเริ่มต้นด้วย <li>แท็ก

รายการจะถูกทำเครื่องหมายด้วยสัญลักษณ์แสดงหัวข้อย่อย (วงกลมสีดำเล็กๆ) ตามค่าเริ่มต้น:

ตัวอย่าง 

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

Ordered HTML List

Ordered HTML List เริ่มต้นด้วย <ol>แท็ก แต่ละรายการเริ่มต้นด้วย<li>แท็ก

รายการจะถูกทำเครื่องหมายด้วยตัวเลขตามค่าเริ่มต้น:

ตัวอย่าง 

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

HTML Description Lists

HTML Description Lists คือรายการคำศัพท์พร้อมคำอธิบายของแต่ละคำศัพท์

แท็ก <dl> กำหนดรายการคำอธิบาย <dt> แท็กกำหนดคำ (ชื่อ) และ<dd> แท็กอธิบายแต่ละคำ:

ตัวอย่าง 

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

แท็กรายการ HTML

Tagคำอธิบาย
<ul>ใช้กำหนด unordered list
<ol>ใช้กำหนด ordered list
<li>ใช้กำหนด list item
<dl>ใช้กำหนด description list
<dt>ใช้กำหนด description list
<dd>ใช้กำหนดคำอธิบายใน description list
< บทเรียนก่อนหน้า
บทเรียนถัดไป >