ความสำคัญของแท็ก DOCTYPE และวิธีการเลือกใช้
อีกแท็กหนึ่งที่มีความสำคัญมากๆสำหรับการเขียนหน้าเว็บตามหลัก Web Standards คือแท็ก DOCTYPE เพราะเป็นแท็กที่บอกให้เว็บบราวเซอร์รู้ว่าหน้าเว็บของคุณเป็นหน้าเว็บแบบไหนและควรจะใช้กฏเกณฑ์ไหนในการแสดงผลบนหน้าจอให้ถูกต้องที่สุด ซึ่งจะมีส่วนช่วยให้การเขียน CSS ของคุณแสดงผลได้ถูกต้องมากยิ่งขึ้นด้วยครับ
แต่หากคุณละเลยไม่ใส่แท็ก DOCTYPE เว็บบราวเซอร์ก็จะไม่รู้ว่าใช้กฏเกณฑ์ไหนดีในการแสดงผล และจะคิดเหมาเอาว่าหน้าเว็บของเราเป็นหน้าเว็บสมัยโบราณ(มาก) แล้วจะเลือกใช้กฏเกณฑ์แบบหยาบๆที่สุดหรือที่ฝรั่งเขาเรียกกันว่า Quirks Mode ในการแสดงผล เพื่อให้สามารถแสดงผลหน้าเว็บโบราณ(มาก)นั้นให้จงได้ไม่ว่าผลที่ได้จะน่าเกลียดขนาดไหนก็ตาม คราวนี้ล่ะไม่ว่าคุณจะเขียน CSS ได้เทพขนาดไหนก็อาจจะจอดไม่เป็นท่าเอาได้ง่ายๆ เพราะ CSS ที่คุณเขียนไม่สามารถแก้ไขการแสดงผลที่ผิดพลาดขอบเว็บบราวเซอร์ที่เกิดขึ้นตั้งแต่แรกให้ถูกต้องขึ้นมาได้ครับ
วิธีการใส่แท็ก DOCTYPE ที่ถูกต้อง
คุณจะต้องใส่แท็ก DOCTYPE บนบรรทัดแรกสุดของโค๊ตหน้าเว็บของคุณเท่านั้น ข้อมูลในแท็ก DOCTYPE จะต้องเป็นข้อมูลแรกที่เว็บบราวเซอร์อ่านเมื่อพบเจอกับหน้าเว็บของคุณ เพราะมันจะเป็นการบอกให้เว็บบราวเซอร์ได้รู้ทันทีว่าหน้าเว็บของคุณเป็นประเภทไหน เพื่อให้เว็บบราวเซอร์เลือกใช้กฏเกณฑ์ในการแสดงผลโค๊ตที่เหลือทั้งหมดในหน้าเว็บของคุณได้ถูกต้องที่สุด
DOCTYPE ประเภทต่างๆ
ขึ้นชื่อว่าเป็น DOCTYPE หรือประเภทของเอกสารแล้ว แสดงว่ามันต้องมีมากกว่า 1 ประเภทแน่นอน แต่ในที่นี่ผมขอพูดถึงเฉพาะ DOCTYPE ประเภทสำหรับหน้าเว็บในการแสดงผลบนหน้าจอคอมพิวเตอร์ทั่วไปเท่านั้นก่อนนะครับ ซึ่งโดยหลักๆจะมีดังต่อไปนี้ครับ โดยผมได้เตรียมโครงสร้างของแต่ละ DOCTYPE ไว้ให้เลย เผื่อให้คุณก็อปโค๊ตโครงสร้างไปใช้ต่อได้เลยครับ
DOCTYPE ประเภทสำหรับ HTML 4.01 แบบ Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
</html>
DOCTYPE ประเภทสำหรับ HTML 4.01 แบบ Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
</html>
DOCTYPE ประเภทสำหรับ XHTML 1.0 แบบ Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
</html>
DOCTYPE ประเภทสำหรับ XHTML 1.0 แบบ Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
</html>
*สังเกตได้ว่า DOCTYPE ของ XHTML เราจะต้องระบุภาษาที่ใช้แสดงบนหน้าเว็บของเราเพิ่มเติมเข้าไปด้วย ถ้าข้อมูลบนหน้าเว็บของเราหลักๆเป็นภาษาไทยให้ระบุในส่วนของ xml:lang=”th” lang=”th” แทนครับ โดยคุณสามารถเข้าไปดูตารางแสดงโค๊ตของแต่ละภาษาทั่วโลกได้ตามลิ้งก์นี้ครับ http://reference.sitepoint.com/html/lang-codes
เราควรจะเลือกใช้ DOCTYPE ประเภทไหนดี?
ตัวเลือกเยอะซะขนาดนี้เหลายท่านคงจะงงไม่รู้ว่าจะเลือกใช้ตัวไหนดี การเลือกใช้ DOCTYPE ประเภทไหนนั้นขึ้นอยู่กับว่าคุณจะเลือกเขียนโค๊ตหน้าเว็บเป็นแบบ HTML หรือ XHTML ด้วย ถ้าหน้าเว็บของคุณเป็นหน้าเว็บที่เขียนขึ้นมาใหม่ ผมแนะนำให้ขั้นต่ำสุดควรจะเลือกใช้ DOCTYPE ประเภท XHTML 1.0 แบบ Transitional หรือดีที่สุดคือใช้เป็น DOCTYPE ประเภท XHTML 1.0 แบบ Strict ไปเลย ที่ผมแนะนำให้เลือกเขียนเป็น XHTML มากกว่า HTML เพราะการเขียน XHTML มีกฏเกณฑ์ในการเขียนที่เคร่งครัดและรัดกุมกว่าการเขียน HTML อย่างมาก ซึ่งจะช่วยให้คุณฝึกวินัยการเขียนโค๊ตให้ได้ตามหลัก Web Standards ได้ดีที่สุด นอกจากนี้ยังช่วยให้การแปลงไฟล์ XHTML ที่คุณเขียนวันนี้เป็น XML ในอนาคตได้ง่ายขึ้นด้วย
เราจะเลือกอะไรดีระหว่าง DOCTYPE แบบ Transitional และ Strict
ผมแนะนำให้เลือกใช้ DOCTYPE แบบ Transitional เฉพาะเมื่อคุณต้องการรองรับโค๊ตเก่าๆที่ได้เขียนไว้นานแล้วหรือในกรณีที่คุณยังจำเป็นต้องใช้แท็กหรือ attribute บางตัวที่ต้องห้ามในแบบ Strict อยู่เท่านั้นครับ นอกเหนือจากนี้แล้วผมขอให้คุณเลือกใช้แต่เฉพาะ DOCTYPE แบบ Strict เท่านั้น เพราะเป้าหมายของเราคือการเขียนหน้าเว็บตามหลัก Web Standards ที่ต้องการแยกส่วนโครงสร้างและส่วนการแสดงผลของหน้าออกจากกันอย่างเด็ดขาด และเพื่อให้แน่ใจได้ว่าหน้าเว็บที่คุณเขียนในวันนี้จะสามารถรองรับเทคโนโลยีของเว็บบราวเซอร์ในอนาคตได้เป็นอย่างดีครับ
แท็กต้องห้ามสำหรับ DOCTYPE แบบ Strict
- <center>
- <font>
- <iframe>
- <strike>
- <u>
attribute ต้องห้ามสำหรับ DOCTYPE แบบ Strict
- align (เฉพาะที่ใช้ในแท็ก col, colgroup, tbody, td, tfoot, th, thead และ tr)
- language
- background
- bgcolor
- border (อนุญาตให้ใช้ได้เฉพาะในแท็ก table เท่านั้น)
- height (อนุญาตให้ใช้ได้เฉพาะในแท็ก img และ object เท่านั้น)
- hspace
- name (อนุญาตให้ได้ใช้เฉพาะ DOCTYPE ประเภท 4.01 Strict เท่านั้น)
- noshade
- nowrap
- target
- text
- link
- vlink
- alink
- vspace
- width (อนุญาตให้ใช้ได้เฉพาะในแท็ก img, object, table, col และ colgroup เท่านั้น)
จริงๆแล้วยังมี DOCTYPE สำหรับหน้าเว็บที่แสดงบนหน้าจอคอมพิวเตอร์อีกหลายประเภทอย่าง HTML 5 และ XHTML 1.1 ครับ แต่ ณ. เวลานี้ผมยังไม่แนะนำให้ใช้ครับ เพราะเว็บบราวเซอร์ที่ผู้ใช้งานส่วนใหญ่ยังใช้อยู่เป็นเวอร์ชั่นที่ยังรองรับการแสดงผลของ DOCTYPE ทั้ง 2 ประเภทนี้ไม่สมบูรณ์เท่าไหร่ นอกเสียจากว่าคุณรู้ว่ากลุ่มเป้าหมายของเว็บไซต์คุณใช้เว็บบราวเซอร์สมัยใหม่อย่าง Google Chrome, Firefox หรือ Opera เวอร์ชั่นใหม่ๆกันหมดแล้วเท่านั้นครับ
