XHTML - ไวยากรณ์

ไวยากรณ์ XHTML คล้ายกับไวยากรณ์ HTML มากและองค์ประกอบ HTML ที่ถูกต้องเกือบทั้งหมดก็ใช้ได้ใน XHTML เช่นกัน แต่เมื่อคุณเขียนเอกสาร XHTML คุณต้องให้ความสนใจเป็นพิเศษเพื่อให้เอกสาร HTML ของคุณสอดคล้องกับ XHTML

ต่อไปนี้เป็นประเด็นสำคัญที่ต้องจำในขณะที่เขียนเอกสาร XHTML ใหม่หรือแปลงเอกสาร HTML ที่มีอยู่เป็นเอกสาร XHTML -

เขียนคำประกาศ DOCTYPE ที่จุดเริ่มต้นของเอกสาร XHTML
เขียนแท็กและแอตทริบิวต์ XHTML ทั้งหมดเป็นตัวพิมพ์เล็กเท่านั้น
ปิดแท็ก XHTML ทั้งหมดอย่างถูกต้อง
ซ้อนแท็กทั้งหมดอย่างถูกต้อง
อ้างถึงค่าแอตทริบิวต์ทั้งหมด
ห้ามการย่อขนาดแอตทริบิวต์
แทนที่ name แอตทริบิวต์ด้วย id แอตทริบิวต์
เลิกใช้ language แอตทริบิวต์ของแท็กสคริปต์

นี่คือคำอธิบายโดยละเอียดของกฎ XHTML ข้างต้น -

การประกาศ DOCTYPE

เอกสาร XHTML ทั้งหมดต้องมีการประกาศ DOCTYPE เมื่อเริ่มต้น มีการประกาศ DOCTYPE สามประเภทซึ่งจะกล่าวถึงโดยละเอียดในบท XHTML Doctypes นี่คือตัวอย่างของการใช้ DOCTYPE -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ความไวกรณี

XHTML เป็นภาษามาร์กอัปที่คำนึงถึงขนาดตัวพิมพ์ แท็กและแอตทริบิวต์ XHTML ทั้งหมดต้องเขียนเป็นตัวพิมพ์เล็กเท่านั้น

<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>

<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>

ในตัวอย่าง Href และแท็กจุดยึด A ไม่ได้เป็นตัวพิมพ์เล็กจึงไม่ถูกต้อง

การปิดแท็ก

แท็ก XHTML แต่ละแท็กควรมีแท็กปิดที่เท่ากันแม้แต่องค์ประกอบที่ว่างเปล่าก็ควรมีแท็กปิดด้วย นี่คือตัวอย่างที่แสดงวิธีการใช้แท็กที่ถูกต้องและไม่ถูกต้อง -

<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.

<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >

ไวยากรณ์ต่อไปนี้แสดงวิธีที่ถูกต้องในการเขียนแท็กด้านบนใน XHTML ความแตกต่างคือที่นี่เราได้ปิดแท็กทั้งสองอย่างถูกต้องแล้ว

<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>

<!-- This is also valid now -->
<img src="/images/xhtml.gif" />

คำพูดแอตทริบิวต์

ต้องระบุค่าทั้งหมดของแอตทริบิวต์ XHTML มิฉะนั้นเอกสาร XHTML ของคุณจะถือว่าเป็นเอกสารที่ไม่ถูกต้อง นี่คือตัวอย่างการแสดงไวยากรณ์ -

<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />

<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />

Attribute Minimization

XHTML ไม่อนุญาตให้ย่อขนาดแอตทริบิวต์ หมายความว่าคุณต้องระบุแอตทริบิวต์และมูลค่าของมันอย่างชัดเจน ตัวอย่างต่อไปนี้แสดงความแตกต่าง -

<!-- This is invalid in XHTML -->
<option selected>

<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">

นี่คือรายการของแอตทริบิวต์ที่ย่อเล็กสุดใน HTML และวิธีที่คุณต้องเขียนใน XHTML -

สไตล์ HTML	สไตล์ XHTML
กะทัดรัด	กะทัดรัด = "กะทัดรัด"
ตรวจสอบแล้ว	checked = "ตรวจสอบ"
ประกาศ	ประกาศ = "ประกาศ"
อ่านเท่านั้น	readonly = "อ่านอย่างเดียว"
ปิดการใช้งาน	disabled = "ปิดใช้งาน"
เลือกแล้ว	selected = "เลือก"
ผัดผ่อน	defer = "defer"
ismap	ismap = "ismap"
nohref	nohref = "nohref"
จมูก	noshade = "noshade"
nowrap	nowrap = "nowrap"
หลาย	multiple = "หลาย"
noresize	noresize = "noresize"

IDแอตทริบิวต์

แอตทริบิวต์ id แทนที่แอตทริบิวต์ name แทนที่จะใช้ name = "name" XHTML ต้องการใช้ id = "id" ตัวอย่างต่อไปนี้แสดงให้เห็นว่า -

<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />

<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />

ภาษาแอตทริบิวต์

แอตทริบิวต์ภาษาของแท็กสคริปต์เลิกใช้งานแล้ว ตัวอย่างต่อไปนี้แสดงความแตกต่างนี้ -

<!-- This is invalid in XHTML -->

<script language="JavaScript" type="text/JavaScript">
   document.write("Hello XHTML!");
</script>

<!-- Correct XHTML way of writing this is as follows -->

<script type="text/JavaScript">
   document.write("Hello XHTML!");
</script>

แท็กที่ซ้อนกัน

คุณต้องซ้อนแท็ก XHTML ทั้งหมดอย่างถูกต้อง มิฉะนั้นเอกสารของคุณจะถือว่าเป็นเอกสาร XHTML ที่ไม่ถูกต้อง ตัวอย่างต่อไปนี้แสดงไวยากรณ์ -

<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>

<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>

ข้อห้ามองค์ประกอบ

ไม่อนุญาตให้องค์ประกอบต่อไปนี้มีองค์ประกอบอื่นอยู่ภายใน ข้อห้ามนี้ใช้กับความลึกทั้งหมดของการทำรัง หมายความว่ามันรวมองค์ประกอบทั้งหมดจากมากไปน้อย

ธาตุ	ข้อห้าม
<a>	ต้องไม่มีองค์ประกอบ <a> อื่น ๆ
<pre>	ต้องไม่มีองค์ประกอบ <img>, <object>, <big>, <small>, <sub> หรือ <sup>
<button>	ต้องไม่มีองค์ประกอบ <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> หรือ <isindex>
<label>	ต้องไม่มีองค์ประกอบ <label> อื่น ๆ
<form>	ต้องไม่มีองค์ประกอบ <form> อื่น ๆ

เอกสาร XHTML ขั้นต่ำ

ตัวอย่างต่อไปนี้แสดงเนื้อหาขั้นต่ำของเอกสาร XHTML 1.0 -

<?xml version="1.0" encoding="UTF-8"?>

<!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/TR/xhtml1" xml:lang="en" lang="en">
   <head>
      <title>Every document must have a title</title>
   </head>
	
   <body>
      ...your content goes here...
   </body>
</html>