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

<ol> (Ordered List) ใน HTML5 ใช้สำหรับสร้างรายการที่เรียงลำดับ โดยจะแสดงหมายเลข หรือตัวอักษรนำหน้ารายการ ซึ่งสามารถกำหนดรูปแบบและการจัดลำดับได้หลายแบบตามความต้องการของผู้ใช้งาน

รูปแบบการใช้งาน <ol> ใน HTML5

การสร้างลิสต์แบบเรียงลำดับพื้นฐาน แต่ละรายการจะเริ่มต้นด้วย <li> (List Item)

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

ผลลัพธ์

1. Item 1
2. Item 2
3. Item 3

การกำหนดลำดับที่เริ่มต้น สามารถใช้แอตทริบิวต์ start เพื่อเริ่มต้นจากหมายเลขที่ต้องการได้

<ol start="5">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

ผลลัพธ์

5. Item 1
6. Item 2
7. Item 3

การกำหนดประเภทตัวอักษรที่ใช้ในลิสต์ ใช้แอตทริบิวต์ type เพื่อเปลี่ยนรูปแบบการเรียงลำดับ สามารถเลือกได้ดังนี้:

• 1 (หมายเลข): 1, 2, 3, …
• A (ตัวอักษรพิมพ์ใหญ่): A, B, C, …
• a (ตัวอักษรพิมพ์เล็ก): a, b, c, …
• I (เลขโรมันพิมพ์ใหญ่): I, II, III, …
• i (เลขโรมันพิมพ์เล็ก): i, ii, iii, …

<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

ผลลัพธ์

1. Item 1
2. Item 2
3. Item 3

การสร้างลิสต์ซ้อนกัน (Nested List) สามารถซ้อนลิสต์ภายในลิสต์ได้ โดยใช้ทั้ง <ol> และ <ul> (Unordered List)

<ol>
  <li>Item 1
    <ol>
      <li>Subitem 1.1</li>
      <li>Subitem 1.2</li>
    </ol>
  </li>
  <li>Item 2</li>
</ol>

ผลลัพธ์

1. Item 1
   1. Subitem 1.1
   2. Subitem 1.2
2. Item 2

การใช้แอตทริบิวต์ reversed เพื่อให้การเรียงลำดับเป็นแบบย้อนกลับ (จากมากไปน้อย)

<ol reversed>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

ผลลัพธ์

1. Item 1
2. Item 2
3. Item 3

การประยุกต์ใช้งาน <ol>

• ใช้ในแบบฟอร์มการกรอกข้อมูล โดยระบุขั้นตอนต่าง ๆ เช่น ขั้นตอนการสมัคร
• ใช้ในเว็บไซต์ที่มีเนื้อหาสอนวิธีการ (How-to) เช่น ขั้นตอนการติดตั้งโปรแกรม
• ใช้ในงานนำเสนอที่ต้องการแสดงรายการที่เป็นลำดับชั้นสำคัญ เช่น ขั้นตอนการทำงาน

การใช้ <ol> นั้นช่วยให้ข้อมูลเรียงลำดับอย่างชัดเจนและเหมาะสำหรับเนื้อหาที่ต้องการแสดงลำดับหรือความสำคัญตามขั้นตอน