XHTML - Cú pháp

Cú pháp XHTML rất giống với cú pháp HTML và hầu như tất cả các phần tử HTML hợp lệ cũng hợp lệ trong XHTML. Nhưng khi bạn viết một tài liệu XHTML, bạn cần chú ý thêm một chút để làm cho tài liệu HTML của bạn tuân thủ XHTML.

Dưới đây là những điểm quan trọng cần nhớ khi viết tài liệu XHTML mới hoặc chuyển đổi tài liệu HTML hiện có thành tài liệu XHTML -

Viết khai báo DOCTYPE ở đầu tài liệu XHTML.
Chỉ viết tất cả các thẻ và thuộc tính XHTML bằng chữ thường.
Đóng tất cả các thẻ XHTML đúng cách.
Lồng tất cả các thẻ đúng cách.
Trích dẫn tất cả các giá trị thuộc tính.
Giảm thiểu thuộc tính cấm.
Thay thế cái name thuộc tính với id thuộc tính.
Không chấp nhận language thuộc tính của thẻ script.

Đây là giải thích chi tiết về các quy tắc XHTML ở trên -

Khai báo DOCTYPE

Tất cả các tài liệu XHTML phải có khai báo DOCTYPE khi bắt đầu. Có ba loại khai báo DOCTYPE, sẽ được thảo luận chi tiết trong chương XHTML Doctypes. Đây là một ví dụ về việc sử dụng DOCTYPE -

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

Phân biệt chữ hoa chữ thường

XHTML là ngôn ngữ đánh dấu phân biệt chữ hoa chữ thường. Tất cả các thẻ và thuộc tính XHTML chỉ cần được viết bằng chữ thường.

<!-- 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>

Trong ví dụ, Href và thẻ neo A không ở dạng chữ thường, vì vậy nó không chính xác.

Đóng thẻ

Mỗi và mọi thẻ XHTML phải có một thẻ đóng tương đương, ngay cả các phần tử trống cũng phải có thẻ đóng. Đây là một ví dụ cho thấy các cách sử dụng thẻ hợp lệ và không hợp lệ -

<!-- 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" >

Cú pháp sau đây cho thấy cách viết đúng các thẻ trên trong XHTML. Sự khác biệt là ở đây chúng tôi đã đóng cả hai thẻ đúng cách.

<!-- 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" />

Trích dẫn thuộc tính

Tất cả các giá trị của thuộc tính XHTML phải được trích dẫn. Nếu không, tài liệu XHTML của bạn được coi là tài liệu không hợp lệ. Đây là ví dụ hiển thị cú pháp -

<!-- 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" />

Giảm thiểu thuộc tính

XHTML không cho phép thu nhỏ thuộc tính. Nó có nghĩa là bạn cần phải trình bày rõ ràng thuộc tính và giá trị của nó. Ví dụ sau đây cho thấy sự khác biệt -

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

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

Đây là danh sách các thuộc tính được thu nhỏ trong HTML và cách bạn cần viết chúng trong XHTML -

Kiểu HTML	Kiểu XHTML
gọn nhẹ	compact = "nhỏ gọn"
đã kiểm tra	đã kiểm tra = "đã kiểm tra"
khai báo	tuyên bố = "khai báo"
chỉ đọc	readonly = "chỉ đọc"
tàn tật	Disable = "bị vô hiệu hóa"
đã chọn	select = "đã chọn"
hoãn lại	defer = "trì hoãn"
bản đồ	ismap = "ismap"
nohref	nohref = "nohref"
không có bóng râm	noshade = "noshade"
bây giờ	nowrap = "nowrap"
bội số	nhiều = "nhiều"
không có kích thước	noresize = "noresize"

Các id Thuộc tính

Thuộc tính id thay thế thuộc tính tên. Thay vì sử dụng name = "name", XHTML ưu tiên sử dụng id = "id". Ví dụ sau đây cho thấy cách -

<!-- 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" />

Các ngôn ngữ Thuộc tính

Thuộc tính ngôn ngữ của thẻ script không được dùng nữa. Ví dụ sau đây cho thấy sự khác biệt này:

<!-- 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>

Thẻ lồng nhau

Bạn phải lồng tất cả các thẻ XHTML đúng cách. Nếu không, tài liệu của bạn được coi là tài liệu XHTML không chính xác. Ví dụ sau đây cho thấy cú pháp:

<!-- 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>

Yếu tố Cấm

Các phần tử sau không được phép có bất kỳ phần tử nào khác bên trong chúng. Điều cấm này áp dụng cho tất cả các độ sâu làm tổ. Có nghĩa là, nó bao gồm tất cả các yếu tố giảm dần.

Thành phần	Cấm
<a>	Không được chứa các phần tử <a> khác.
<pre>	Không được chứa các phần tử <img>, <object>, <big>, <small>, <sub> hoặc <sup>.
<button>	Không được chứa các phần tử <input>, <select>, <textareosystem, <label>, <button>, <form>, <fieldset>, <iframe> hoặc <isindex>.
<nhãn>	Không được chứa các phần tử <label> khác.
<biểu mẫu>	Không được chứa các phần tử <form> khác.

Tài liệu XHTML Tối thiểu

Ví dụ sau đây cho bạn thấy nội dung tối thiểu của tài liệu 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>