XHTML

DIV (Division)

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

การใช้ p ถึง inline elements อย่าง span, strong และ em

เมื่อถึงเวลาที่ต้องพูดถึง ความหมายในเชิงลึก อันถึงขั้นที่ต้องให้ซึ้ง กับพระธรรมคำของของ xhtml แล้ว การใช้ <p>, <span>, <strong> หรือ <em> นั้น จริงๆ เขานำไปใช้กันยังไง หรือว่าเอาไปประยุกต์ใช้กันยังไง ทุกๆ Element มีความหมายในตัวของมันนะครับ สุ่มห้าสุ่มหกไป ไม่ดี

เมื่อถึงเวลาที่ต้องพูดถึง ความหมายในเชิงลึก อันถึงขั้นที่ต้องให้ซึ้ง กับพระธรรมคำของของ xhtml แล้ว การใช้ <p>, <span>, <strong> หรือ <em> นั้น จริงๆ เขานำไปใช้กันยังไง หรือว่าเอาไปประยุกต์ใช้กันยังไง ทุกๆ Element มีความหมายในตัวของมันนะครับ สุ่มห้าสุ่มหกไป ไม่ดี

สำหรับใครที่ยังไม่กระจ่างแจ้งกับการใช้ ผมขอแยกแยะประเด็นและความสำคัญหลักๆ ของแต่ละ Element เป็นข้อๆ นะขอรับ

1.<p> (Paragraph)

ความหมายของการใช้งาน

ความหมายตามตัวครับ “ย่อหน้า” เมื่อใดก็ตามที่มีการย่อหน้าใหม่ เราควรใช้ <p> เป็นตัวแบ่งเนื้อหาในแต่ละย่อหน้านั้นๆ

คุณลักษณะ

เป็น Element ที่อยู่ในหมวด Structural Module ซึ่งแสดงผลเป็น Block Element ด้วย และสามารถ ใช้xhtml elements ในตระกูล Content Model แบบ Text | List | blockcode | blockquote | pre | table ใส่เข้าไปข้างในได้ แต่ไม่สามารถ เอา <p> ซ้อนเข้าไปในตัวของมันเองได้

2.<span>, <strong> และ <em>

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 3 (สร่างเมา)

ถ้าเราจะสร้างตารางสักอัน โดยที่ไม่ต้องใช้ table แล้วเราสามารถใช้อะไรได้บ้าง ในความเป็นจริงอย่างที่เคยบอกกล่าวกันไว้ ถ้าข้อมูลอันไหนมันแสดงผลเป็นตาราง มันก็ควรที่จะเป็น table tag แต่ ถ้ามันดันเปิดดูกับ Devices อื่นๆ แล้วมันมีปัญหา แล้วเราจะใช้มันทำไมหละ

เปลี่ยนใจมาใช้ div แทน table ตอนที่ 2 (เมา DIVs)

เมา div(s) หลายคนอาจจะเคยเป็น เพราะผมก็เคยเมามาก่อน การเมา div มันไม่เหมือนการเมาเบียร์เท่าไหร่ เพราะเมาแล้วไร้ประโยชน์ แต่ได้ประสบการณ์ แต่ว่าประสบการณ์อย่างนี้ ผมไม่อยากให้เพื่อนๆ พี่ๆ น้องๆ ลุง ป้า น้า อา มาเมากะผมด้วย เพราะน่าจะแนะนำกันได้ไม่มากก็น้อย

การเปลี่ยนใจจาก table มา div ก็เหมือนจะรู้จักแต่ div เท่านั้นที่ผมจำได้ในตอนแรกๆ ที่ผมเขียน css+xhtml ผม div กระจายวายป่วงมากๆ เช่น แค่การทำตัวหนังสือใหญ่ๆ เป็น header ผมก็จะใช้

html, head, title, style, body

Html อันนี้ คงไม่ต้องอธิบายมากนะครับ เขียน html มันต้องประกาศเป็น html ดิใช่มั้ยครับ ส่วน แอทริบิวของ xmlns เขาบอกมามันควรเป็นของ

<html xmlns="http://www.w3.org/1999/xhtml">

โดยเขียนไว้ อย่างนี้

<html xmlns="http://www.w3.org/1999/xhtml">

……………………………

</html>

Head

ส่วนนี้คือของสงวน ถ้าอยากใส่อะไรลงไปก็ตรงนี้เลยครับ เช่น <meta> พวก description ต่างๆ และที่สำคัญ ระบบเสิร์ชเอ็นจิน มันจะเข้ามา ป้วนเปี้ยนแถวๆ นี้แหละ

เหนือจินตนาการ กับ XHTML Layout Creator

มันไม่ใช่เรื่องง่าย ผมยอมรับและไม่ได้ขู่ว่ามันยาก เอางี้แล้วกัน บอกแบบทื่อๆ ไปเลยว่า มันไม่ยากเลยสักนิดที่จะนั่งเขียน XHTML

แบบคนทำงานด้านเว็บดีไซน์โดยไม่จำเป็นต้องพึ่ง หน้าดีไซน์ ของ Adobe Dreamweaver เลย อาศัยเขียนโค้ดล้วนๆ บางคนคิดว่ามันยาก โดยที่ยังไม่ลองพยายามหัด หรือฝึกตัวเองเลย

มันจะยากไปไหน มันไม่ได้ยากไปไหนครับ แต่ผมคิดว่าเราไม่ยอมเดินหนีจากความยากลำบากที่ค้างคาอยู่นั่นต่างหาก คือปัญหา

ปัญหาที่ยังคงถกเถียงกันว่า งาน CSS XHTML มันเป็นงานของใครกันแน่ ระหว่าง โปรแกรมเมอร์ หรือ ดีไซเนอร์ ผมตอบตามแบบฉบับของผมเลย ว่า ไม่ต้องเอางานทั้ง 2 อย่างนี้ให้โปรแกรมเมอร์ หรือดีไซเนอร์ ที่มีอยู่ทำ

ไปจ้าง CSS Designer + XHTML Layout Creator มาดีกว่า

Back to Top