HTML, XML, XHTML และ CSS คืออะไร ต่างกันอย่างไร และใช้อย่างไร ตอ
อะไรที่เรียกว่า “การใช้แท็กผิดความหมาย”
ถ้าสมมติว่ามีข้อความหนึ่งเขียนว่า ”ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น” มีเว็บมาสเตอร์สองคน นาย A เลือกมาร์กอัพข้อความนี้ด้วยแท็ก <i></i> (i = italic = เอียง) ส่วนนาย B เลือกมาร์กอัพด้วยแท็ก <em></em> (em = emphasize = เน้นความสำคัญ) ทำให้ได้ลักษณะการมาร์กอัพ ดังนี้
<i>ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น</i> และ
<em>ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น</em>
และการมาร์กอัพของทั้งสองคนนี้ แสดงผลเหมือนกัน คือ มีลักษณะเป็นข้อความที่เป็นตัวอักษรเอียง ดังนี้ ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น
หรือถ้าใช้ชื่อแท็กเป็นภาษาไทย (เป็นเทคนิคที่ดีในการตรวจสอบการใช้แท็กของเรา) ก็จะเขียนได้เป็น
<เอียง>ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น</เอียง> และ
<เน้นความสำคัญ>ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น</เน้นความสำคัญ>
สิ่งที่ต้องพิจารณาคือ แม้ว่าจะแสดงผลเหมือน ๆ กัน แต่การมาร์กอัพแบบไหนที่ให้ข้อมูลแก่ผู้อ่าน
ได้มากที่สุด? แม้ว่าผู้อ่านส่วนมากไม่สนใจเรื่องความหมายทางภาษา HTML ก็ตาม
จากตัวอย่างข้างต้น แท็ก <em></em> ให้ความหมายได้ดีกว่า เนื่องจากเป็นการบอกว่าข้อความที่อยู่ข้างในมี
ความสำคัญ แต่แท็ก <i></i> นั้นบอกเพียงแต่ว่า เป็นตัวอักษรเอียงเท่านั้น ซึ่งแม้ว่าเราจะใช้ตัวเอียงในการเน้น
ความสำคัญเป็นธรรมเนียมปฏิบัติส่วนมาก แต่ก็ไม่เป็นเช่นนั้นทุกกรณี หรือบางคนที่มองไม่เห็นก็จะไม่สามารถ
รับรู้ได้ว่าข้อความนี้เน้นความสำคัญเป็นพิเศษ การใช้แท็กที่สื่อความหมายก็จะเข้ามาแก้ปัญหาตรงนี้ ทำให้ผู้ที่ไม่
สามารถมองเห็นเข้าใจความสำคัญของข้อความได้ เนื่องโปรแกรมอ่านหน้าจอจะทำงานกับโค้ด HTML ด้วย
เพื่อให้ผู้อ่านรับรู้ข้อมูลทางโครงสร้างของเอกสารได้ หากมีการให้ข้อมูลผิดพลาดเกี่ยวกับข้อความเช่นกรณี
ข้างต้น ก็จะส่งผลให้เกิดความเข้าใจผิด หรือไม่สามารถเข้าใจเอกสารได้อย่างเต็มที่ ดังนั้นสิ่งที่ต้องพึงระวังคือ
การมาร์กอัพต้องเข้าใจได้หรือ Make sense
ในกรณีของผู้ที่ไม่สนใจการอ่านจากโค้ด HTML นั้น (ซึ่งก็คือผู้อ่านส่วนมากที่สามารถมองเห็นการแสดงผลได้) เราก็ควรจะอำนวยความสะดวกให้ผู้อ่านเข้าใจถึงความสำคัญของข้อความได้โดย การแสดงผลที่
เด่นชัดขึ้นกว่าข้อความปกติธรรมดาทั่วไป เช่น อาจทำให้ตัวหนาขึ้น หรือเป็นตัวเอียง โดยใช้คำสั่งจาก CSS
เท่านั้น หรือบางกรณีอาจไม่จำเป็นต้องกำหนดเพิ่มเติม แต่ใช้ค่ามาตรฐานของบราวเซอร์ในการแสดงผลเลยก็ได้
เช่น แท็ก <em> ทุก ๆ บราวเซอร์ก็จะแสดงผลข้อความที่อยู่ข้างในเป็นตัวเอียงอยู่แล้ว โดยที่เราไม่ต้องไปปรับ
ค่าเพิ่มเติม ยกเว้นว่าต้องการให้มีคุณลักษณะที่แตกต่างออกไปอีก
จะเห็นได้ว่า การแสดงผลที่ดี เป็นมาตรฐาน และการมาร์กอัพอย่างเหมาะสมนั้นสามารถรองรับความ
ต้องการของผู้ใช้งานเว็บได้ทั้ง 2 กลุ่ม ในการมาร์กอัพ ก็ควรใช้แท็กอย่างฉลาดและเหมาะสม ในขณะเดียวกัน ใน
เรื่องของการแสดงผล ก็ต้องมั่นใจว่า ผู้ใช้สามารถเข้าใจความหมายจากการมองเห็นได้ และต้องไม่สร้างความ
สับสน อย่างเช่น โดยปกติแล้ว ทุกบราวเซอร์จะแสดงผล <h1> เป็นตัวอักษรขนาดใหญ่ ผู้ใช้เองก็จะเข้าใจว่านี่
คือหัวเรื่องลำดับที่ 1 จากการมองเห็น แต่ถ้าเราไปเปลี่ยนขนาด เช่น ทำให้ <h2> ใหญ่กว่า <h1> หรือทำให้
<h1> มีขนาดเล็กมาก จนแทบไม่แตกต่างจากตัวอักษรทั่ว ๆ ไป ผู้อ่านก็จะเกิดความเข้าใจผิด และไม่สามารถ
แยกแยะได้ว่าอันไหนคือหัวเรื่องหลัก หรือเอกสารนี้มีหัวเรื่องหรือไม่
สรุปก็คือ การแสดงผลที่มองเห็นได้นั้น มีความสำคัญคือ ต้องให้ผู้อ่านเข้าใจโครงสร้างของเอกสารจาก
การมองเห็นได้ง่าย ส่วนการมาร์กอัพนั้น ก็ต้องทำให้ผู้อ่านที่มองไม่เห็นเข้าใจโครงสร้างของเอกสารได้ง่าย
เช่นเดียวกัน ทั้งสองสิ่งนี้จะต้องทำไปพร้อม ๆ กันอย่างถูกวิธีแหละเหมาะสม เป็นสำนึกที่ดีในการทำเว็บไซต์ และ
เป็นสิ่งที่ควรคำนึงถึงทุกครั้งไม่ว่าเราจะทำเว็บไซต์ให้ใคร เพราะเราไม่สามารถคาดเดาได้ว่า ใครจะอ่านเว็บไซต์
ของเราบ้าง แต่เราก็ไม่ควรกีดกันคนกลุ่มใดกลุ่มหนึ่งออกไปจากการออกแบบที่ไม่เป็นธรรมของเรา เพราะถ้าหาก
เราต้องกลายเป็นคนที่มองไม่เห็นขึ้นมาในวันหนึ่งนั้น เราก็คงไม่ต้องการสูญเสียสิทธิในการเข้าถึงข้อมูลข่าวสาร
อย่างถูกต้องและเท่าเทียมอย่างแน่นอน จึงต้องคิดถึงทุกคนให้มากที่สุด เราต้องให้สิทธิและความสะดวกในการ
เข้าถึงแก่ทุกคนอย่างเท่าเทียมกัน!
ขอขอบคุณเนื้อหาจาก nectec ครับ
ถ้าสมมติว่ามีข้อความหนึ่งเขียนว่า ”ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น” มีเว็บมาสเตอร์สองคน นาย A เลือกมาร์กอัพข้อความนี้ด้วยแท็ก <i></i> (i = italic = เอียง) ส่วนนาย B เลือกมาร์กอัพด้วยแท็ก <em></em> (em = emphasize = เน้นความสำคัญ) ทำให้ได้ลักษณะการมาร์กอัพ ดังนี้
<i>ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น</i> และ
<em>ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น</em>
และการมาร์กอัพของทั้งสองคนนี้ แสดงผลเหมือนกัน คือ มีลักษณะเป็นข้อความที่เป็นตัวอักษรเอียง ดังนี้ ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น
หรือถ้าใช้ชื่อแท็กเป็นภาษาไทย (เป็นเทคนิคที่ดีในการตรวจสอบการใช้แท็กของเรา) ก็จะเขียนได้เป็น
<เอียง>ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น</เอียง> และ
<เน้นความสำคัญ>ต้องส่งภายในวันที่ 15 เมษายน 2549 เท่านั้น</เน้นความสำคัญ>
สิ่งที่ต้องพิจารณาคือ แม้ว่าจะแสดงผลเหมือน ๆ กัน แต่การมาร์กอัพแบบไหนที่ให้ข้อมูลแก่ผู้อ่าน
ได้มากที่สุด? แม้ว่าผู้อ่านส่วนมากไม่สนใจเรื่องความหมายทางภาษา HTML ก็ตาม
จากตัวอย่างข้างต้น แท็ก <em></em> ให้ความหมายได้ดีกว่า เนื่องจากเป็นการบอกว่าข้อความที่อยู่ข้างในมี
ความสำคัญ แต่แท็ก <i></i> นั้นบอกเพียงแต่ว่า เป็นตัวอักษรเอียงเท่านั้น ซึ่งแม้ว่าเราจะใช้ตัวเอียงในการเน้น
ความสำคัญเป็นธรรมเนียมปฏิบัติส่วนมาก แต่ก็ไม่เป็นเช่นนั้นทุกกรณี หรือบางคนที่มองไม่เห็นก็จะไม่สามารถ
รับรู้ได้ว่าข้อความนี้เน้นความสำคัญเป็นพิเศษ การใช้แท็กที่สื่อความหมายก็จะเข้ามาแก้ปัญหาตรงนี้ ทำให้ผู้ที่ไม่
สามารถมองเห็นเข้าใจความสำคัญของข้อความได้ เนื่องโปรแกรมอ่านหน้าจอจะทำงานกับโค้ด HTML ด้วย
เพื่อให้ผู้อ่านรับรู้ข้อมูลทางโครงสร้างของเอกสารได้ หากมีการให้ข้อมูลผิดพลาดเกี่ยวกับข้อความเช่นกรณี
ข้างต้น ก็จะส่งผลให้เกิดความเข้าใจผิด หรือไม่สามารถเข้าใจเอกสารได้อย่างเต็มที่ ดังนั้นสิ่งที่ต้องพึงระวังคือ
การมาร์กอัพต้องเข้าใจได้หรือ Make sense
ในกรณีของผู้ที่ไม่สนใจการอ่านจากโค้ด HTML นั้น (ซึ่งก็คือผู้อ่านส่วนมากที่สามารถมองเห็นการแสดงผลได้) เราก็ควรจะอำนวยความสะดวกให้ผู้อ่านเข้าใจถึงความสำคัญของข้อความได้โดย การแสดงผลที่
เด่นชัดขึ้นกว่าข้อความปกติธรรมดาทั่วไป เช่น อาจทำให้ตัวหนาขึ้น หรือเป็นตัวเอียง โดยใช้คำสั่งจาก CSS
เท่านั้น หรือบางกรณีอาจไม่จำเป็นต้องกำหนดเพิ่มเติม แต่ใช้ค่ามาตรฐานของบราวเซอร์ในการแสดงผลเลยก็ได้
เช่น แท็ก <em> ทุก ๆ บราวเซอร์ก็จะแสดงผลข้อความที่อยู่ข้างในเป็นตัวเอียงอยู่แล้ว โดยที่เราไม่ต้องไปปรับ
ค่าเพิ่มเติม ยกเว้นว่าต้องการให้มีคุณลักษณะที่แตกต่างออกไปอีก
จะเห็นได้ว่า การแสดงผลที่ดี เป็นมาตรฐาน และการมาร์กอัพอย่างเหมาะสมนั้นสามารถรองรับความ
ต้องการของผู้ใช้งานเว็บได้ทั้ง 2 กลุ่ม ในการมาร์กอัพ ก็ควรใช้แท็กอย่างฉลาดและเหมาะสม ในขณะเดียวกัน ใน
เรื่องของการแสดงผล ก็ต้องมั่นใจว่า ผู้ใช้สามารถเข้าใจความหมายจากการมองเห็นได้ และต้องไม่สร้างความ
สับสน อย่างเช่น โดยปกติแล้ว ทุกบราวเซอร์จะแสดงผล <h1> เป็นตัวอักษรขนาดใหญ่ ผู้ใช้เองก็จะเข้าใจว่านี่
คือหัวเรื่องลำดับที่ 1 จากการมองเห็น แต่ถ้าเราไปเปลี่ยนขนาด เช่น ทำให้ <h2> ใหญ่กว่า <h1> หรือทำให้
<h1> มีขนาดเล็กมาก จนแทบไม่แตกต่างจากตัวอักษรทั่ว ๆ ไป ผู้อ่านก็จะเกิดความเข้าใจผิด และไม่สามารถ
แยกแยะได้ว่าอันไหนคือหัวเรื่องหลัก หรือเอกสารนี้มีหัวเรื่องหรือไม่
สรุปก็คือ การแสดงผลที่มองเห็นได้นั้น มีความสำคัญคือ ต้องให้ผู้อ่านเข้าใจโครงสร้างของเอกสารจาก
การมองเห็นได้ง่าย ส่วนการมาร์กอัพนั้น ก็ต้องทำให้ผู้อ่านที่มองไม่เห็นเข้าใจโครงสร้างของเอกสารได้ง่าย
เช่นเดียวกัน ทั้งสองสิ่งนี้จะต้องทำไปพร้อม ๆ กันอย่างถูกวิธีแหละเหมาะสม เป็นสำนึกที่ดีในการทำเว็บไซต์ และ
เป็นสิ่งที่ควรคำนึงถึงทุกครั้งไม่ว่าเราจะทำเว็บไซต์ให้ใคร เพราะเราไม่สามารถคาดเดาได้ว่า ใครจะอ่านเว็บไซต์
ของเราบ้าง แต่เราก็ไม่ควรกีดกันคนกลุ่มใดกลุ่มหนึ่งออกไปจากการออกแบบที่ไม่เป็นธรรมของเรา เพราะถ้าหาก
เราต้องกลายเป็นคนที่มองไม่เห็นขึ้นมาในวันหนึ่งนั้น เราก็คงไม่ต้องการสูญเสียสิทธิในการเข้าถึงข้อมูลข่าวสาร
อย่างถูกต้องและเท่าเทียมอย่างแน่นอน จึงต้องคิดถึงทุกคนให้มากที่สุด เราต้องให้สิทธิและความสะดวกในการ
เข้าถึงแก่ทุกคนอย่างเท่าเทียมกัน!
บทความโดย: สว่าง ศรีสม
Email: inxsiny@hotmail.com
Email: inxsiny@hotmail.com
ขอขอบคุณเนื้อหาจาก nectec ครับ