XHTML เว็บไซท์แบบสะอาด

การเขียนเว็บแบบเรียงลำดับความสำคัญ ของข้อมูลในโครงสร้างถือเป็นปัจจัยหลัก ที่สำคัญที่ XHTML designer ทุกคนควรพึงกระทำ และพึงระวัง ในเรื่องการใช้ tag xhtml ให้ถูกกับข้อมูลที่นำเสนอ

h1 หรือ Header Level 1 ถือเป็น Block Element ที่เป็น text module ที่สำคัญที่สุดของ xhtml เลยก็ว่าได้

แล้วเราจะมองข้ามมันไปได้ยังไงหว่า และที่รองลงมา คือ h2-h6 และ h ใน XHTML 2.0 ที่จะมีเพิ่มเข้ามา

p หรือ paragraph เอาไว้ใช้จัดการกับตัวหนังสือ ที่ถูกแบ่งออกเป็นย่อหน้า สามารถใช้ inline elements อย่าง span, strong, em เข้าร่วมด้วยอย่างเมามัน

สำหรับการทำเมนู ไม่ว่าจะแนวตั้งหรือแนวนอน ในตอนนี้ ul, li (Unordered list, list) ถือเป็น elements ที่นิยมใช้กัน ก่อนที่ จะเปลี่ยนไปใช้ Nl หรือ Navigation แทนใน XHTML 2.0 เช่นกัน (nl สามารถใช้ใน Opera, Firefox และบราวเซอร์ใหม่ๆ อื่นๆ ยกเว้น ไออี 6 ส่วน 7 ผมยังไม่ลอง)

แล้ว OL หละ ทำไมไม่เอามาทำเป็นเมนูแทน ul มันก็สั่งได้เหมือนกัน

อย่างที่เคยเล่าให้ฟังครับ ol คือ Ordered List แตกต่างจาก Unordered List ตรงที่อันนึงมันเป็นลิสต์แบบตามลำดับขั้น แต่อีกอัน มันไม่ใช่ จึงเห็นเขาใช้ ul มาทำเมนู มากกว่าใช้ ol แต่ในเชิงความสำคัญทางโครงสร้างภาษา XHTML ทาง ol ถูกจัดอันดับความสำคัญไว้มากกว่า

จึงพึงใช้ให้ถูกตาม กาละ และเทศะ

การใช้ div หลายคนยังบ้าพลัง ปล่อย div เข้าใส้กันกระจาย หารู้ไม่ว่ามันไม่จำเป็น

Div อยู่ใน text module ก็จริง แต่มันเป็น block element และลักษณะการใช้สอยของมันเพียงแค่ เอาไว้วางโครงสร้างหลักให้กับหน้าเว็บแค่นั้น ใช้มาก ไม่ดี เปลือง

ใน XHTML 2.0 เราจะได้เห็นการใช้ div น้อยลงไปกว่านี้เพราะว่า จะมี section ซึ่งใช้ทำงานในลักษณะคล้ายกัน แต่เป็นหน่วยย่อยลงมาจาก div

เช่น ในหน้าเว็บที่แบ่งเป็น 2 คอลัมน์ มีส่วนย่อยของข้อมูลไม่มาก

ปกติเราเขียน

<div>

<div>

คอลัมน์ที่ 1

</div>

<div>

คอลัมน์ที่ 1

</div>

</div>

ใน xhtml 2.0 จะเปลี่ยนไปตามความเหมาะสมเป็น

<div>

<section>

คอลัมน์ที่ 1

</ section >

< section >

คอลัมน์ที่ 1

</ section >

</div>

เพราะฉะนั้น div จำมีความจำเป็นแค่ วางโครงสร้าง และไม่ใช่คำตอบสุดท้าย

ลองมาดูตัวอย่าง ง่ายๆ กับการเขียน หน้าเว็บธรรมดาแบบ XHTML 1.1 ดูครับ

***หมายเหตุ ตัวอย่างนี้ ไม่สามารถใช้ได้กับบราวเซอร์ ตระกูล M$IE ไม่ว่าจะ 6 หรือที่ว่าใหม่ๆ อย่าง 7

แนะนำ และให้ใช้ Firefox, Opera หรือ Safari นะครับ

ตัวอย่างแบบที่ 1 หน้าเว็บแบบไม่มี CSS เป็น XHTML 1.1+(2.0)

ตัวอย่างที่ 2 เมื่อนำ CSS เข้ามาใช้ในหน้าเว็บ

ปล. ผมเขียน CSS แบบ XHTML Selector นะครับ ไม่ต้องสงสัยว่า ทำไมมันไม่มี คลาส หรือ ไอดี