XHTML (Extensible HyperText Markup Language) นั้น จริง ๆ แล้วมันคือร่างแปลงของ HTML ที่มีความเข้มงวดและเป็นระเบียบมากขึ้นตามมาตรฐานของ XML ครับ
ถ้าเปรียบ HTML เป็นภาษาที่ค่อนข้างยืดหยุ่น (ลืมปิดแท็กบ้างก็ยังแสดงผลได้) XHTML ก็เหมือนคนเจ้าระเบียบที่ทุกอย่างต้องเป๊ะ เพื่อให้โค้ดสะอาดและนำไปใช้งานต่อกับระบบอื่น ๆ ได้ง่ายขึ้นครับ
กฎเหล็กที่ห้ามลืมใน XHTML
มีกฎสำคัญ 3 ข้อที่ต้องจำไว้เสมอ
- ต้องปิดแท็กเสมอ: แท็กไหนเปิดแล้วต้องปิด (เช่น
<p>ข้อความ</p>) แม้แต่แท็กเดี่ยวก็ต้องมีตัวปิดในตัวเอง (เช่น<br />,<img />) - ตัวพิมพ์เล็กเท่านั้น: แท็กและ attribute ทั้งหมดต้องเป็นอักษรตัวพิมพ์เล็ก (เช่น
<p>ไม่ใช่<P>) - ซ้อนแท็กให้ถูกต้อง: แท็กที่เปิดทีหลังต้องปิดก่อนเสมอ (เช่น
<strong><em>ข้อความ</em></strong>)
โครงสร้างพื้นฐานของเอกสาร XHTML
ทุกครั้งที่จะเขียนเอกสาร XHTML โครงสร้างหลักจะหน้าตาแบบนี้
<?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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="th" lang="th">
<head>
<title>ชื่อหัวข้อบทความ</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>
สรุปจุดสังเกตจากโค้ดด้านบน
<html xmlns="...">: มีการประกาศ XML Namespace เสมอ<meta ... />และ<br />: มีเครื่องหมาย/ปิดท้ายแท็กเสมอ เพราะเป็นแท็กเดี่ยว (Empty Elements)xml:lang="th" lang="th": กำหนดภาษาเป็นตัวพิมพ์เล็กทั้งหมด
ทำไม่ XHTML ไม่ได้รับความนิยม
หตุผลหลักที่ XHTML ไม่ได้รับความนิยม และถูกลดบทบาทลงจนกลายเป็นเพียงหน้าหนึ่งในประวัติศาสตร์ของเว็บเทคโนโลยี (โดยถูกแทนที่ด้วย HTML5 อย่างเบ็ดเสร็จ) เกิดจากความขัดแย้งระหว่าง “อุดมคติของนักพัฒนามาตรฐาน” กับ “ความเป็นจริงของคนทำงานและเบราว์เซอร์”
กฎเหล็กที่โหดเกินไป (The “Yellow Screen of Death”)
XHTML ถูกออกแบบมาบนพื้นฐานของ XML ซึ่งมีกฎที่เรียกว่า Draconian Error Handling * ถ้าคุณเขียนโค้ดผิดแม้แต่นิดเดียว เช่น ลืมปิดแท็ก <p>, ลืมใส่เครื่องหมาย / ใน <br /> หรือพิมพ์แท็กตัวใหญ่
บราว์เซอร์จะไม่ยอมแสดงผลหน้าเว็บนั้นเลย แต่จะแสดงหน้าจอว่างเปล่าพร้อมข้อความแจ้งเตือนข้อผิดพลาดสีเหลือง (XML Parsing Error) แทน
ต่างจาก HTML แบบเดิมที่เบราว์เซอร์จะพยายามเดาใจและแสดงผลส่วนที่เหลือให้ (Forgiving Nature) ซึ่งทำให้นักพัฒนาและเจ้าของเว็บไซต์ไม่ยากเสี่ยงฟีเจอร์นี้บนโปรดักชัน เพราะความผิดพลาดเล็ก ๆ อาจทำหน้าเว็บพังทั้งหน้า
ปัญหาเรื่อง MIME Type (IE เจ้าปัญหา)
เพื่อให้ XHTML ทำงานเป็น XML เต็มรูปแบบอย่างแท้จริง เว็บเซิร์ฟเวอร์ต้องส่ง Content-Type เป็น application/xhtml+xml
- ทว่าในยุคนั้น Internet Explorer (IE) ซึ่งเป็นเบราว์เซอร์ที่มีผู้ใช้งานมากที่สุดในโลกและราชการ (โดยเฉพาะ IE6, IE7, IE8) ไม่รองรับ MIME Type นี้ครับ ถ้าส่งไปมันจะฟ้องให้ดาวน์โหลดไฟล์แทนที่จะเปิดหน้าเว็บ
- นักพัฒนาจึงต้องจำใจส่ง Content-Type เป็น
text/htmlแทน ซึ่งทำให้เบราว์เซอร์มองมันเป็นแค่ HTML ธรรมดา และข้ามกฎการตรวจสอบของ XML ไป… กลายเป็นว่าที่อุตส่าห์เขียนเข้มงวดมาแทบไม่มีประโยชน์เลย
ความขัดแย้งใน W3C และการกำเนิดของ HTML5
ในช่วงต้นปี 2000 องค์กร W3C (ผู้กำหนดมาตรฐานเว็บ) พยายามจะเข็น XHTML 2.0 ออกมา ซึ่งเวอร์ชันนี้จะไม่รองรับโค้ดเก่าเลย (Backward Incompatible) หมายความว่าเว็บเก่า ๆ บนโลกนี้จะเปิดบน XHTML 2.0 ไม่ได้เลย
กลุ่มผู้พัฒนาเบราว์เซอร์หลักในเวลานั้น (Mozilla, Opera, Apple) มองว่าแนวคิดนี้หลุดโลกและไม่ตอบโจทย์การใช้งานจริง จึงรวมตัวกันตั้งกลุ่มใหม่ชื่อ WHATWG แล้วแอบพัฒนามาตรฐานใหม่ที่เน้นความยืดหยุ่น รองรับเว็บเก่า และเพิ่มฟีเจอร์ที่เว็บยุคใหม่ต้องการจริง ๆ (เช่น แท็ก <video>, <audio>, <canvas>) ซึ่งสิ่งนั้นต่อมาก็คือ HTML5 นั่นเอง
HTML5 ตอบโจทย์กว่าในทุกมิติ
เมื่อ HTML5 เปิดตัว มันลบจุดอ่อนของทั้ง HTML เก่าและ XHTML ออกไปทั้งหมด
- ยืดหยุ่นแต่มีมาตรฐาน: HTML5 มีการกำหนดวิธีการจัดการข้อผิดพลาด (Error Handling) ไว้อย่างชัดเจน ทำให้ทุกเบราว์เซอร์แสดงผลโค้ดที่ผิดพลาดออกมาเหมือนกัน ไม่ใช่หยุดทำงานแบบ XHTML
- เขียนสไตล์ XHTML ได้: ถ้าใครชอบความสะอาดของ XHTML ก็สามารถเขียน HTML5 ให้มีแท็กปิด มี Attribute ครบถ้วนได้ (เรียกว่า XHTML-style syntax) โดยที่เบราว์เซอร์ไม่ปฏิเสธการทำงาน
💡 สรุปในมุมมองคนทำงาน
XHTML พังเพราะ “ตึงเกินไป” เหมือนพระพุทธเจ้าเที่ยบไว้กับ พิณสามสาย ในยุคที่อินเทอร์เน็ตต้องการความรวดเร็วและการเติบโตอย่างก้าวกระโดด HTML5 จึงกลายเป็นผู้ชนะเพราะมีความสมดุลมากกว่า ยอมรับความผิดพลาดของมนุษย์ได้ แต่ก็ให้ฟีเจอร์ที่ทรงพลังตอบโจทย์ยุค Web 2.0 ครับ
อ่านเพิ่มเติม