การเรียงลำดับข้อมูลของ xhtml ในกล่องกับ div (+section), h1-h6 (h), p และ inline elements

อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง 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 เข้าร่วมและจะทดสอบการใส่ข้อมูลพร้อมรูปภาพ รอดูกันว่า จะออกมาหน้าตายังไง