อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง html กับ xhtml มันมีเพียงแค่วิสัยทัศน์ ที่ต่างกันออกไปและเพิ่มเติม เรื่องราวเชิงเทคนิคนิดหน่อย แต่มันทำให้ความหมาย xhtml เปลี่ยนแปลงไปมากมาย วันนี้ผมจะขอพูดถึงเรื่องกล่อง (div) 1 กล่องที่แยกข้อมูลออกเป็นสัดส่วน โดยในข้อมูลมีเนื้อหาหลักๆ ที่ถูกจัดวางไว้ใน element ของ xhtml อย่างเหมาะสม
เรามาดูข้อจำกัดของเทคโนโลยีกันก่อนว่า มันมีอะไรบ้างและเราจะเลือกใช้อะไรบ้าง
เมื่อถึงเวลาที่ต้องพูดถึง ความหมายในเชิงลึก อันถึงขั้นที่ต้องให้ซึ้ง กับพระธรรมคำของของ 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>
การให้ความสำคัญแก่หัวข้อ และการเลือกใช้ elements 1-6 ใน xhtml ถือได้ว่าสำคัญไม่น้อยเหมือนกันครับ ข้อดีอีกอย่างของการเลือกใช้ h สำหรับหัวข้อนั้นคือระบบเสิร์ชเอ็นจิ้นต่างๆ จะให้ความสำคัญกับข้อมูลที่อยู่ใน h1 ไล่ไปจนถึง h6 ก่อน ซึ่งเป็นการช่วยให้ bots ต่างๆ เข้าค้นหาข้อมูลในเว็บเราได้ง่ายขึ้นด้วยครับ
การนำไปใช้แค่เพียงพิมพ์
<h1>หัวข้อนี้สำคัญระดับพันล้าน</h1>
<h2>หัวข้อนี้สำคัญระดับร้อยล้าน</h2>
<h3>หัวข้อนี้สำคัญระดับล้าน</h3>
<h4>หัวข้อนี้สำคัญระดับแสน</h4>
<h5>หัวข้อนี้สำคัญระดับหมื่น</h5>
<h6>หัวข้อนี้สำคัญระดับพัน</h6>