อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง html กับ xhtml มันมีเพียงแค่วิสัยทัศน์ ที่ต่างกันออกไปและเพิ่มเติม เรื่องราวเชิงเทคนิคนิดหน่อย แต่มันทำให้ความหมาย xhtml เปลี่ยนแปลงไปมากมาย วันนี้ผมจะขอพูดถึงเรื่องกล่อง (div) 1 กล่องที่แยกข้อมูลออกเป็นสัดส่วน โดยในข้อมูลมีเนื้อหาหลักๆ ที่ถูกจัดวางไว้ใน element ของ xhtml อย่างเหมาะสม
เรามาดูข้อจำกัดของเทคโนโลยีกันก่อนว่า มันมีอะไรบ้างและเราจะเลือกใช้อะไรบ้าง
1. เมื่อมันเป็น xhtml 1.0
- div หรือ division ยังครองความเป็นเจ้าแห่งการแบ่งแยกดินแดนอยู่ เช่น เราต้องการกล่อง 2 กล่อง เรายังต้องใช้ div สองอัน
- div หรือ division มันสามารถเอาตัวหนังสือใส่เข้าไปโดดๆ ได้ เพราะมันยังอยู่ใน text module
- หรือ ถ้าเราต้องการกล่องสองกล่องซึ่งถูกจับยัดอยู่ในกล่องหลัก เพื่อทำดีไซน์ เราก็ต้องมี div ทั้งสิ้น 3 อัน (คือ 1 div หลักที่ครอบอยู่ และอีก 2 divs ที่เอาไว้แบ่งข้อมูลออกคนละส่วน บน-ล่าง/ซ้าย-ขวา)
- ที่เหลือ h1-h6, p และ inline element อื่นๆ ก็ใช้ไปตามความหมายและความเหมาะสมของเนื้อหา
ตัวอย่าง
<div>
<section>
</section>
<section>
</section>
</div>ใน xhtml 1.0 เมื่อเรานำ h1-h6 และ p เข้าไปรวมอยู่ด้วยก็จะเขียนได้เป็น
<div>
<div>
<h1></h1>
<p></p>
<h2></h2>
<p></p>
</div>
<div>
<h1></h1>
<p></p>
<h2></h2>
<p></p>
<h3></h3>
<p></p>
</div>
</div>ใน xhtml 2.0 เมื่อเรานำ h1-h และ p เข้าไปรวมอยู่ด้วยก็จะเขียนได้เป็น
<div>
<section>
<h1></h1>
<p></p>
<separator/>
<h2></h2>
<p></p>
</section>
<section>
<h1></h1>
<p></p>
<separator/>
<h2></h2>
<p></p>
<separator/>
<h3></h3>
<p></p>
</section>
</div>หมายเหตุ
- <separator/> คือการแบ่งส่วนของเนื้อหาแต่ละท่อน ที่ถูก separated แล้ว
- <br/> ถูกตัดทิ้งไปจาก xhtml 2 เพราะความหมายไม่ลึกซึ้งกินใจเพียงพอ
- <h></h> ถูกเพิ่มเข้ามาถือเป็น header ที่ไม่ได้ให้น้ำหนักในการเรียงลำดับ
บทความเพิ่มเติมส่วนต่อไป เดี๋ยวผมจะเขียนเพิ่มในมุมของการใช้ css เข้าร่วมและจะทดสอบการใส่ข้อมูลพร้อมรูปภาพ รอดูกันว่า จะออกมาหน้าตายังไง
ขอบคุณมากครับ ที่เขียนบทความมาให้อ่าน