XHTML เป็น HTML เขียนเป็น XML
XHTML คืออะไร?
- XHTML ย่อมาจาก Extensible Hyper Text Markup Language
- XHTML เกือบจะเหมือนกับ HTML
- XHTML เป็นเข้มงวดกว่า HTML
- XHTML เป็น HTML กำหนดเป็นโปรแกรม XML
- XHTML รับการสนับสนุนจากเบราว์เซอร์ที่สำคัญทั้งหมด
ทำไม XHTML?
หลายหน้าบนอินเทอร์เน็ตประกอบด้วย "bad" HTML
โค้ด HTML นี้ทำงานได้ดีในเบราว์เซอร์ส่วนใหญ่ (even if it does not follow the HTML rules) :
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>ตลาดวันนี้ประกอบด้วยเทคโนโลยีเบราว์เซอร์ที่แตกต่างกัน เบราว์เซอร์บางคนทำงานบนคอมพิวเตอร์และเบราว์เซอร์บางส่วนทำงานบนโทรศัพท์มือถือหรืออุปกรณ์ขนาดเล็กอื่น ๆ อุปกรณ์ขนาดเล็กมักจะขาดทรัพยากรหรืออำนาจในการตีความ "bad" มาร์กอัป
XML เป็นภาษามาร์กอัปที่เอกสารจะต้องทำเครื่องหมายอย่างถูกต้อง (be "well-formed")
หากคุณต้องการที่จะศึกษา XML โปรดอ่าน กวดวิชา XML
โดยการรวมจุดแข็งของ HTML และ XML ให้ XHTML ได้รับการพัฒนา
XHTML เป็น HTML การออกแบบใหม่เป็น XML
ความแตกต่างที่สำคัญที่สุดจาก HTML:
โครงสร้างของเอกสาร
- XHTML DOCTYPE มีผลบังคับใช้
- xmlns แอตทริบิวต์ใน <html> มีผลบังคับใช้
- <html> , <head> , <title> และ <body> มีผลบังคับใช้
องค์ประกอบ XHTML
- องค์ประกอบ XHTML จะต้อง properly nested
- องค์ประกอบ XHTML จะต้อง closed
- องค์ประกอบ XHTML จะต้องอยู่ใน lowercase
- เอกสาร XHTML ต้องมี one root element
แอตทริบิวต์ XHTML
- ชื่อแอตทริบิวต์จะต้องอยู่ใน lower case
- ค่าแอตทริบิวต์ที่ต้องได้รับการ quoted
- แอตทริบิวต์ลดเป็น forbidden
<!DOCTYPE ....> มีผลบังคับใช้
เอกสาร XHTML ต้องมีประกาศ DOCTYPE XHTML
รายการที่สมบูรณ์ของทุก XHTML doctypes พบในแท็ก HTML อ้างอิงของเรา
<html> , <head> , <title> และ <body> องค์ประกอบยังต้องมีอยู่และ xmlns แอตทริบิวต์ใน <html> ต้องระบุ namespace XML สำหรับเอกสาร
ตัวอย่างนี้แสดงเอกสาร XHTML กับต่ำสุดของแท็กต้อง:
<!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">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>XHTML องค์ประกอบจะต้องซ้อนกันอย่างถูกต้อง
ใน HTML, องค์ประกอบบางอย่างสามารถซ้อนกันไม่ถูกต้องในแต่ละอื่น ๆ เช่นนี้
<b><i>This text is bold and italic</b></i>ใน XHTML, องค์ประกอบทั้งหมดจะต้องซ้อนกันอย่างถูกต้องในแต่ละอื่น ๆ เช่นนี้
<b><i>This text is bold and italic</i></b>XHTML องค์ประกอบจะต้องปิดให้บริการ
นี้เป็นธรรม:
<p>This is a paragraph
<p>This is another paragraphนี่คือที่ถูกต้อง:
<p>This is a paragraph</p>
<p>This is another paragraph</p>องค์ประกอบที่ว่างเปล่ายังต้องปิดให้บริการ
นี้เป็นธรรม:
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 องค์ประกอบจะต้องอยู่ในกรณีที่ต่ำกว่า
นี้เป็นธรรม:
<BODY>
<P>This is a paragraph</P>
</BODY>นี่คือที่ถูกต้อง:
<BODY>
<P>This is a paragraph</P>
</BODY>XHTML แอตทริบิวต์ชื่อจะต้องอยู่ในกรณีที่ต่ำกว่า
นี้เป็นธรรม:
<table WIDTH="100%">นี่คือที่ถูกต้อง:
<table WIDTH="100%">ค่าแอตทริบิวต์จะต้องยกมา
นี้เป็นธรรม:
<table width=100%>นี่คือที่ถูกต้อง:
<table WIDTH="100%">แอตทริบิวต์ลดเป็นสิ่งต้องห้าม
ไม่ถูกต้อง:
<input type="checkbox" name="vehicle" value="car" checked />แก้ไข:
<input type="checkbox" name="vehicle" value="car" checked="checked" />ไม่ถูกต้อง:
<input type="text" name="lastname" disabled />แก้ไข:
<input type="text" name="lastname" disabled="disabled" />วิธีการแปลงจาก HTML เพื่อ XHTML
- เพิ่ม XHTML <!DOCTYPE> ไปยังบรรทัดแรกของทุกหน้า
- เพิ่ม xmlns แอตทริบิวต์องค์ประกอบ HTML ของทุกหน้า
- เปลี่ยนชื่อองค์ประกอบทั้งหมดเป็นตัวพิมพ์เล็ก
- ปิดองค์ประกอบที่ว่างเปล่าทั้งหมด
- เปลี่ยนชื่อแอตทริบิวต์ทั้งหมดเป็นตัวพิมพ์เล็ก
- อ้างทุกค่าแอตทริบิวต์
ตรวจสอบ XHTML กับ W3C Validator
ใส่ที่อยู่เว็บของคุณในช่องด้านล่าง: