10 หนทางในการทำเว็บสู่มาตรฐาน (ตอนที่ 1)
เว็บมาตรฐานคืออะำไร ทำไมเราต้องทำเว็บสู่ความเป็นมาตรฐาน
ถ้าเราจะมองคำแปลของคำว่า เว็บมาตรฐาน จากคำว่า มาตรฐาน ก็คงจะเป็นที่เข้าใจกันดีว่าหมายถึงอะไร แต่สิ่งที่หลายคนยังไม่เข้าใจ ก็คือ ทำยังไงให้เว็บเราก้าวเข้าสู่ความเป็นมาตรฐาน
เว็บมาตรฐานมีประโยชน์อย่างไร
หลักการของการทำให้เป็นมาตรฐานก็คือการทำให้เว็บเราสามารถเปิดดูได้โดยไม่แตกต่างกันในแต่ละบราวเซอร์ ถึงแม้ว่าบราวเซอร์แต่ละตัวจะถูกออกแบบมาแตกต่างกัน โดยทั่วๆไปถึงแม้ว่าในปัจจุบันเว็บบราวเซอร์ยี่ห้อต่างๆอาจจะยังไม่ได้ก้าวเข้าสู่มาตรฐานเว็บมากนัก แต่แนวโน้มในอนาคต บราวเซอร์ต่างๆก็จะต้องก้าวเข้าสู่มาตรฐานอย่างแน่นอน ในเมื่อบราวเซอร์ต่างๆยังต้องก้าวเข้าสู่ความเป็นมาตรฐาน แล้วทำไมเราไม่ทำเว็บของเราให้มันเป็นมาตรฐานไปซะเลย เพื่อรองรับอนาคต(อันใกล้)
นอกจากนี้ในอนาคต เว็บไซต์ไม่ได้ถูกจำกัดเพียงเพื่อเปิดดูบนบราวเซอร์อีกต่อไป เราอาจต้องทำให้เว็บสามารถเปิดดูได้โดยไม่ผิดเพี้ยน แม้การเปิดดูผ่าน TV ผ่าน ตู้เย็น แม้กระทั่งการดูเว็บผ่าน เตาอบไมโครเวฟ และที่สำคัญไปกว่านั้น เราอาจต้องทำเว็บเื่พื่อรองรับผู้พิการทางสายตา ซึ่งไม่สามารถ "ดู" ได้ แต่อาจต้องใช้การ "ฟัง" เว็บแทน ดังนั้นความเป็นมาตรฐานคือสิ่งสำคัญที่ต้องมีในอนาคตเป็นอย่างยิ่ง
นอกจากนี้ประโยชน์ของเว็บมาตรฐานอีกอย่าง ก็คือ ผลทางด้าน SEO เนื่องจาก "แมงมุง" ของ SEO ค่ายต่างๆจะทำงานได้ง่ายกว่า หากมันสามารถเลือกรูปแบบที่เป็นมาตรฐานได้ ผมยกตัวอย่างนะครับ เราสามารถกำหนดหัวข้อของเว็บได้หลายลักษณะ โดยอาจใช้ <p class="logo">Web Title</p> หรือ <p class="header">Web Title</p> คำถามก็คือ "แมงมุม" จะรู้ได้ไงว่าอันไหนคือ "หัวข้อ" แต่หากเราออกแบบตามมาตรฐานเช่น <h1>Web Title</h1> "แมงมุม" ก็จะรู้ได้ทันทีว่านี่คือ "หัวข้อ" เนื่องจากมันก็จะเป็นมาตรฐานเดียวกันในทุกๆเว็บ
ต่อไปนี้จะเป็น 10 หนทางในการทำเว็บสู่ความเป็นมาตรฐาน
1. กำหนด DOCTYPE ให้ถูกต้อง
เพราะว่า DOCTYPE จะเป็นตัวบอกให้ Browser เลือกวิธีการจัดการแสดงผลที่ถูกต้องของเว็บเพจ การกำหนด DOCTYPE ที่ถูกต้องได้แก่
XHTML 1.1
เป็นการกำหนดให้เว็บของเรา "สะอาด" สุดๆ โดยไม่มีการกำหนด style ใดๆบนเว็บเพจ โดยให้ทำการกำหนด style ต่างๆไว้ใน CSS ภายนอกแทน และต้องกำหนดชนิดเอกสาร เป็น XML ด้วย
หมายเหตุ XHTML 1.1 ไม่รองรับใน IE ที่ต่ำกว่า 6 นะครับ
XHTML 1.0 Strict
คล้ายๆกับ XHTML 1.1 แหละครับ เพียงแต่ไม่ต้องกำหนดชนิดเอกสารเป็น XML
XHTML 1.0 Transitional
แบบนี้ สามารถกำหนด CSS แบบ inline ในเว็บเพจได้ ทำให้สามารถรองรับได้ใน Browser ที่ไม่ได้เป็นมาตรฐานเช่น IE6
XHTML 1.0 Frameset
ชิ่ือก็บอกอยู่แล้วว่าใช้ร่วมกับ frame ครับ
2. กําหนด Namespace และภาษาเริ่มต้น
Namespace ใช้เพื่อบอกภาษาเริ่มต้นของเว็บไซต์ ซึ่งมีประโยชน์ในการกำหนดการอ่านเว็บโดยใช้เครื่องอ่านหรือการแสดงผลแบบอื่นๆนอกจากการมองเห็นโดยบราวเซอร์ เพื่อการอ่านได้ถูกต้อง
XHTML 1.1
XHTML 1.0
3. กำหนด META Tags
meta tag สามารถใช้ระบุค่าหลายๆอย่างเกี่ยวกับเว็บเพจเช่น
http-equiv เป็น meta tag ที่สำคัญที่สุด ใช้ร่วมกับ DOCTYPE เพื่อกำหนดการแสดงผลหน้าเพจของคุณได้อย่างถูกต้อง
language เป็นองค์ประกอบสำคัญสำหรับ XML หากคุณใช้ XHTML 1.1 บนภาษาอื่นที่ไม่ใช่ภาษาอังกฤษ
description และ keywords ใช้เพื่อระบุรายละเอียดย่อเกี่ยวกับเพจหรือเว็บไซต์นั้นๆ
คุณต้องระบุ meta tag ไว้ภายใน element <head> ของเว็บไซต์ และระบุ language และ charset ของ http-equiv รวมถึง การกำหนดการเข้ารหัสของ XML ใน XHTML 1.1 ให้สอดคล้องกันด้วย
4. มีการระบุ title และ heading
เราสามารถแบ่งเพจออกเป็นส่วนต่าง ๆ แล้วใช้ <h1> ถีง <h6> เพื่อเป็นคำอธิบายของส่วนย่อยต่างๆแต่ละส่วน
เราควรจะบุหน้าเพจด้วย title โดยการกำหนด tag <title> เพียง tag เดียวภายใน <head> ต่อ 1 หน้า
ใช้ <h1> ภายในเนื่อหาของเพจ ที่สอดคล้องกับ <title> และมีเพียงหนึ่งเดียว บนหน้าเพจเช่นกัน
ภายใน tag เช่น <h1> ถึง <h6> หากมีองค์ประกอบเป็นรูปภาพเพียงอย่างเดียว คุณจะต้องระบุข้อความ เพื่อให้ reader อ่านแทน (เนื่องจาก reader ไม่สามารถทำความเข้าใจกับรูปภาพได้) นอกจากการระบุภายใน alt ของรูปภาพนั้นๆแล้ว
5. ใช้งาน Javascript อย่างถูกต้อง
หากคุณมีการใช้งาน Javascript ภายในเว็บเพจ คุณควรกำหนดข้อมูลภายใน <script> ให้ถูกต้อง
เนื่องจากข้อความภายใน <script> ของ HTML ถูกมองว่าเป็น CDATA (character data) แต่บน XHTML ถูกมองเป็น PCDATA (parsed character data) ซึ่ง PCDATA จะถูกประมวลผลโดย W3C validator ดังนั้น เราจึงควรกำหนดชนิดของข้อความภายใน <script> ให้เป็น CDATA ให้ถูกต้อง, นอกจากนี้ในเครื่องช่วยในการอ่านเว็บเพจ อาจทำงานผิดพลาดได้ หากการกำหนดชนิดของข้อมูลภายใน <script> ไม่ถูกต้อง
ถ้าเราจะมองคำแปลของคำว่า เว็บมาตรฐาน จากคำว่า มาตรฐาน ก็คงจะเป็นที่เข้าใจกันดีว่าหมายถึงอะไร แต่สิ่งที่หลายคนยังไม่เข้าใจ ก็คือ ทำยังไงให้เว็บเราก้าวเข้าสู่ความเป็นมาตรฐาน
เว็บมาตรฐานมีประโยชน์อย่างไร
หลักการของการทำให้เป็นมาตรฐานก็คือการทำให้เว็บเราสามารถเปิดดูได้โดยไม่แตกต่างกันในแต่ละบราวเซอร์ ถึงแม้ว่าบราวเซอร์แต่ละตัวจะถูกออกแบบมาแตกต่างกัน โดยทั่วๆไปถึงแม้ว่าในปัจจุบันเว็บบราวเซอร์ยี่ห้อต่างๆอาจจะยังไม่ได้ก้าวเข้าสู่มาตรฐานเว็บมากนัก แต่แนวโน้มในอนาคต บราวเซอร์ต่างๆก็จะต้องก้าวเข้าสู่มาตรฐานอย่างแน่นอน ในเมื่อบราวเซอร์ต่างๆยังต้องก้าวเข้าสู่ความเป็นมาตรฐาน แล้วทำไมเราไม่ทำเว็บของเราให้มันเป็นมาตรฐานไปซะเลย เพื่อรองรับอนาคต(อันใกล้)
นอกจากนี้ในอนาคต เว็บไซต์ไม่ได้ถูกจำกัดเพียงเพื่อเปิดดูบนบราวเซอร์อีกต่อไป เราอาจต้องทำให้เว็บสามารถเปิดดูได้โดยไม่ผิดเพี้ยน แม้การเปิดดูผ่าน TV ผ่าน ตู้เย็น แม้กระทั่งการดูเว็บผ่าน เตาอบไมโครเวฟ และที่สำคัญไปกว่านั้น เราอาจต้องทำเว็บเื่พื่อรองรับผู้พิการทางสายตา ซึ่งไม่สามารถ "ดู" ได้ แต่อาจต้องใช้การ "ฟัง" เว็บแทน ดังนั้นความเป็นมาตรฐานคือสิ่งสำคัญที่ต้องมีในอนาคตเป็นอย่างยิ่ง
นอกจากนี้ประโยชน์ของเว็บมาตรฐานอีกอย่าง ก็คือ ผลทางด้าน SEO เนื่องจาก "แมงมุง" ของ SEO ค่ายต่างๆจะทำงานได้ง่ายกว่า หากมันสามารถเลือกรูปแบบที่เป็นมาตรฐานได้ ผมยกตัวอย่างนะครับ เราสามารถกำหนดหัวข้อของเว็บได้หลายลักษณะ โดยอาจใช้ <p class="logo">Web Title</p> หรือ <p class="header">Web Title</p> คำถามก็คือ "แมงมุม" จะรู้ได้ไงว่าอันไหนคือ "หัวข้อ" แต่หากเราออกแบบตามมาตรฐานเช่น <h1>Web Title</h1> "แมงมุม" ก็จะรู้ได้ทันทีว่านี่คือ "หัวข้อ" เนื่องจากมันก็จะเป็นมาตรฐานเดียวกันในทุกๆเว็บ
ต่อไปนี้จะเป็น 10 หนทางในการทำเว็บสู่ความเป็นมาตรฐาน
1. กำหนด DOCTYPE ให้ถูกต้อง
เพราะว่า DOCTYPE จะเป็นตัวบอกให้ Browser เลือกวิธีการจัดการแสดงผลที่ถูกต้องของเว็บเพจ การกำหนด DOCTYPE ที่ถูกต้องได้แก่
XHTML 1.1
เป็นการกำหนดให้เว็บของเรา "สะอาด" สุดๆ โดยไม่มีการกำหนด style ใดๆบนเว็บเพจ โดยให้ทำการกำหนด style ต่างๆไว้ใน CSS ภายนอกแทน และต้องกำหนดชนิดเอกสาร เป็น XML ด้วย
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">หมายเหตุ XHTML 1.1 ไม่รองรับใน IE ที่ต่ำกว่า 6 นะครับ
XHTML 1.0 Strict
คล้ายๆกับ XHTML 1.1 แหละครับ เพียงแต่ไม่ต้องกำหนดชนิดเอกสารเป็น XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional
แบบนี้ สามารถกำหนด CSS แบบ inline ในเว็บเพจได้ ทำให้สามารถรองรับได้ใน Browser ที่ไม่ได้เป็นมาตรฐานเช่น IE6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset
ชิ่ือก็บอกอยู่แล้วว่าใช้ร่วมกับ frame ครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">2. กําหนด Namespace และภาษาเริ่มต้น
Namespace ใช้เพื่อบอกภาษาเริ่มต้นของเว็บไซต์ ซึ่งมีประโยชน์ในการกำหนดการอ่านเว็บโดยใช้เครื่องอ่านหรือการแสดงผลแบบอื่นๆนอกจากการมองเห็นโดยบราวเซอร์ เพื่อการอ่านได้ถูกต้อง
XHTML 1.1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">XHTML 1.0
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">3. กำหนด META Tags
meta tag สามารถใช้ระบุค่าหลายๆอย่างเกี่ยวกับเว็บเพจเช่น
http-equiv เป็น meta tag ที่สำคัญที่สุด ใช้ร่วมกับ DOCTYPE เพื่อกำหนดการแสดงผลหน้าเพจของคุณได้อย่างถูกต้อง
language เป็นองค์ประกอบสำคัญสำหรับ XML หากคุณใช้ XHTML 1.1 บนภาษาอื่นที่ไม่ใช่ภาษาอังกฤษ
description และ keywords ใช้เพื่อระบุรายละเอียดย่อเกี่ยวกับเพจหรือเว็บไซต์นั้นๆ
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="Updating Windows using Microsoft Update" />
<meta name="keywords" content="updating, windows, microsoft, update, techworld" />คุณต้องระบุ meta tag ไว้ภายใน element <head> ของเว็บไซต์ และระบุ language และ charset ของ http-equiv รวมถึง การกำหนดการเข้ารหัสของ XML ใน XHTML 1.1 ให้สอดคล้องกันด้วย
4. มีการระบุ title และ heading
เราสามารถแบ่งเพจออกเป็นส่วนต่าง ๆ แล้วใช้ <h1> ถีง <h6> เพื่อเป็นคำอธิบายของส่วนย่อยต่างๆแต่ละส่วน
เราควรจะบุหน้าเพจด้วย title โดยการกำหนด tag <title> เพียง tag เดียวภายใน <head> ต่อ 1 หน้า
<title>Smashing Magazine</title>ใช้ <h1> ภายในเนื่อหาของเพจ ที่สอดคล้องกับ <title> และมีเพียงหนึ่งเดียว บนหน้าเพจเช่นกัน
<h1>Smashing Magazine: We smash you with the information that makes your </h1>ภายใน tag เช่น <h1> ถึง <h6> หากมีองค์ประกอบเป็นรูปภาพเพียงอย่างเดียว คุณจะต้องระบุข้อความ เพื่อให้ reader อ่านแทน (เนื่องจาก reader ไม่สามารถทำความเข้าใจกับรูปภาพได้) นอกจากการระบุภายใน alt ของรูปภาพนั้นๆแล้ว
การระบุที่ไม่ถูกต้อง :
<h2><img src="logo.png" alt="Smashing Magazine" /></h2>
การระบุที่ถูกต้อง :
<h2><img src="logo.png" alt="Smashing Magazine" />Smashing Magazine</h2>5. ใช้งาน Javascript อย่างถูกต้อง
หากคุณมีการใช้งาน Javascript ภายในเว็บเพจ คุณควรกำหนดข้อมูลภายใน <script> ให้ถูกต้อง
เนื่องจากข้อความภายใน <script> ของ HTML ถูกมองว่าเป็น CDATA (character data) แต่บน XHTML ถูกมองเป็น PCDATA (parsed character data) ซึ่ง PCDATA จะถูกประมวลผลโดย W3C validator ดังนั้น เราจึงควรกำหนดชนิดของข้อความภายใน <script> ให้เป็น CDATA ให้ถูกต้อง, นอกจากนี้ในเครื่องช่วยในการอ่านเว็บเพจ อาจทำงานผิดพลาดได้ หากการกำหนดชนิดของข้อมูลภายใน <script> ไม่ถูกต้อง
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#divone').tipsy({fade: true, gravity: 'n'});
$('#divtwo').tipsy({fade: true, gravity: 'n'});
});
//]]>
</script>
แปลและเรียบเรียงจาก Smashing Magazine