วิธีใช้งาน Element <div> ใน HTML

เรียนรู้วิธีใช้งาน Element <div> ใน HTML

Element <div> เป็น Container Element แบบ Generic ใช้สำหรับแบ่ง จัดกลุ่ม และห่อหุ้มเนื้อหา

ควรใช้ <div> ก็ต่อเมื่อไม่มี Semantic HTML Element ใดเหมาะสมกับบริบท (หรือไม่แน่ใจ)

Semantic Markup (มาร์กอัปเชิงความหมาย) คือการใช้ HTML Element ที่บรรยายความหมาย/หน้าที่ของเนื้อหาภายใน <div> เป็น Element Generic/Non-semantic

กรณีการใช้งาน Element <div>

สมมติคุณเขียนโค้ด Modal Component แบบนำกลับมาใช้ได้ สำหรับเว็บไซต์ ส่งเสริมให้ผู้เยี่ยมชมสมัครรับข่าวสาร

ไม่มี Semantic HTML Tag ใดสำหรับ Component แบบนี้ จึงเป็นตัวอย่างที่สมบูรณ์ของการใช้ <div> แบบ Generic:

<div class="subscribe-modal"> <form id="contact" method="post" action=""> <fieldset> <h3>Subscribe to my Newsletter</h3> <input name="email" id="email" type="email" placeholder="Enter your email address here" required /> <input type="submit" name="submit" class="submit" value="Subscribe!" /> </fieldset> </form> </div>

<div> เป็นหนึ่งในแท็ก Container Element แท็ก Container ที่ใช้บ่อย:

<article>,<section>, <main> , <header>, <footer>,<form>.

หาก Element ใดข้างต้นเหมาะสมเป็น Container สำหรับเนื้อหาของคุณ ให้ใช้แท็กเหล่านั้นแทน <div> แบบ Generic

เพราะ Element ทั้งหมดข้างต้นเป็น Semantic Element Tags ในขณะที่ <div> เป็น Un-semantic Tag ไม่ให้บริบทเฉพาะเจาะจง

ข้อมูลที่ควรทราบเกี่ยวกับ Element <div>

คุณสามารถวางเนื้อหาประเภทใดก็ได้ภายใน <div>

แม้ Semantic Markup จะแนะนำ แต่ไม่บังคับสำหรับเบราว์เซอร์ในการเข้าใจและแสดงผล

อย่างไรก็ตาม หากใช้ Generic/Un-semantic HTML Element ในสถานการณ์ที่มี Semantic Tags ให้ใช้แล้ว อาจส่งผลลบต่อ SEO

โดยทั่วไป ผมใช้ <div> เมื่อไม่แน่ใจว่าจะใช้ Element ไหน เพราะชอบใช้ Generic Element มากกว่าใช้ Element ผิด นอกจากนี้ ไม่สามารถใช้ <div> ผิดได้จากมุมมองทางเทคนิค — เพียงแค่จากมุมมองเชิงความหมายเท่านั้น