HTML กับ XHTML

กลับมาที่ html กับ xhtml กันต่อ สองภาษานี้คล้ายกันแต่ไม่เหมือนกันและถูกแยกออกเป็นคนละภาษา แต่สร้างขึ้นมาจากโครงสร้างภาษาเดียวกัน งงไหมครับ ถ้างง ก็นี่เลยครับ “สองภาษานี้เขียนไม่เหมือนกัน อย่าเอาไปผสมกัน” ง่ายๆ เลย ถึงแม้ว่า DOCTYPE

คำว่ามาตรฐานกับความนิยมในสองอย่างนั้นแตกต่างกันยังไงผมขอเล่าความสั้นๆ ก่อนนะครับ ว่า html กับ xhtml จะอยู่ร่วมโลกกันอย่างไร การจะเขียนอะไรลงไปในหน้าเอกสาร หรือหน้าเว็บนั้นให้เหลือบมองไปที่ DOCTYPE กันก่อนว่าเอกสารนั้นอยู่ภายใต้ภาษาอะไร ประเภทไหน ถึงแม้ว่าเราจะใช้ Adobe Dreamweaver ในการเขียนหน้าเอกสารขึ้นมาก็ตาม ขอให้ลืมการแสดงผลหน้าเอกสารของ IE6 และ IE7 ไปก่อน การที่เราเขียนเอกสาร วางโครงสร้างให้ถูกต้องตามหลักมาตรฐาน ใน User Agents ที่ได้มาตรฐานจะ Render หน้าเอกสารออกมาได้อย่างถูกต้อง แล้วทำไม IE แสดงผลไม่ถูกต้อง ก็เพราะว่า IE6 และ IE7 ผลิตขึ้นมาไม่ได้เข้าหลักมาตรฐานตามที่ W3C กำหนดนั่นไงหละครับ จึงแสดงผลหน้าเอกสารที่เขียนแบบ ผิดๆ ได้ แต่ Firefox หรือ Opera แสดงผลเพี้ยน ก็เพราะหน้าเอกสารเขียนผิด User Agents ทั้งสองที่ยึดหลักมาตรฐานก็แสดงผลออกมาผิดๆ นั่นเอง ในขณะเดียวกัน ที่ผ่านมา คนนิยมใช้ IE กันทั่วโลก ความถูกต้องจึงถูกละเลย จะไปสนใจบราวเซอร์อื่นทำไม ในเมื่อไออีแสดงผลได้ถูกต้องใช่ไหมครับ แต่เราลืมไปว่า สักวันข้างหน้าความจริงจะปรากฎ เฉกเช่นชั่วโมงนี้ เมื่อบราวเซอร์อื่นๆ ที่ไม่ใช่ ไออีเริ่มแย่งส่วนแบ่งทางการตลาดและคำว่า Web Standards เริ่มแพร่กระจาย อ้าแขนต้อนรับ Semantic Web เพื่อที่จะไปยุค Web 3.0 ยุคที่ความสำคัญของทุกอย่างไม่ว่าจะหน้าบ้านหรือหลังบ้านเท่าเทียมกันหมด เข้าถึงข้อมูลได้เหมือนๆ กัน

กลับมาที่ html กับ xhtml กันต่อ สองภาษานี้คล้ายกันแต่ไม่เหมือนกันและถูกแยกออกเป็นคนละภาษา แต่สร้างขึ้นมาจากโครงสร้างภาษาเดียวกัน งงไหมครับ ถ้างง ก็นี่เลยครับ “สองภาษานี้เขียนไม่เหมือนกัน อย่าเอาไปผสมกัน” ง่ายๆ เลย ถึงแม้ว่า DOCTYPE แบบ XHTML 1.0 Transitional จะอนุญาตให้เขียนผสมกันได้ก็ตามที ผมแนะนำว่าอย่าเอาไปผสมกัน เพราะมันจะทำให้เราดิ้นหนี html ไม่หลุดสักที เช่น XHTML 1.0 Transitional อนุญาตให้ใช้ <b></b> ได้ นั่นหมายถึงสามารถทำตัวหนังสือให้เป็นตัวหนาได้ แต่ XHTML 1.0 Strict ไม่ยอม ไม่ยอมในที่นี้ไม่ได้หมายถึงไม่แสดงผล แสดงผลแต่ไม่ผ่านหลักมาตรฐาน และขั้นไม้ตาย ใน XHTML 1.1 หน้าเอกสารจะเออเร่อร์ ไม่แสดงผลใดๆ นอกจากหน้าเหลืองๆ แล้วบอกว่า คุณเขียน xhtml ผิด ให้กลับไปแก้ไข เหมือนตอนที่เราเขียน xml หรือคล้ายกับเราเขียนภาษาโปรแกรมใดๆ ที่ผิดตัวเดียวแล้วทั้งหน้าไม่แสดงผล เอาแค่ XHTML 1.1 ก่อน อย่าเพิ่งถามถึง XHTML 2.0 เดี๋ยวมันจะปวดหัวหนักไปอีก เพราะโครงสร้างเอกสารเปลี่ยนรูปแบบเกือบยกแก๊ง

ด้วยความที่เราใช้ ตารางออกแบบโครงสร้างหน้าเว็บมาช้านาน อาจจะเป็นสาเหตุหนึ่งที่ทำให้เกิดความล่าช้าในการปรับเปลี่ยนและที่สำคัญเรามี Deamweaver ช่วยในการสานฝัน สร้างเว็บอย่างง่าย ก็เลยทำให้เรื่องง่ายๆ กลายเป็นเรื่องยากในอนาคต พอมีคำว่า Tableless เข้ามาในโสต ก็เลยอยากจะไร้ตารางกับเขาบ้าง อะไรหละที่เอามาใช้แทตารางได้ มันคือ DIV ใช่หรือไม่ พระเจ้าจอร์ช เข้ารกเข้าพงไปแล้ว เหมือนผมตอนแรก DIV กระจาย ไม่ใช่ครับ ไม่ใช่ ถึงแม้ว่า DIV จะอยู่ใน Content Model ประเภท Flow หมายถึงว่าสามารถเอาอะไรก็ได้มาใส่ ก็ไม่ได้หมายความว่า เราจะเอา ตัวหนังสือมาวางใน DIV ตรงๆ ได้ ก่อนที่จะเอาตัวหนังสือมาวาง ต้องกลับไปดูก่อนว่า Text เหล่านั้น มันอยู่ใน Element ไหนที่ Structural Module ถูกวาง Content Model ให้เป็น Text สำหรับ Structural Module ที่ Content Model เป็น Text อย่างเดียวและสามารถใช้งานได้ตอนนี้ก็คือ Address, h1-h6 และ pre นั่นหมายถึง ทั้งสาม Elements นั้น สามารถใส่เข้าไปได้แค่หมวดที่อยู่ใน Text Module แต่ Structural Module ที่ Content Model ไม่ได้เป็น Text อย่างเดียว กล่าวคือสามารถเอาอย่างอื่นที่ไม่ได้อยู่ในตระกูล Text มาใส่ด้วย Elements ที่ว่านั้นก็คือ blockquote และ p

blockquote หรือ กล่องคำพูด จินตนาการถึงตอนที่เราอ่านนิตยสาร แล้วมีคำพูดตัวใหญ่ๆ พาดผ่านหน้ากระดาษ นั่นสามารถใช้ blockquote ในการนำเสนอข้อมูลได้ ใน blockquote สามารถใส่เข้าไปได้ทั้ง Text, Heading, Structural และ List (รายละเอียดอื่นๆ เดี๋ยวผมจะอธิบายเพิ่มเติมอีกที)

p หรือ ย่อหน้า สามารถนำ Text, List, blockquote,pre และ table มาใส่ได้ “อย่าเอา DIV ไปใส่ใน P” สิ่งอื่นๆ ที่สามารถเอาไปใส่ใน p ได้ก็จำพวก inline ทั้งหลาย ในเมื่อ List ( ul, ol และ dl สามารถใส่ใน p ได้ ก็ใช้ให้เกิดประโยชน์เถิด รวมตารางด้วยนะครับ)

ถือเป็นความน่าปวดหัวอีกอย่างที่เราต้องทำความเข้าใจ ไม่เช่นนั้นก็จะอยู่อย่างทำได้แต่ใช้ไม่เป็น อยู่ร่ำไป

รักกันชอบกันอย่าลืมแชร์นะครัช:
0

Back to Top

0 Responses to HTML กับ XHTML

  1. เก่ง

    ขอบคุณมากนะครับ กำลังสงสัยอยู่พอดีว่าแตกต่างกันอย่างไรบ้าง ทำงานมาตั้งนานเพิ่งเข้าใจ ขอบคุณมากนะครับ

    Reply

  2. tiamkeaw

    สวัสดีปีใหม่ครับ

    Reply

  3. CrazyAnix28

    พี่พรครับ List ที่เอามาใส่ใน p ได้นี่มีอะไรบ้างอ่ะพี่ หาแล้วงงๆ อ่ะ

    Reply

  4. พร อันทะ

    ol – ul – dl ใช้ได้ขอรับ

    Reply

  5. alninla

    p tag นี่มันมีค่า default ที่เกี่ยวกับเรื่อง magin เป็นอย่างไรบ้าง? พอจะทราบไหมครับ?

     
    โดยเฉพาะอย่างยิ่งกรณีที่ใช้ p โดดๆ ไม่มีการใส่ parameter ใดๆ เลยเนี่ยมันจะมี top/bottom margin เป็นเท่าไหร่ครับ?

    Reply

  6. susa

    จบแล้วเหรอ เหมือนมันค้างๆยังไงไม่รู้

     
    สรุปคืองงงงอยู่

    Reply

  7. ตั้มคุง

    แล้วมีที่ไหนที่บอกว่าแท็กไหนใช้ได้บ้างครับ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social media & sharing icons powered by UltimatelySocial