HTML div คืออะไร วิธีใช้ และตัวอย่าง

div เป็นแท็กหนึ่งในภาษา HTML ใช้สำหรับจัดรูปแบบการแสดงผลของข้อมูลบนหน้าเว็บไซต์ ทำหน้าที่แบ่งข้อมูลแต่ละส่วน ทำให้เป็นระเบียบ และสามารถกำหนดความสวยงามให้กับ div ได้โดยอาศัย CSS ภายใน div สามารถมี elements หรือวัตถุต่างๆ ได้ เช่น ตัวอักษร รูปภาพ ช่องกรอกข้อมูล เป็นต้น

 

ประโยชน์ ของการใช้ div HTML

1. div ช่วยการจัดกลุ่มการแสดงผลข้อมูลบนหน้าเว็บไซต์ มีประสิทธิภาพ

2. div ทำให้การเคลื่อนย้าย หรือจัดตำแหน่งวัตถุทั้งหมดในกลุ่ม ทำได้ง่าย

3. div รองรับการทำงานร่วมกับ CSS และ JavaScript

4. div ทำให้เราออกแบบโครงสร้างเว็บไซต์ที่ซับซ้อนได้ เนื่องจากภายใน div สามารถมี div ซ้อนกันได้ไม่จำกัด

 

ตัวอย่าง รูปแบบของคำสั่ง div

<div>
	เนื้อหา A
	วัตถุ B
	...
</div>

การใช้งาน div ทำได้ง่ายๆ โดยการเปิดแท็ก <div> และใส่เนื้อหา หรือวัตถุต่างๆ ลงไป และปิดแท็ก div ด้วย </div>

 

ตัวอย่าง วิธีใช้ div ในภาษา HTML

<div>Header</div>
<div>Body</div>
<div>Footer</div>

จากตัวอย่างเป็นการใช้ div แบบง่ายๆ เพื่อแบ่งส่วนของหน้าเว็บไซต์เป็น 3 ส่วนคือ Header, Body และ Footer โดย

1. div ส่วนของเนื้อหา Header ทำหน้าที่แสดงข้อมูลส่วนด้านบนของเว็บไซต์ เช่น โลโก้ หรือเมนู

2. div ส่วนของเนื้อหา Body ทำหน้าที่แสดงส่วนเนื้อหาของเว็บไซต์ เช่น เนื้อหาบทความ

3. div ส่วนของเนื้อหา Footer ทำหน้าที่แสดงส่วนท้ายของเว็บไซต์ เช่น ข้อความสงวนลิขสิทธิ์

 

ตัวอย่าง วิธีใช้ div ในภาษา HTML ร่วมกับ CSS

<style>
#header {
    background-color: orange;
    text-align: center;
}
#body {
    background-color: while;
}
#footer {
    background-color: green;
    text-align: center;
}
</style>

<div id="header">Header</div>
<div id="body">Body</div>
<div id="footer">Footer</div>

ตัวอย่างนี้มีการใส่ CSS เพิ่มลงไปที่ div ทั้ง 3 โดยมีรายละเอียดดังนี้

1. สร้าง CSS id เท่ากับ #header ใส่สีพื้นหลังเป็นสีส้ม (orange) และกำหนดให้ข้อมูลอยู่ตรงกลาง จากนั้นนำไปใช้งานกับ div ด้วย <div id="header">

2. สร้าง CSS id เท่ากับ #bodyใส่สีพื้นหลังเป็นสีขาว (white) จากนั้นนำไปใช้งานกับ div ด้วย <div id="body">

3. สร้าง CSS id เท่ากับ #footer ใส่สีพื้นหลังเป็นสีเขียว (green) และกำหนดให้ข้อมูลอยู่ตรงกลาง จากนั้นนำไปใช้งานกับ div ด้วย <div id="footer">

 

ตัวอย่าง วิธีใช้ div ใน HTML แบบ div ซ้อน div

<div id="header">
    <div>Logo</div>
    <div>Menu</div>
</div>

ตัวอย่างนี้ div ที่ใหญ่สุดคือ <div id="header"> และภายใน div ดังกล่าวมี div อีก 2 อันที่มีข้อมูล Logo และ Menu การใช้ div ซ้อน div ช่วยทำให้เราออกแบบหน้าเว็บไซต์ได้ซับซ้อน และมีประสิทธิภาพมากยิ่งขึ้น

 

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