รายการ HTML:คำแนะนำทีละขั้นตอน

แท็กรายการ HTML ใช้เพื่อสร้างรายการบนหน้าเว็บ สามารถสร้างรายการได้สามประเภท ได้แก่ รายการที่เรียงลำดับ รายการที่ไม่เรียงลำดับ และรายการคำอธิบาย

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

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

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

มีรายการสามประเภทใน HTML และแต่ละรายการมีจุดประสงค์และรหัสเฉพาะ ดังต่อไปนี้:

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

รายการสามารถปรากฏในส่วนใดก็ได้ของหน้าเว็บ ไม่ว่าคุณจะวางไว้ในข้อความ หลังตัวแบ่งบรรทัด หรือแม้กระทั่งภายในรายการอื่นเพื่อสร้าง nested list . มาดูรายละเอียดวิธีสร้างรายการสามประเภทนี้ใน HTML .

รายการ HTML:สั่งซื้อ

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

Ordered list ใช้ <ol> และแต่ละรายการในรายการใช้ <li> แท็ก นี่คือตัวอย่างรายการสั่งซื้อ:

<ol>
	<li>Mix 100g plain flour, 2 eggs, 300ml milk, and 1tbsp sunflower oil in a bowl.</li>
	<li>Leave the mix to rest for 30 minutes.</li>
	<li>Set a medium-size frying pan over a medium heat and wipe it with oiled kitchen paper.</li>
	<li>Pour batter mixture into the pan and cook on each side for one minute.</li>
</ol>

ในตัวอย่างข้างต้น เราได้สร้างสูตรพื้นฐานสำหรับแพนเค้กแล้ว แต่ละขั้นตอนในรายการนี้ต้องเกิดขึ้นตามลำดับ เราจึงเลือกรายการที่เรียงลำดับ นี่คือผลลัพธ์ของรหัสของเรา:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

Ordered list เริ่มต้นด้วยหมายเลขหนึ่งและไปในลำดับจากน้อยไปมาก อย่างไรก็ตาม หากคุณต้องการให้รายการของคุณเริ่มต้นด้วยหมายเลขอื่น คุณสามารถใช้ start คุณลักษณะเช่นนี้:

<ol start="5">
	<li>Move the pancake onto a plate (repeat steps 2-4 if you are making multiple pancakes).</li>
	<li>Spread butter on your pancakes, maple syrup, lemon, or any other topping.</li>
	<li>Enjoy your pancakes!</li>
</ol>

รายการใหม่ของเรามีดังนี้:

รายการ HTML:ไม่เรียงลำดับ

หากคุณต้องการสร้างรายการที่ลำดับของรายการไม่สำคัญ คุณสามารถใช้ HTML unordered แท็กรายการ เราสามารถสร้าง unordered lists โดยใช้ <ul> และแต่ละรายการ เช่น ในรายการสั่งซื้อของเรา เริ่มต้นด้วย <li> แท็ก.

นี่คือตัวอย่าง unordered lists :

<ul>
	<li>Alex</li>
	<li>Carol</li>
	<li>Lucy</li>
	<li>Shawn</li>
</ul>

รายการของเราปรากฏดังนี้:

รายการ HTML:รายการคำอธิบาย

เมื่อคุณกำลังเขียนรายการ คุณอาจต้องการใส่คำอธิบายของแต่ละรายการในรายการของคุณ ตัวอย่างเช่น หากคุณมีรายชื่อนักเรียน คุณอาจต้องการเพิ่มเกรดของนักเรียน แต่ไม่ใช่ส่วนหนึ่งของข้อความหลัก

นั่นคือที่ Description list เข้ามาได้เลย Description list เป็นรายการที่มีคำอธิบายของแต่ละองค์ประกอบ Description list ถูกสร้างขึ้นโดยใช้ <dl> แท็ก องค์ประกอบหลักในรายการใช้ <dt> แท็กและคำจำกัดความใช้ <dd> แท็ก.

นี่คือตัวอย่าง Description list ใน HTML :

<dl>
	<dt>Economy Class</dt>
	<dd>Standard seats, no meal service.</dd>
	<dt>First Class</dt>
	<dd>Luxury seats, catered meal service.</dd>
</dl>

รหัสของเราส่งคืนรายการต่อไปนี้:

อย่างที่คุณเห็น ชื่อคลาสเครื่องบินจะปรากฏในรูปแบบรายการ และคำอธิบายสำหรับชื่อเหล่านั้นจะปรากฏใต้แต่ละรายการ คำอธิบายแต่ละรายการยังเยื้องซึ่งทำให้แตกต่างจากรายการ

บทสรุป

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

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