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

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

แท็ก <ul> (Unordered List) ใน HTML5 ใช้สำหรับการสร้างรายการแบบไม่เรียงลำดับ ซึ่งรายการจะถูกแสดงเป็นสัญลักษณ์หรือ bullet point แทนการเรียงลำดับด้วยตัวเลขหรืออักษร มีโครงสร้างพื้นฐานดังนี้

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
อธิบายการใช้งาน
  • <ul> ใช้เพื่อสร้างรายการแบบไม่เรียงลำดับ ซึ่งภายในจะมีแท็ก <li> (List Item) สำหรับกำหนดแต่ละรายการ
  • <li> ใช้สำหรับใส่รายการแต่ละข้อ
  • สัญลักษณ์ bullet point ของรายการ <ul> จะแสดงเป็นจุดกลมเล็กตามค่าเริ่มต้น แต่สามารถปรับเปลี่ยนรูปแบบได้

รูปแบบที่สามารถประยุกต์ใช้

รูปแบบการนำแท็ก <ul> ไปประยุกต์ใช้งานมีดังนี้

รายการพื้นฐาน รายการพื้นฐานจะใช้แท็ก <ul> ร่วมกับ <li> เพื่อสร้างรายการที่มีสัญลักษณ์เป็นจุดกลม (default)

HTML
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

การซ้อนรายการ สามารถซ้อนรายการภายในรายการได้ โดยการใช้ <ul> ซ้อนอยู่ภายใน <li>

HTML
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

การเปลี่ยนรูปแบบของสัญลักษณ์ bullet สามารถใช้ CSS เพื่อเปลี่ยนสัญลักษณ์ของรายการ เช่น การใช้ list-style-type เพื่อเปลี่ยนจากจุดกลมเป็นรูปแบบอื่น ๆ เช่น วงกลมเปิด (circle) หรือสี่เหลี่ยม (square)

HTML
<ul style="list-style-type: square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

การลบสัญลักษณ์ bullet สามารถใช้ CSS ลบสัญลักษณ์ bullet ออกไปได้ โดยการตั้งค่า list-style-type เป็น none

HTML
<ul style="list-style-type: none;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

การจัดรูปแบบรายการในแนวนอน ใช้ CSS เพื่อแสดงรายการในแนวนอน โดยใช้ display: inline; หรือ flexbox ก็สามารถทำได้

HTML
<ul style="list-style-type: none; display: flex; gap: 10px;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

การใช้ภาพแทนสัญลักษณ์ bullet สามารถใช้รูปภาพแทน bullet โดยใช้ list-style-image

HTML
<ul style="list-style-image: url('icon.png');">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

สรุป

แท็ก <ul> เป็นเครื่องมือสำคัญในการสร้างรายการที่ไม่เรียงลำดับใน HTML ซึ่งสามารถปรับแต่งและประยุกต์ใช้งานได้หลากหลาย ไม่ว่าจะเป็นการสร้างรายการซ้อน การเปลี่ยนรูปแบบของ bullet หรือการนำ CSS มาช่วยจัดเรียงให้สวยงามยิ่งขึ้น

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

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