รายการใน HTML: คู่มือขั้นตอนต่อขั้นตอน

แท็กรายการใน HTML ใช้สร้างรายการในหน้าเว็บ สามารถสร้างได้ 3 ประเภท ได้แก่ รายการลำดับ (ordered), รายการไม่มีลำดับ (unordered), และรายการคำอธิบาย (description)

เมื่อสร้างหน้าเว็บ คุณอาจต้องการนำเสนอข้อมูลเป็นรายการที่จัดรูปแบบดี เช่น รายชื่อนักเรียน หรือรายการบทความบล็อก

ใน HTML มีฟังก์ชันสร้างรายการในตัว บทช่วยสอนนี้จะครอบคลุมประเภทรายการและวิธีการนำไปใช้

ประเภทรายการใน HTML

มี 3 ประเภท แต่ละประเภทมีวัตถุประสงค์และโค้ดเฉพาะ:

• Ordered list: ใช้สร้างรายการที่มีลำดับเฉพาะ
• Unordered list: ใช้สร้างรายการที่ไม่มีลำดับ
• Description list: ใช้สร้างรายการพร้อมคำอธิบาย

รายการสามารถวางได้ทุกส่วนของหน้าเว็บ ไม่ว่าจะอยู่ในข้อความ หลังขึ้นบรรทัดใหม่ หรือซ้อนในรายการอื่น (nested list) มาเข้าใจวิธีสร้างทั้ง 3 ประเภทกัน

รายการลำดับ (Ordered Lists)

Ordered lists ใช้เมื่อลำดับของรายการสำคัญ เช่น ขั้นตอนทำอาหารที่ต้องทำตามลำดับ เป็นรายการที่มีตัวเลข

ใช้แท็ก <ol> และแต่ละรายการใช้ <li> ตัวอย่าง:

<ol> <li>ผสมแป้งสาลี 100 กรัม ไข่ 2 ฟอง นม 300 มล. และน้ำมันทานตะวัน 1 ช้อนโต๊ะในชาม</li> <li>พักแป้ง 30 นาที</li> <li>ตั้งกระทะขนาดกลางไฟปานกลาง ทาเนื้อที่ด้วยกระดาษทาน้ำมัน</li> <li>เทแป้งลงกระทะ ทาแต่ละด้าน 1 นาที</li> </ol>

ตัวอย่างข้างต้นเป็นสูตรทำแพนเค้ก แต่ละขั้นตอนต้องทำตามลำดับ จึงใช้ ordered list ผลลัพธ์:

รายการลำดับเริ่มที่ 1 และเพิ่มขึ้นเรื่อยๆ หากต้องการเริ่มต้นที่หมายเลขอื่น ใช้แอตทริบิวต์ start:

<ol start="5"> <li>ยกแพนเค้กใส่จาน (ทำซ้ำขั้นตอน 2-4 หากทำหลายชิ้น)</li> <li>ทาเนย ซอสเมเปิ้ล มะนาว หรือท็อปปิ้งอื่นๆ</li> <li>ทานแพนเค้กให้อร่อย!</li> </ol>

รายการใหม่จะแสดงดังนี้:

รายการไม่มีลำดับ (Unordered Lists)

หากต้องการสร้างรายการที่ลำดับไม่สำคัญ ใช้แท็ก <ul> แต่ละรายการยังคงใช้ <li> ตัวอย่าง:

<ul> <li>อเล็กซ์</li> <li>แคโรล</li> <li>ลูซี่</li> <li>ชอว์น</li> </ul>

รายการจะแสดงดังนี้:

รายการคำอธิบาย (Description Lists)

เมื่อต้องการเพิ่มคำอธิบายแต่ละรายการ เช่น รายชื่อนักเรียนพร้อมเกรด ใช้ description lists สร้างด้วย <dl> รายการหลักใช้ <dt> และคำอธิบายใช้ <dd>

ตัวอย่าง:

<dl> <dt>Economy Class</dt> <dd>ที่นั่งมาตรฐาน ไม่มีบริการอาหาร</dd> <dt>First Class</dt> <dd>ที่นั่งหรู มีบริการอาหารพิเศษ</dd> </dl>

โค้ดจะส่งคืนรายการดังนี้:

ชื่อคลาสเครื่องบินแสดงเป็นรายการ และคำอธิบายอยู่ใต้แต่ละรายการ เลื่อนเข้าเพื่อแยกจากรายการหลัก

สรุป

รายการเป็นแท็กสำคัญใน HTML ช่วยให้นักพัฒนานำเสนอข้อมูลได้ชัดเจน อ่านง่าย และควบคุมโครงสร้างข้อมูลได้ดีขึ้น

บทช่วยสอนนี้แยกประเภทรายการใน HTML และวิธีสร้างทั้ง 3 แบบ: ordered (แท็ก li ol), unordered (ul li), และ description (dt dd) ตอนนี้คุณสร้างรายการใน HTML ได้อย่างมืออาชีพแล้ว!