HTML, XML, XHTML และ CSS คืออะไร ต่างกันอย่างไร

HTML, XML, XHTML และ CSS คืออะไร ต่างกันอย่างไร

HTML (Hyper Text Markup Language)

ภาษานี้คงคุ้นกันดีอยู่ในหมู่นักเขียนเว็บทั้งหลาย HTML ภาษานี้เป็นภาษาที่ Browser ส่วนใหญ่เข้าใจดีว่าคืออะไรและสามารถประมวลผลได้อย่างถูกต้อง Browser ส่วนมากนั้นจะรันบนคอมพิวเตอร์ที่มีหน่วยความจำมาก จึงไม่ค่อยเป็นปัญหามากนักในการประมวลผลแม้ว่าบางครั้งผู้เขียนโค้ดอาจเขียนโค้ดผิดพลาดก็ตาม แต่ Browser ก็สามารถเดาได้และแสดงผลได้อย่างถูกต้องเป็นส่วนมาก แต่ปัญหาก็คือ หากต้องการใส่แท็กใหม่ ๆ ลงไป เอกสาร HTML จะไม่สามารถประมวลผลได้ มันจะประมวลผลเฉพาะแท็กที่มันรู้จักเท่านั้น นั่นคือตัว HTML มีความจำกัด นอกจากนี้แล้วเอกสาร HTML ยังถูกเอาไปใช้อย่างผิดความหมายและผิดวัตถุประสงค์ ทำให้เอกสารมีความยุ่งยาก ทำความเข้าใจยาก ต้องใช้เวลามากในการเขียนหรือออกแบบเนื่องจากมีการปนกันของเนื้อหาและการตกแต่งเอกสาร เอกสาร HTML ส่วนมากจึงเกิดสภาพที่เรียกว่า malformed ซึ่งตรงข้ามกับคำว่า well-formed ซึ่งหมายถึง เอกสารมีความถูกต้อง ไม่มีข้อผิดพลาดและไม่ฝืนข้อกำหนดของตัว DTD
XML (eXtensible Markup Language)

ภาษานี้สร้างขึ้นมาเพื่อการสร้างเอกสารที่เรียบง่ายและเข้าใจได้ไม่ยาก เนื่องจาก HTML นั้นมีข้อจำกัดที่ว่าไม่สามารถเพิ่มแท็กใหม่ ๆ เข้าไปได้ ทำให้การสร้างเอกสารอาจไม่บรรลุวัตถุประสงค์ของผู้ที่จะให้ข้อมูล XML นั้นเป็นภาษาที่เราสามารถสร้างแท็กขึ้นมาเองได้ และเราสามารถสร้างเอกสาร DTD ขึ้นมาได้ด้วยเพื่อที่จะใช้เป็นข้อกำหนดว่าจะมีแท็กใดได้บ้าง จะเอาไปใช้อย่างไร เป็นต้น แม้ว่า Browser จะไม่เข้าใจวิธีการแสดงผลแท็กที่เราสร้างขึ้นเอง นั่นก็ไม่ใช่ปัญหา เนื่องจากว่า XML ไม่ได้ถูกสร้างขึ้นมาเพื่อการสร้างเว็บที่สวยงาม แต่เพื่อการทำเอกสารที่ให้ความหมายได้อย่างดี สื่อความหมายชัดเจนมากขึ้น และมักจะใช้ในการส่งข้อมูลซึ่งก็แล้วแต่ว่าเราจะสร้าง application อะไรมาทำการประมวลผลข้อมูลเหล่านี้และจะแสดงผลอย่างไร ข้อควรระวังคือ เอกสาร XML นั้นจะมีข้อผิดพลาดไม่ได้เลย หากมีความผิดพลาดอย่างเช่น ลืมปิดแท็ก หรือแท็กเปิดกับแท็กปิดไม่เหมือนกันหรือมีแท็กคาบเกี่ยวกัน มันจะไม่แสดงผลเลยและเราจะประมวลผลไม่ได้
XHTML (eXtensible Hyper Text Markup Language)

เป็นภาษาที่รวมเอาทั้ง HTML และ XML ไว้ด้วยกัน ประโยชน์ของมันคือการสร้างเว็บเพื่อการส่งข้อมูลทั่ว ๆ ไปอย่างหนึ่ง เพิ่มขีดความสามารถในการสร้างแท็กใหม่ ๆ ได้เองอย่างหนึ่ง (โดยที่เรากำหนดได้ด้วยว่าจะให้แท็กเหล่านั้นแสดงผลอย่างไร) รองรับภาษาอื่น ๆ ที่ใช้ XML เป็นฐาน เช่น (SVG, MathML, chemML, SMIL) อีกอย่างหนึ่งและสุดท้ายคือ รองรับเทคโนโลยีในอนาคตซึ่งจะมี XML เป็นบทบาทหลัก เนื่องจากว่าในปัจจุบันนี้ มีความพยายามที่จะเข้าถึงเว็บด้วยอุปกรณ์ที่ไม่ใช่คอมพิวเตอร์มากขึ้นเช่น โทรศัพท์มือถือ โปรแกรมเสียงสังเคราะห์ ทีวี เบรลล์ หรืออุปกรณ์พกพาอื่น ๆ แต่เนื่องจากอุปกรณ์เหล่านี้ มีขนาดเล็กและอาจมีหน่วยความจำไม่มาก จึงอาจไม่สามารถประมวลผล HTML แบบทั่ว ๆ ไปได้เพราะไม่มีความสามารถที่จะแก้ข้อผิดพลาดได้หากมีการเขียนโค้ดไม่ถูกต้อง XHTML จึงเป็นทางเลือกที่ดีที่สุด เนื่องจากว่าเอกสาร XHTML นั้นจะต้องมีลักษณะที่เรียกว่า well-formed ไม่มีข้อผิดพลาด มีการเปิดปิดแท็กอย่างถูกต้อง ฯลฯ จึงทำให้สามารถแสดงผลเอกสารนี้ได้อย่างง่ายดาย หากเอกสารไม่ถูกต้อง ก็อาจจะไม่แสดงผลไปเลย เหมือนกับเอกสาร XML
CSS(Cascading Style Sheet)

เนื่องจากมีการนำ HTML มาใช้ผิด ๆ กันมาก โดยเฉพาะการนำแท็กอย่างแท็ก font, b, i, u, big, small และแอททริบิวต์อย่างเช่น align, bgcolor, background, border ฯลฯ ซึ่งถูกใช้ไปในการตกแต่งเอกสาร ทำให้เอกสาร HTML มีความซับซ้อนมาก ใช้เวลามากในการเขียนหรือออกแบบ จึงได้มีการแนะนำภาษาใหม่ที่เรียกว่า CSS นี้ขึ้นมา หน้าที่ของภาษานี้ก็คือ การตกแต่งเอกสารของ HTML หรือ XHTML หรือ XML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ทั้งนี้ทั้งนั้นก็เพื่อลดการใช้ภาษา HTML ในการตกแต่งเอกสาร เพื่อให้เอกสาร HTML สะอาดขึ้น เข้าใจง่ายขึ้น แก้ไขง่ายและใช้เวลาน้อย CSS กับ HTML หรือ XHTML นั้นจะทำหน้าที่คนละอย่างกัน พร้อมกัน แต่ไม่รบกวนซึ่งกันและกันและแยกจากกันอย่างเด็ดขาด นั่นคือ HTML หรือ XHTML จะทำหน้าที่ในการวางโครงร่างเอกสารอย่างเป็นรูปแบบ ถูกต้อง เข้าใจง่าย ไม่ซับซ้อน ไม่มีการใช้แท็กผิดความหมาย ไม่เกี่ยวข้องกับการแสดงผล และ CSS จะทำหน้าที่ในการตกแต่งเอกสารให้สวยงาม CSS นั้นพัฒนาไปมากแล้ว สามารถทำได้ถึงขึ้นที่ว่า วางวัตถุซ้อนกันได้ กำหนดความโปร่งใสได้ หมุนตัวอักษรตามองศาที่เรากำหนดได้ ตอนนี้เรามี CSS 3.0 แล้ว แต่ว่า Browser ส่วนใหญ่ยังไม่สนับสนุน CSS 2.0 นั้นเป็นตัวที่เราใช้ในปัจจุบัน ข้อดีของ CSS อีกอย่างหนึ่งก็คือ มันสามารถกำหนดการแสดงผลให้กับอุปกรณ์ต่าง ๆ ได้ด้วย เช่น เราอาจต้องการให้แสดงผลในจอคอมพิวเตอร์อย่างหนึ่ง แสดงผลเวลาสั่งพิมพ์อีกอย่างหนึ่ง แสดงผลในโทรศัพท์มือถืออีกอย่างหนึ่ง แสดงผลในทีวีอีกอย่างหนึ่ง แสดงผลในอักษรเบรลล์อย่างหนึ่ง หรืออาจจะกำหนดให้โปรแกรมสังเคราะห์เสียงอ่านข้อความต่าง ๆ ด้วยน้ำเสียงที่ต่างกันได้โดยใช้น้ำเสียงต่าง ๆ เช่น ตกใจ ดีใจ เสียใจ ได้ กำหนดความดังเสียงได้ ฯลฯ จะเห็นได้ว่ามันจะทำให้ง่ายต่อการใช้งานกับอุปกรณ์ต่าง ๆ นั่นเอง อย่างเช่น จอโทรศัพท์มือถือมีขนาดเล็ก เราอาจจะใช้ CSS สั่งให้ซ่อนส่วนที่ไม่จำเป็นหรือลดขนาดตัวอักษรลง หรือเปลี่ยนการแสดงผลไปเลยก็ได้ คนพิการได้รับประโยชน์จาก CSS และ XHTML ตรงที่ว่า เขาสามารถเข้าใจเอกสารได้ดีมากขึ้น เนื่องจากว่า เนื้อหากับการแสดงผลถูกแยกออกจากกันอย่างเด็ดขาด ทำให้ไม่สับสน ผู้พิการบางคนมองไม่เห็น จึงไม่จำเป็นต้องเห็นความสวยงามในเว็บ แต่ต้องการข้อมูลที่เข้าถึงได้ ไม่ซับซ้อน นั่นหมายถึงเขาสามารถเลือกบริโภคเฉพาะเนื้อหาได้โดยที่ไม่มีเรื่องการแสดงผลมารบกวนเลย


สิ่งที่ต้องพิจารณาคือ แม้ว่าจะแสดงผลเหมือน ๆ กัน แต่การมาร์กอัพแบบไหนที่ให้ข้อมูลแก่ผู้อ่านได้มากที่สุด? แม้ว่าผู้อ่านส่วนมากไม่สนใจเรื่องความหมายทางภาษา HTML ก็ตามจากตัวอย่างข้างต้น แท็ก em ให้ความหมายได้ดีกว่า เนื่องจากเป็นการบอกว่าข้อความที่อยู่ข้างในมีความสำคัญ แต่แท็ก i นั้นบอกเพียงแต่ว่า เป็นตัวอักษรเอียงเท่านั้น ซึ่งแม้ว่าเราจะใช้ตัวเอียงในการเน้นความสำคัญเป็นธรรมเนียมปฏิบัติส่วนมาก แต่ก็ไม่เป็นเช่นนั้นทุกกรณี หรือบางคนที่มองไม่เห็นก็จะไม่สามารถรับรู้ได้ว่าข้อความนี้เน้นความสำคัญเป็นพิเศษ การใช้แท็กที่สื่อความหมายก็จะเข้ามาแก้ปัญหาตรงนี้ ทำให้ผู้ที่ไม่สามารถมองเห็นเข้าใจความสำคัญของข้อความได้ เนื่องโปรแกรมอ่านหน้าจอจะทำงานกับโค้ด HTML ด้วย เพื่อให้ผู้อ่านรับรู้ข้อมูลทางโครงสร้างของเอกสารได้ หากมีการให้ข้อมูลผิดพลาดเกี่ยวกับข้อความเช่นกรณีข้างต้น ก็จะส่งผลให้เกิดความเข้าใจผิด หรือไม่สามารถเข้าใจเอกสารได้อย่างเต็มที่ ดังนั้นสิ่งที่ต้องพึงระวังคือ การมาร์กอัพต้องเข้าใจได้หรือ Make sense

ในกรณีของผู้ที่ไม่สนใจการอ่านจากโค้ด HTML นั้น (ซึ่งก็คือผู้อ่านส่วนมากที่สามารถมองเห็นการแสดงผลได้) เราก็ควรจะอำนวยความสะดวกให้ผู้อ่านเข้าใจถึงความสำคัญของข้อความได้โดย การแสดงผลที่เด่นชัดขึ้นกว่าข้อความปกติธรรมดาทั่วไป เช่น อาจทำให้ตัวหนาขึ้น หรือเป็นตัวเอียง โดยใช้คำสั่งจาก CSS เท่านั้น หรือบางกรณีอาจไม่จำเป็นต้องกำหนดเพิ่มเติม แต่ใช้ค่ามาตรฐานของบราวเซอร์ในการแสดงผลเลยก็ได้ เช่น แท็ก ทุก ๆ บราวเซอร์ก็จะแสดงผลข้อความที่อยู่ข้างในเป็นตัวเอียงอยู่แล้ว โดยที่เราไม่ต้องไปปรับค่าเพิ่มเติม ยกเว้นว่าต้องการให้มีคุณลักษณะที่แตกต่างออกไปอีกจะเห็นได้ว่า การแสดงผลที่ดี เป็นมาตรฐาน และการมาร์กอัพอย่างเหมาะสมนั้นสามารถรองรับความต้องการของผู้ใช้งานเว็บได้ทั้ง 2 กลุ่ม ในการมาร์กอัพ ก็ควรใช้แท็กอย่างฉลาดและเหมาะสม ในขณะเดียวกัน ในเรื่องของการแสดงผล ก็ต้องมั่นใจว่า ผู้ใช้สามารถเข้าใจความหมายจากการมองเห็นได้ และต้องไม่สร้างความสับสน อย่างเช่น โดยปกติแล้ว ทุกบราวเซอร์จะแสดงผล h1 เป็นตัวอักษรขนาดใหญ่ ผู้ใช้เองก็จะเข้าใจว่านี่คือหัวเรื่องลำดับที่ 1 จากการมองเห็น แต่ถ้าเราไปเปลี่ยนขนาด เช่น ทำให้ h2 ใหญ่กว่า h1หรือทำให้ h1 มีขนาดเล็กมาก จนแทบไม่แตกต่างจากตัวอักษรทั่ว ๆ ไป ผู้อ่านก็จะเกิดความเข้าใจผิด และไม่สามารถแยกแยะได้ว่าอันไหนคือหัวเรื่องหลัก หรือเอกสารนี้มีหัวเรื่องหรือไม่

สรุปก็คือ การแสดงผลที่มองเห็นได้นั้น มีความสำคัญคือ ต้องให้ผู้อ่านเข้าใจโครงสร้างของเอกสารจากการมองเห็นได้ง่าย ส่วนการมาร์กอัพนั้น ก็ต้องทำให้ผู้อ่านที่มองไม่เห็นเข้าใจโครงสร้างของเอกสารได้ง่ายเช่นเดียวกัน ทั้งสองสิ่งนี้จะต้องทำไปพร้อม ๆ กันอย่างถูกวิธีแหละเหมาะสม เป็นสำนึกที่ดีในการทำเว็บไซต์ และเป็นสิ่งที่ควรคำนึงถึงทุกครั้งไม่ว่าเราจะทำเว็บไซต์ให้ใคร เพราะเราไม่สามารถคาดเดาได้ว่า ใครจะอ่านเว็บไซต์ของเราบ้าง แต่เราก็ไม่ควรกีดกันคนกลุ่มใดกลุ่มหนึ่งออกไปจากการออกแบบที่ไม่เป็นธรรมของเรา เพราะถ้าหากเราต้องกลายเป็นคนที่มองไม่เห็นขึ้นมาในวันหนึ่งนั้น เราก็คงไม่ต้องการสูญเสียสิทธิในการเข้าถึงข้อมูลข่าวสารอย่างถูกต้องและเท่าเทียมอย่างแน่นอน จึงต้องคิดถึงทุกคนให้มากที่สุด เราต้องให้สิทธิและความสะดวกในการเข้าถึงแก่ทุกคนอย่างเท่าเทียมกัน!