DIV (Division)

Div หรือ Division อาจจะกำลังกลายเป็นชื่อเล่น ในการนำมาเรียกชื่อ การออกแบบเลย์เอ้าท์ หน้าเว็บด้วย XHTML + CSS แต่ทำไมผมจึงรู้สึก แปลกๆ พอได้ยินคนพูดถึงคำๆ นี้ เช่น เปลี่ยนจาก เทเบิล มาเป็น ดิฟ หรือเขียนดิฟ หรือเขียน ซีเอสเอสดิฟ มันวนเวียนอยู่ในหูตลอดเวลา ทำให้เกิดอาการสงสัยว่า แต่ละคนรวมทั้งผมด้วยเข้าใจหลักการอะไรผิดไปหรือเปล่า อย่า อย่าเพิ่งหาว่าคนอื่นเป็นจอมหลักการ ชีวิตมันต้องมีหลักการ บ้าง อย่าอาศัยอารมณ์ นำทางอย่างเดียวไม่ดี บางคนเห็นคนอื่น div แล้วก็อย่าง div บ้าง แต่ไม่รู้เลยว่าจริงๆ เขาพากัน div แบบไหน อันไหนควร div อันไหนไม่ควร ผมไม่ทราบว่าแต่ละคน ในขณะที่พูดกันอยู่นั้นว่า จะทำ ดิฟดีไซน์ แล้วเข้าใจคุณค่าและความหมายของคำว่า div กันอย่างไรบ้าง ลองมาดูกันเล่นๆ ครับ

Div หรือ ชื่อจริงมีนามว่า division คือ Element ของ XHTML

ความสามารถ คือ

การนำมาใช้แบ่งส่วนต่างๆ ของข้อมูลออกจากกัน

คุณสมบัติ คือ

ทำให้ข้อมูลนั้นถูกจัดวางเป็นส่วนๆ

ลักษณะทางโครงสร้างภาษา XHTML คือ

เป็น Structural Module

ลักษณะการนำไปใช้งาน คือ

เป็น Block Element และ Content Model เป็น Flow

Note

การแบ่งกลุ่มลักษณะการทำงานของ XHTML 1-1.1 ใช้การแบ่งโครงสร้างต่างกัน ถ้าคุณเข้าไปดูคุณลักษณะของ Division เวอร์ชั่น 1.1 จะเห็นว่า ลักษณะทางโครงสร้างของภาษามันจะยังเป็น Block Element ที่อยู่ใน Text Module แต่พอกลายเป็น XHTML 2.0 ค่าของ Division ใน XHTML 2.0 และหลายๆ อย่าง กลายเป็น Block Element ที่เป็น Structural Module (พอเอาไปรวมกับ CSS ขึ้นโครงเลย์เอ้าท์แล้ว เรียกว่า Box Model)

ในที่นี้ ผมจะพูดถึงกลางๆ ระหว่างทาง XHTML 1.0-2.0 ซึ่งมันต้องทำความเข้าใจให้ถ่องแท้ทั้งของเก่าและของใหม่

———-

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

จึงไม่ควรนำไปใช้แบบผิดหลักการและความสามารถที่โครงสร้างภาษากำหนดให้มา

เช่น การนำไปวางเลย์เอ้าหน้าเว็บ แบบ 3 แถว

• <div></div>
• <div></div>
• <div></div>

หรือ สามแถว ตรงกลาง สามคอลัมน์

XHTML 1.1

<div></div>

<div>

<div></div>

<div></div>

<div></div>

</div>

<div></div>

XHTML 2.0

เรื่องราวเล็กๆ น้อยๆ เหล่านี้ คงทำให้หลายคน เห็นความแตกต่างของความเข้าใจของตนเองได้มากยิ่งขึ้น แม้เพียงเล็กน้อยครับ