พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน List

ใน HTML5 การใช้งาน List (รายการ) เป็นเครื่องมือพื้นฐานที่ใช้ในการจัดลำดับข้อมูล ซึ่งสามารถแบ่งออกเป็น 3 ประเภทหลัก คือ

  1. Ordered List (รายการลำดับเลข): ใช้เมื่อต้องการแสดงรายการที่มีลำดับขั้นตอน ซึ่งรายการจะมีตัวเลขหรือลำดับเรียงตามอัตโนมัติ
  2. Unordered List (รายการแบบไม่เรียงลำดับ): ใช้เมื่อไม่ต้องการแสดงรายการที่มีลำดับ โดยทั่วไปจะมีเครื่องหมายจุด (bullet) แสดงอยู่หน้ารายการ
  3. Description List (รายการคำอธิบาย): ใช้สำหรับแสดงรายการที่ประกอบด้วยคำอธิบาย เช่น คำและความหมาย

Ordered List

Ordered List จะแสดงผลรายการโดยใช้ตัวเลขเรียงลำดับตามลำดับที่กำหนด

โครงสร้าง

HTML
<ol>
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
</ol>

ผลลัพธ์:

  1. รายการที่ 1
  2. รายการที่ 2
  3. รายการที่ 3

นอกจากนี้เรายังสามารถเปลี่ยนรูปแบบลำดับได้ด้วยการใช้แอตทริบิวต์ type เช่น

  • type="1": เรียงเป็นตัวเลข (ค่าเริ่มต้น)
  • type="A": เรียงเป็นตัวอักษรใหญ่ A, B, C
  • type="a": เรียงเป็นตัวอักษรเล็ก a, b, c
  • type="I": เรียงเป็นเลขโรมันใหญ่ I, II, III
  • type="i": เรียงเป็นเลขโรมันเล็ก i, ii, iii

ตัวอย่าง

HTML
<ol type="A">
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
</ol>

ผลลัพธ์

  1. รายการที่ 1
  2. รายการที่ 2
  3. รายการที่ 3

Unordered List

Unordered List ใช้สำหรับรายการที่ไม่ต้องการลำดับเฉพาะ สามารถใช้ได้หลากหลายรูปแบบ เช่น จุด (bullet) หรือเครื่องหมายอื่น ๆ

โครงสร้าง

HTML
<ul>
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
</ul>

ผลลัพธ์

  • รายการที่ 1
  • รายการที่ 2
  • รายการที่ 3

รูปแบบของจุด (bullet) สามารถเปลี่ยนได้โดยใช้แอตทริบิวต์ type หรือ CSS เช่น

  • circle: จุดกลมว่าง
  • square: สี่เหลี่ยมจัตุรัส
  • disc: จุดกลมเต็ม (ค่าเริ่มต้น)

ตัวอย่าง

HTML
<ul style="list-style-type: square;">
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
</ul>

ผลลัพธ์

  • รายการที่ 1
  • รายการที่ 2
  • รายการที่ 3

Description List

Description List ใช้สำหรับแสดงข้อมูลที่เป็นคู่ระหว่างคำและคำอธิบาย (เหมาะสำหรับการแสดงข้อมูลเชิงคำศัพท์หรือคำและความหมาย)

โครงสร้าง

HTML
<dl>
  <dt>HTML</dt>
  <dd>ภาษามาร์กอัพที่ใช้สำหรับสร้างเว็บไซต์</dd>
  <dt>CSS</dt>
  <dd>ใช้สำหรับการออกแบบและตกแต่งเว็บไซต์</dd>
</dl>

ผลลัพธ์

HTML
ภาษามาร์กอัพที่ใช้สำหรับสร้างเว็บไซต์
CSS
ใช้สำหรับการออกแบบและตกแต่งเว็บไซต์

การซ้อน List

HTML5 ยังสามารถซ้อนรายการได้ทั้งในรูปแบบ Ordered และ Unordered

ตัวอย่าง

HTML
<ul>
  <li>ผลไม้
    <ul>
      <li>แอปเปิล</li>
      <li>ส้ม</li>
      <li>กล้วย</li>
    </ul>
  </li>
  <li>สัตว์
    <ol type="i">
      <li>สุนัข</li>
      <li>แมว</li>
    </ol>
  </li>
</ul>

ผลลัพธ์

  • ผลไม้
    • แอปเปิล
    • ส้ม
    • กล้วย
  • สัตว์
    1. สุนัข
    2. แมว

การประยุกต์ใช้งาน List ในการออกแบบเว็บ

  • เมนูนำทาง (Navigation Menu): ใช้ ul สำหรับแสดงเมนู
  • รายการขั้นตอน (Step List): ใช้ ol เพื่อแสดงลำดับขั้นตอนการทำงาน
  • แสดงข้อมูลคู่คำอธิบาย (Glossary): ใช้ dl สำหรับแสดงรายการคำและคำอธิบาย

การใช้งาน List ใน HTML5 เป็นเครื่องมือสำคัญที่ช่วยในการจัดระเบียบข้อมูลในหน้าเว็บเพื่อให้ผู้อ่านเข้าใจง่ายและข้อมูลมีความเป็นระเบียบ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ