ชั้น 29 ออฟฟิศเศส แอท เซ็นทรัลเวิลด์

999/9 พระราม 1 กรุงเทพฯ 10330

บริการตลอด 24 ชั่วโมง

ทุกวัน ไม่เว้นวันหยุด

0-2107-3466

โทรเลยดิจะรออะไร

Facebook-f Twitter Youtube
Home » HTML » HTML VS XHTML

HTML VS XHTML

XHTML คืออะไร?

XHTML ย่อมาจาก Extensible HyperText Markup Language เป็นการผสมผสานระหว่าง HTML และ XML โดยมีโครงสร้างและหลักไวยากรณ์ที่ เข้มงวดกว่า HTML

คุณสมบัติของ XHTML:
  • เป็น HTML ที่ถูกนิยามให้เป็น XML application
  • รองรับการทำงานบนทุกเบราว์เซอร์
  • โครงสร้างภายในต้องมีความถูกต้องและสมบูรณ์ เช่น การเปิด–ปิดแท็กให้ครบ และใช้ตัวพิมพ์เล็กทั้งหมด

ทำไมต้องใช้ XHTML

XML เป็นภาษามาร์กอัป (Markup Language) ที่กำหนดให้ทุกเอกสารต้องถูกเขียนอย่างถูกต้องหรือ “well-formed”
XHTML ถูกพัฒนาขึ้นเพื่อทำให้ HTML มีความยืดหยุ่นมากขึ้น และสามารถทำงานร่วมกับรูปแบบข้อมูลอื่น ๆ (เช่น XML) ได้ดีขึ้น

นอกจากนี้ เบราว์เซอร์มัก “ละเลยข้อผิดพลาด” ในหน้า HTML และยังคงพยายามแสดงผลต่อไป แม้โค้ดจะผิดรูปแบบ
แต่ XHTML กำหนดให้ต้องเขียนอย่างถูกต้องตามหลัก หากโค้ดไม่ถูกต้อง เบราว์เซอร์อาจไม่แสดงผลเลย

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

  • ต้องมี <!DOCTYPE html> เสมอ
  • ต้องมีแอตทริบิวต์ http://www.w3.org/1999/xhtml ใน <html>
  • <html>, <head>, <title>, และ <body> ต้องมีครบ
  • แท็กต้องซ้อนกันอย่างถูกต้อง
  • แท็กต้องปิดเสมอ
  • ชื่อแท็กต้องเป็นตัวพิมพ์เล็ก
  • ชื่อแอตทริบิวต์ต้องเป็นตัวพิมพ์เล็ก
  • ค่าของแอตทริบิวต์ต้องอยู่ในเครื่องหมายคำพูด
  • ห้ามย่อแอตทริบิวต์

ต้องมี <!DOCTYPE ...>

เอกสาร XHTML ต้องมีคำประกาศ <!DOCTYPE> เพื่อระบุประเภทของเอกสารอย่างชัดเจน

นอกจากนี้ต้องมีแท็กให้ครบ: <html>, <head>, <title>, และ <body>
พร้อมกำหนด XML namespace ในแท็ก <html> ผ่านแอตทริบิวต์ xmlns ภายในแท็ก <html> เพื่อกำหนด XML namespace ของเอกสาร

				
					<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>ชื่อเรื่องของเอกสาร</title>
</head>
<body>

  ข้อความ...

</body>
</html>

แท็กต้องซ้อนอย่างถูกต้อง

ใน XHTML ต้องมีการเปิดและปิดแท็กตามลำดับที่ถูกต้อง เช่น
ตัวอย่างการวาง Elements ที่ดี 
				
					<b><i>Some text</i></b>
ตัวอย่างการวาง Element ที่ไม่ดี 
				
					<b><i>Some text</b></i>

แท็กทุกตัวต้องปิดเสมอ

XHTML จะต้องมีแท็กปิดด้วยเสมอดังตัวอย่าง

ตัวอย่างที่ดี 
				
					<p>This is a paragraph</p>
<p>This is another paragraph</p>
ตัวอย่างที่ไม่ดี 
				
					<p>This is a paragraph
<p>This is another paragraph

แท็กว่าง (Empty Elements) ต้องปิดด้วย

ใน XHTML ต้องปิดแท็กว่างด้วยเครื่องหมาย / เสมอ
ตัวอย่างที่ดี 
				
					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">

ชื่อแท็กต้องเป็นตัวพิมพ์เล็ก

XHTML แท็กต้องเขียนด้วยตัวพิมพ์เล็ก (lowercase) เสมอ
ตัวอย่างที่ดี 
				
					<body>
<p>This is a paragraph</p>
</body>
ตัวอย่างที่ไม่ดี 
				
					<BODY>
<P>This is a paragraph</P>
</BODY>

ชื่อ Attribute ต้องเป็นตัวพิมพ์เล็ก

XHTML แอตทริบิวต์ต้องเขียนด้วยตัวพิมพ์เล็ก (lowercase) เสมอ
ตัวอย่างที่ดี 
				
					<a href="https://www.hostatom.com/html/">hostatom บริการ web hosting</a>
ตัวอย่างที่ไม่ดี 
				
					<a HREF="https://www.hostatom.com/html/">hostatom บริการ web hosting</a>

ค่าของ 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 Minimization)

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 />
Categories