<div> เป็น generic container ใน HTML ใช้จัดกลุ่ม elements ร่วมกัน เพื่อให้ style ได้ด้วย CSS div elements ว่างโดยค่าเริ่มต้น และต้องเติม HTML elements เข้าไปจึงจะทำงาน แท็ก <div> มาคู่กัน 1 เปิด 1 ปิด:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; font-size: large; } .first { width: 500px; border: 1px solid black; padding: 20px } .square { width: 100%; height: 250px; color: white; border: none; } .blue { background-color: royalblue; border: none; } .purple { background-color: purple; border: none; } </style> </head> <body> <div class="first"> <h4>I'm a div that is holding two smaller divs.</h4> <div class="square blue">1</div> <div class="square purple">2</div> </div> </body> </html>
สำคัญที่สุด: <div> tag ไม่ใช่ semantic HTML element หมายถึงไม่ชัดเจนว่า div ทำอะไรจากแท็กเดียว (ต่างจาก <caption>, <address>, <section> ฯลฯ)
หากใช้มากเกินไป อาจนำไปสู่ปัญหา accessibility สำหรับ screen readers ใช้ <div> tags เป็นทางเลือกสุดท้าย เมื่อไม่มี semantic HTML element ที่เหมาะสมกว่า
<div> container เป็น block-level element จะใช้ความกว้างเต็ม viewport เว้นแต่ควบคุมด้วย CSS หรือ inline-styling นอกจากนี้ มี line break ก่อนและหลัง เว้นแต่เปลี่ยน display property เป็น inline หรือ flex
เรื่อง layout divs ยืดหยุ่น ได้ nested กัน แต่ <div> จะทำลาย paragraphs – อย่า nest <div> ภายใน <p> นอกจากนี้ มี anomaly แปลกๆ เมื่อใส่ <div> ใน headline tags (<h1>, <h2> ฯลฯ) ดูเหมือน <h1> ชนะและ <div> ถูกเพิกเฉย
Attributes
HTML <div> elements เข้าถึง event และ global attributes ของ HTML Event attributes ใช้เมื่อผู้ใช้โต้ตอบเว็บ เช่น onclick, onmouseover Global attributes พร้อมใช้กับทุก HTML elements รายการเต็มอยู่ที่ Mozilla Developer Network
วิธีจัดสไตล์
จัดสไตล์ <div> ง่าย ทำได้หลายวิธี Inline styling เพิ่ม style attribute ใน <div> พร้อม properties และ values เป็น string:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inline Styling</title> <body> <div style="width:500px;border: 3px solid black; padding: 20px;"> <h4>I'm a div that is holding two smaller divs.</h4> <div style="background-color: royalblue; border: none;">1</div> <div style="background-color: purple; border: none;">2</div> </div> </body> </html>
จัดสไตล์ใน <style> tag ใน <head> หรือ external stylesheet ได้ ที่นี่ class หรือ id attribute ของ <div> เข้ามามีบทบาท
Classes ใช้กับหลาย elements ที่ต้องการสไตล์เดียวกัน id ใช้ได้ครั้งเดียวในเอกสาร HTML คิดว่า: หลายนักเรียนกลุ่มเดียวกัน อายุ ครู วิชา เหมือนกัน แต่แต่ละคนมี id ส่วนตัวอธิบายตัวตน
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; font-size: large; } .first { width: 500px; border: 3px solid black; padding: 20px } .square { width: 100%; height: 250px; color: white; border: none; } #blue { background-color: royalblue; border: none; } #purple { background-color: purple; border: none; } </style> </head> <body> <div class="first"> <h4>I'm a div that is holding two smaller divs.</h4> <div id="blue" class="square">1</div> <div id="purple" class="square">2</div> </div> </body> </html>
class และ id attribute ใช้พร้อมกันบน <div> เดียวกันได้ id specific กว่า class ดังนั้นสไตล์เฉพาะ div นั้น ใช้ id เพื่อ override class styling
สรุป
วันนี้เรียนรู้ <div> คืออะไร แอตทริบิวต์คืออะไร และการจัดสไตล์ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ display property ที่ส่งผลต่อ <div> containers ดูบทความ CareerKarma เรื่อง box model และ flexbox model
