HTML VS XHTML

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

XHTML เกิดจากการนำ HTML มารวมกับ XML ซึ่งคำสั่งต่างๆ นั้นจะยังเหมือน HTML แต่จะเข้มงวดในเรื่องโครงสร้างมากกว่า

XHTML คืออะไร?

  • XHTML ย่อมาจาก EXtensible HyperText Markup Language
  • XHTML ก็คือ XML กับ HTML รวมกัน แต่ XHTML มีโครงสร้างและภาษาที่เข้มงวดกว่า
  • XHTML เป็น HTML ที่ถูกนิยามให้เป็น XML application
  • XHTML สามารถรองรับการใช้งานบนทุกเบราว์เซอร์

ทำไมต้อง XHTML

XML หรือ Extensible Markup Language เป็นภาษา Markup ที่จะสร้างชุดคำสั่งสำหรับจัดรูปแบบข้อความในรูปแบบที่ทำให้เครื่องและมนุษย์สามารถอ่านได้

XHTML ได้รับการพัฒนาเพื่อให้ HTML สามารถขยายและยืดหยุ่นในการทำงานได้มากขึ้นกับข้อมูลในรูปแบบต่างๆ ได้ (เช่น XML) นอกจากนี้ยังช่วยให้เบราว์เซอร์จะไม่ต้องสนใจใน Error ที่เกิดขึ้นในหน้าเพจ HTML ส่งผลให้เบราว์เซอร์ทำการแสดงหน้าเว็บนั้นๆ ออกมาได้ ถึงแม้จะมีข้อผิดพลาดหรือ Error เกิดขึ้นกับหน้าเพจนั้น ดังนั้น ด้วยโครงสร้างที่เข้มงวด XHTML จึงมีไว้เพื่อจัดการกับข้อผิดพลาดเหล่านี้

ความแตกต่างระหว่าง XHTML กับ HTML

  • ต้องมี <!DOCTYPE>
  • Attribute XMLNS จะต้องมี <html>
  • ต้องมี <html>, <head>, <title>, และ <body>
  • Elements จะต้องซ้อนกันอย่างเหมาะสม
  • Elements ต้องมี Tag ปิดเสมอ
  • Elements จะต้องใช้ตัวพิมพ์เล็กเสมอ
  • Attribute จะต้องใช้ตัวพิมพ์เล็กเสมอ
  • ค่าของ Attribute จะต้องอยู่ในเครื่องหมายคำพูดเสมอ
  • ห้ามย่อขนาดของ 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>

Attribute จะต้องใช้ตัวพิมพ์เล็กเสมอ

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 จะต้องอยู่ในเครื่องหมายคำพูดเสมอ

ตัวอย่างที่ดี

<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 />
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯