TOC

This article is currently in the process of being translated into Thai (~98% done).

HTML Basics:

Lists

เราสามารถสร้างรายชื่อของส่วนผสมในการทำอาหาร, สารบัญของเอกสาร, หรือรายชื่อของอะไรก็แล้วแต่ใน HTML ด้วยการสร้างรายการ (List) การสร้างรายการ มี 2 ชนิด คือ แบบมีลำดับและแบบไม่มีลำดับ

แบบไม่มีลำดับนั้นจะมี tag เปิด <ul> ย่อมาจาก unordered list และทุกๆรายชื่อจะขึ้นต้นว่า <li> element ย่อมาจาก list item

<ul>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ul>

HTML นี้จะแสดงผลแบบไม่มีลำดับดังนี้

  • List item no. 1
  • List item no. 2
  • List item no. 3

ปกติแล้วจะใช้สัญลักษณ์ bullet point (ในที่นี้คือจุดวงกลมสีดำ) เราสามารถเปลี่ยนเป็นรูปอื่นได้โดยใช้ CCS

รายชื่อแบบมีลำดับจะแสดงผลดังนี้

  1. First list-item
  2. Second list-item
  3. Third list-item

แทนทีเราจะใช้ <ul> tag เราจะใช้ <ol> tag แทน ซึ่งย่อมาจาก ordered list

<ol>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ol>

นอกเหนือจากการใช้เป็นรายชื่อปกติแล้วยังสามารถนำมาใช้กับ menu และ navigation (ระบบนำทาง) ไปยังจุดสนใจ สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว ถึงแม้ว่า CSS styling (การแสดงผล) จะมีความผิดพลาด แต่ก็ยังสามารถใช้งานรายชื่อได้อยู่

สรุป

  • การสร้างรายการ มี 2 ชนิด คือ แบบมีลำดับแบบและไม่มีลำดับ
  • แบบมีลำดับจะใช้ <ol> tag
  • แบบไม่มีลำดับจะใช้ <ul> tag
  • ทุกๆรายชื่อจะขึ้นต้นด้วย <li> element
  • list element เป็นตัวเลือกอันดับแรกๆในการสร้างร navigation
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!