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

HTML5 การใช้งาน li Tag

ใน HTML5 แท็ก <li> (list item) ใช้สำหรับกำหนดรายการในรายการแบบลำดับ (ordered list) หรือไม่มีลำดับ (unordered list) โดยสามารถนำไปใช้ร่วมกับแท็ก <ul> (unordered list) และ <ol> (ordered list) ได้ตามลักษณะของรายการที่ต้องการแสดงผล

การใช้ <li> กับ <ul> (รายการที่ไม่มีลำดับ)

แท็ก <ul> ใช้สำหรับแสดงรายการที่ไม่ต้องเรียงลำดับ เช่น รายการสิ่งของหรือข้อมูลที่ไม่มีลำดับก่อนหลัง โดยรายการแต่ละรายการจะอยู่ภายในแท็ก <li>

HTML
<ul>
  <li>แอปเปิ้ล</li>
  <li>กล้วย</li>
  <li>ส้ม</li>
</ul>

ผลลัพธ์จะแสดงรายการที่มีเครื่องหมายจุดกลม (bullet points)

  • แอปเปิ้ล
  • กล้วย
  • ส้ม

การใช้ <li> กับ <ol> (รายการที่มีลำดับ)

แท็ก <ol> ใช้สำหรับรายการที่ต้องการเรียงลำดับ เช่น รายการขั้นตอนการทำงาน หรืออันดับต่างๆ โดยรายการแต่ละรายการจะอยู่ใน <li>

HTML
<ol>
  <li>ตื่นนอน</li>
  <li>แปรงฟัน</li>
  <li>ทานอาหารเช้า</li>
</ol>

ผลลัพธ์จะแสดงรายการที่มีลำดับหมายเลข

  1. ตื่นนอน
  2. แปรงฟัน
  3. ทานอาหารเช้า

การซ้อนรายการ <li> หลายระดับ

สามารถนำรายการ <ul> หรือ <ol> ซ้อนภายใน <li> ได้ เพื่อสร้างรายการย่อยในแต่ละรายการ เช่น รายการที่มีหัวข้อหลักและหัวข้อย่อย

HTML
<ul>
  <li>ผลไม้
    <ul>
      <li>แอปเปิ้ล</li>
      <li>กล้วย</li>
    </ul>
  </li>
  <li>เครื่องดื่ม
    <ul>
      <li>กาแฟ</li>
      <li>น้ำชา</li>
    </ul>
  </li>
</ul>

ผลลัพธ์จะแสดงรายการหลักและรายการย่อยที่อยู่ภายใน

  • ผลไม้
    • แอปเปิ้ล
    • กล้วย
  • เครื่องดื่ม
    • กาแฟ
    • น้ำชา

การใช้ <li> ในการทำเมนูนำทาง (Navigation Menu)

แท็ก <li> สามารถนำไปประยุกต์ใช้ในการสร้างเมนูนำทาง โดยใช้ร่วมกับแท็ก <a> เพื่อสร้างลิงก์

HTML
<ul>
  <li><a href="#home">หน้าหลัก</a></li>
  <li><a href="#about">เกี่ยวกับเรา</a></li>
  <li><a href="#contact">ติดต่อเรา</a></li>
</ul>

เมนูนี้จะแสดงลิงก์ที่สามารถคลิกเพื่อไปยังหน้าอื่น ๆ ของเว็บไซต์

  • หน้าหลัก
  • เกี่ยวกับเรา
  • ติดต่อเรา

การใช้ <li> ในการสร้างรายการแบบกำหนดเอง

เราสามารถใช้ CSS เพื่อเปลี่ยนรูปแบบการแสดงผลของ <li> ได้ เช่น การเปลี่ยนเครื่องหมายจุดกลม (bullet points) หรือการจัดตำแหน่ง

ตัวอย่างการเปลี่ยนสัญลักษณ์

HTML
<ul style="list-style-type: square;">
  <li>แอปเปิ้ล</li>
  <li>กล้วย</li>
  <li>ส้ม</li>
</ul>

รายการนี้จะแสดงเครื่องหมายเป็นรูปสี่เหลี่ยมแทนจุดกลม: ■ แอปเปิ้ล

  • แอปเปิ้ล
  • กล้วย
  • ส้ม

ตัวอย่างการจัดตำแหน่ง

HTML
<ul style="list-style-position: inside;">
  <li>แอปเปิ้ล</li>
  <li>กล้วย</li>
  <li>ส้ม</li>
</ul>

รายการนี้จะแสดงผลให้เครื่องหมายรายการชิดด้านในของข้อความมากขึ้น

  • แอปเปิ้ล
  • กล้วย
  • ส้ม

แท็ก <li> ใน HTML5 จึงมีความยืดหยุ่นและสามารถประยุกต์ใช้ได้ในหลายรูปแบบ ไม่ว่าจะเป็นการสร้างรายการแบบลำดับ รายการย่อย หรือการนำไปใช้กับเมนูนำทาง ทำให้ผู้ใช้งานสามารถจัดการเนื้อหาในเว็บเพจได้อย่างมีระเบียบและชัดเจน

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

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