XHTML เกิดจากการนำ HTML มารวมกับ XML ซึ่งคำสั่งต่างๆ นั้นจะยังเหมือน HTML แต่จะเข้มงวดในเรื่องโครงสร้างมากกว่า
XHTML คืออะไร?
- XHTML ย่อมาจาก EXtensible HyperText Markup Language
- XHTML ก็คือ XML กับ HTML รวมกัน แต่ XHTML มีโครงสร้างและภาษาที่เข้มงวดกว่า
- XHTML เป็น HTML ที่ถูกนิยามให้เป็น XML application
- XHTML สามารถรองรับการใช้งานบนทุก Browser
ทำไมต้อง XHTML
XML หรือ Extensible Markup Language เป็นภาษา Markup ที่จะสร้างชุดคำสั่งสำหรับจัดรูปแบบข้อความในรูปแบบที่ทำให้เครื่องและมนุษย์สามารถอ่านได้
XHTML ได้รับการพัฒนาเพื่อให้ HTML สามารถขยายและยืดหยุ่นในการทำงานได้มากขึ้นกับข้อมูลในรูปแบบต่างๆ ได้ (เช่น XML) นอกจากนี้ยังช่วยให้ browser ไม่ต้องสนใจใน error ที่เกิดขึ้นในหน้าเพจ HTML ส่งผลให้ browser ทำการแสดงหน้าเว็บนั้นๆ ออกมาได้ ถึงแม้จะมีข้อผิดพลาดหรือ error เกิดขึ้นกับหน้าเพจนั้น ดังนั้น ด้วยโครงสร้างที่เข้มงวด XHTML จึงมีไว้เพื่อจัดการกับข้อผิดพลาดเหล่านี้
ความแตกต่างระหว่าง XHTML กับ HTML
- XHTML ต้องมี <!DOCTYPE>
- XHTML Attribute xmlns จะต้องมี <html>
- XHTML ต้องมี <html>, <head>, <title>, และ <body>
- XHTML Elements จะต้องซ้อนกันอย่างเหมาะสม
- XHTML Elements ต้องมี tag ปิดเสมอ
- XHTML Elements จะต้องใช้ตัวพิมพ์เล็กเสมอ
- XHTML Atttribute จะต้องใช้ตัวพิมพ์เล็กเสมอ
- XHTML ค่าของ Attibute จะต้องอยู่ในเครื่องหมายคำพูดเสมอ
- XHTML ห้ามย่อขนาดของ Attribute
ต้องมี <!DOCTYPE>
ใน XHTML ต้องมีการประกาศ <!DOCTYPE> เสมอ และต้องมี elements <html>, <head>, <title>, และ <body> อยู่ด้วยเสมอ และ ใน <html> attribute xmlns จะต้องระบุ namespace ของ xml ลงไปด้วย
ตัวอย่าง การเขียน XHTML จะต้องประกอบด้วย tag ต่อไปนี้
<!DOCTYPE html PUBLIC "-//hostatom//DTD XHTML 1.1//EN"
"http://www.hostatom.com/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.hostatom/1999/xhtml">
<head>
<title>ชื่อเรื่องของเอกสาร</title>
</head>
<body>
ข้อความ...
</body>
</html>
Elements จะต้องซ้อนกันอย่างเหมาะสม
ใน XHTML จะต้องวาง element ซ้อนกันอย่างเหมาะสม
ตัวอย่างการวาง elements ที่ดี
<b><i>Some text</i></b>
ตัวอย่างการวาง element ที่ไม่ดี
<b><i>Some text</b></i>
Elements ต้องมี tag ปิดเสมอ
XHTML จะต้องมี tag ปิดด้วยเสมอดังตัวอย่าง
ตัวอย่างที่ดี
<p>This is a paragraph</p>
<p>This is another paragraph</p>
ตัวอย่างที่ไม่ดี
<p>This is a paragraph
<p>This is another paragraph
Elements XHTML ที่เป็นค่าว่างจะต้องมีปิดเสมอ
ใน XHTML หาก elements ใดเป็นค่าว่าง จะต้องมีปิดด้วยเสมอ ดังตัวอย่างต่อไปนี้
ตัวอย่างที่ดี
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
ตัวอย่างที่ไม่ดี
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
Elements จะต้องใช้ตัวพิมพ์เล็กเสมอ
Elements XHTML นั้นจะต้องใช้ตัวพิมพ์เล็กเสมอ
ตัวอย่างที่ดี
<body>
<p>This is a paragraph</p>
</body>
ตัวอย่างที่ไม่ดี
<BODY>
<P>This is a paragraph</P>
</BODY>
Atttribute จะต้องใช้ตัวพิมพ์เล็กเสมอ
Attribute ของ XHTML จะต้องใช้ตัวพิมพ์เล็กเสมอ
ตัวอย่างที่ดี
<a href="https://www.hostatom.com/html/">hostatom บริการ web hosting</a>
ตัวอย่างที่ไม่ดี
<a HREF="https://www.hostatom.com/html/">hostatom บริการ web hosting</a>
ค่าของ Attibute จะต้องอยู่ในเครื่องหมายคำพูดเสมอ
ค่า Attribute ของ XHTML จะต้องอยู่ในเครื่องหมายคำพูดเสมอ
ตัวอย่างที่ดี
<a href="https://www.hostatom.com/html/">hostatom บริการ web hosting</a>
ตัวอย่างที่ไม่ดี
<a href=https://www.hostatom.com/html/>hostatom บริการ web hosting</a>
ห้ามย่อขนาดของ Attribute
ตัวอย่าง การห้ามย่อขนาดของ attribute XHTML
ตัวอย่างที่ดี
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />
ตัวอย่างที่ไม่ดี
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />