XHTML là gì? Lợi ích khi sử dụng XHTML

XHTML là gì?

XHTML – EXtensible HyperText Markup Language là ngôn ngữ đánh dấu siêu văn bản mở rộng do W3C phát triển ra. Nó được sử dụng để triển khai Internet và hỗ trợ các nhà phát triển web thực hiện quá trình chuyển đổi từ HTML sang XML một cách dễ dàng.

XHTML (Extensible HTML) là HTML mà viết lại để phù hợp với quy tắc XML

XHTML gần giống với HTML, mặc dù nó nghiêm ngặt hơn. XHTML là HTML được định nghĩa là một ứng dụng XML. Tất cả các trình duyệt chính, ví dụ: Google Chrome, Firefox, Microsoft Edge,... tương thích với nó.

Trong 2 năm 2000 và 2001 liên tiếp cho ra mắt hai loại tài liệu đó là XHTML 1.0 và XHTML 1.1. Thêm vào đó, XHTML5 được coi là loại tài liệu tiêu chuẩn dành cho các dự án phát triển phiên bản XML thích ứng của HTML5 Specification.

Mỗi một tài liệu XHTML có cấu trúc gồm ba phần. Đầu tiên đó là DOCTYPE được sử dụng để khai báo một DTD. Phần thứ hai đó là head giúp khai báo tiêu đề và các thuộc tính liên quan. Cuối cùng đó là body, đây là các thẻ chứa nội dung của các trang web.

XHTML là HTML được định nghĩa là một ứng dụng XML

Cú pháp của XHTML

Cú pháp của XHTML tương đối giống với cú pháp của HTML và thực tế tất cả các thành phần HTML hợp lệ cũng hữu ích trong XHTML. Tuy nhiên, khi viết một trang XHTML, bạn phải đặc biệt chú ý để đảm bảo rằng tài liệu HTML của bạn tương thích với XHTML. Trong khi tạo một trang XHTML mới hoặc chuyển đổi một tài liệu HTML cũ sang XHTML, hãy ghi nhớ những điểm sau:

Ở đầu tài liệu XHTML, hãy thêm một khai báo DOCTYPE.
Tất cả các thẻ và thuộc tính XHTML phải được viết bằng chữ thường.
Tất cả các thẻ XHTML phải được đóng đúng cách.
Tất cả các thẻ phải được lồng vào nhau một cách thích hợp.
Tất cả các giá trị thuộc tính phải được trích dẫn.
Giảm thiểu các thuộc tính bị cấm.
Thuộc tính id nên được sử dụng thay cho thuộc tính tên.
Nên tránh thuộc tính ngôn ngữ của thẻ tập lệnh.

Sau đây là giải thích đầy đủ về các quy tắc XHTML nói trên.

Tuyên bố DOCTYPE

Một khai báo DOCTYPE phải xuất hiện ở đầu mỗi tài liệu XHTML. Đây là một ví dụ về nó:

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

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

Ngôn ngữ đánh dấu XHTML phân biệt chữ hoa chữ thường. Tất cả các thẻ và thuộc tính trong XHTML phải được thể hiện bằng chữ thường.

<!-- This is not acceptable in XHTML -->
<A Href="/xhtml/xhtml_tut.html">XHTML is here</A>

<!-- This is how you should write in XHTML -->
<a href="/xhtml/xhtml_tut.html">XHTML is here</a>

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

Đóng các thẻ trong XHTML

Mỗi thẻ XHTML, kể cả các thành phần trống, phải có một thẻ đóng tương đương. Đây là một ví dụ về cách sử dụng các thẻ một cách chính xác và không chính xác.

<!-- This is not acceptable in XHTML -->
<p>This is the wrong way to write paragraph in XHTML.

<!-- This is also not acceptable in XHTML -->
<img src="/img/xhtmlsample.gif" >

Cú pháp sau minh họa cách viết các thẻ trên trong XHTML một cách chính xác. Sự khác biệt là chúng tôi đã đóng cả hai thẻ ở đây một cách thích hợp.

<!-- This is acceptable in XHTML -->
<p>This is the wrong way to write a paragraph in XHTML.</p>

<!-- This is also acceptable now -->
<img src="/img/xhtmlsample.gif" />

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

Các giá trị thuộc tính XHTML phải được trích dẫn toàn bộ. Nếu không, tài liệu XHTML của bạn sẽ bị coi là không hợp lệ. Sau đây là một ví dụ về cú pháp.

<!-- This is not acceptable in XHTML -->
<img src="/img/xhtmlsample.gif" width=220 height=60 />

<!-- This is how you should write it in XHTML. -->
<img src="/img/xhtmlsample.gif" width="220" height="60" />

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

Không thể giảm thiểu thuộc tính trong XHTML. Nó ngụ ý rằng ký tự và giá trị của nó phải được nêu rõ ràng. Ví dụ sau đây cho thấy sự khác biệt:

<!-- This is not acceptable in XHTML -->
<option selected>

<!-- This is how you should write it in XHTML. -->
<option selected="selected">

Thuộc tính id trong XHTML

Thuộc tính id đã thay thế tên. XHTML thích sử dụng id="id" thay vì name="name." Ví dụ sau minh họa cách thực hiện:

<!-- This is not acceptable in XHTML -->
<img src="/img/xhtmlsample.gif" name="xhtml_pic" />

<!-- This is how you should write it in XHTML. -->
<img src="/img/xhtmlsample.gif" id="xhtml_pic" />

Thuộc tính ngôn ngữ trong XHTML

Thuộc tính ngôn ngữ của thẻ tập lệnh không được dùng nữa. Sự khác biệt này được thể hiện trong ví dụ sau:

<!-- This is not acceptable in XHTML -->

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

<!-- This is how you should write it in XHTML. -->

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

Thẻ lồng nhau trong XHTML

Tất cả các thẻ XHTML phải được lồng đúng cách. Nếu không, tài liệu của bạn sẽ được hiểu là tài liệu XHTML không hợp lệ. Cú pháp được thể hiện trong ví dụ dưới đây.

<!-- This is not acceptable in XHTML -->
<b><i> Bold and italic statement</b></i>

<!-- This is how you should write it in XHTML. -->
<b><i> Bold and italic statement</i></b>

Cấm trên một số yếu tố

Các phần tử sau không được phép chứa bất kỳ phần tử nào khác. Lệnh cấm này có hiệu lực ở tất cả các cấp độ làm tổ. Điều đó có nghĩa là nó chứa tất cả các phần giảm dần.

Element	Prohibition
<a>	Other <a> elements must not be present.
<pre>	Other <img>, <object>, <big>, <small>, <sub>, or <sup> elements must not be present.
<button>	These <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> or <isindex> elements must not be present.
<label>	Other <label> elements must not be present.
<form>	Other <form> elements must not be present.

Một tài liệu XHTML cơ bản

Mẫu bên dưới hiển thị 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>A title is required for every document</title>
   </head>
    
   <body>
      ...your content goes here...
   </body>
</html>

DTD (Các loại tài liệu trong XHTML) là gì?

DTD – Document Type Definition là thành phần chính trong quá trình triển khai trang web XHTML. Có ba loại DTD được sử dụng phổ biến nhất đó là Transitional DTD, Strict DTD và Frameset DTD.

DTD (Document Type Definition) là kiểu tài liệu dùng để định nghĩa kiểu dữ liệu cho các phần tử trong tài liệu XML.

Một số thành phần và thuộc tính XHTML có mặt trong một DTD nhưng không có trong DTD khác. Do đó, khi xây dựng trang XHTML, bạn phải chọn cẩn thận các thành phần hoặc thuộc tính XHTML của mình. Mặt khác, trình xác thực XHTML có thể hỗ trợ bạn phân biệt giữa các thành phần và thuộc tính hợp lệ và không hợp lệ.

Transitional DTD

Đây là loại DTD hoạt động dựa vào các trình duyệt cũ không có các tính năng hỗ trợ CSS có sẵn. Tuy nhiên, có một số thuộc tính của body tag không khả thi trong DTD.

Nếu bạn muốn sử dụng nhiều thuộc tính XHTML và một vài thuộc tính CSS, DTD này nên được sử dụng và trang XHTML của bạn sẽ được viết tương ứng.

Bạn phải đưa dòng sau vào đầu tài liệu XHTML của mình nếu bạn muốn sử dụng DTD chuyển tiếp XHTML 1.0.

Cú pháp:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Khi chúng ta định nghĩa các phần tử trong XML là tùy thích, miễn sao cho nó hợp quy tắc của tài liệu XML. Tuy nhiên để tường minh hơn thì ta nên định nghĩa kiểu dữ liệu cho từng phần tử trong tài liệu XML.

Tuy nhiên một tài liệu XML được xem là hợp khuôn dạng và có giá trị khi toàn bộ các phần tử trong tài liệu được được định nghĩa kiểu dữ liệu mà nó chứa.

Với cách định nghĩa kiểu tư liệu (DTD) khi chúng ta đọc một tài liệu XML nào thì chỉ cần đọc phần DTD thì chúng ta sẽ biết được cấu trúc của tài liệu XML.

Trước khi đi vào phần chi tiết về cách tạo một tài liệu DTD, chúng ta hãy xem ví dụ sau:

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>

Xem ví dụ trên chúng ta thấy phần được bôi đen là phần DTD dùng để mô tả kiểu dữ liệu của tài liệu XML, phần có màu nhạt là các phần tử của tài liệu XML.

Phần DTD trong ví dụ này được hiểu như sau: Tài liệu XML có một phần tử gốc tên là note, phần tử gốc này có 3 phần tử con là from, heading, body và 3 phần tử con này có kiểu dữ liệu text.

Strict DTD

Đây là loại DTD dành cho các trang XHTML sử dụng Markup Language. Ngoài ra, nó còn được tích hợp với CSS và tránh viết phần lớn các thuộc tính XHTML. Một tài liệu tuân theo DTD này có chất lượng cao nhất có thể. Nguyên nhân là do Strict DTD không có thuộc tính đó trong body tag.

Bạn phải đưa dòng sau vào đầu tài liệu XHTML của mình nếu bạn muốn sử dụng XHTML 1.0 Strict DTD.

Cú pháp:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

URI được sử dụng làm mã định danh hệ thống với mã định danh công khai cho phép tác nhân người dùng để tải xuống DTD và các bộ thực thể khi cần.

Frameset DTD

Đây là loại DTD dành cho các trang XHTML chứa các Frames. Điều này hữu ích nếu bạn muốn chia cửa sổ trình duyệt thành hai hoặc nhiều khung bằng Khung HTML.

Bạn phải đưa dòng sau vào đầu tài liệu XHTML của mình nếu bạn muốn sử dụng DTD Bộ khung XHTML 1.0.

Cú pháp:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Tại sao nên sử dụng XHTML?

Dưới đây là một số lý do nên sử dụng XHTML:

Các tài liệu XHTML được xác thực bằng công cụ XML tiêu chuẩn.
Dễ duy trì, thay đổi và chỉnh sửa tài liệu trong thời gian dài.
Xác định tiêu chuẩn chất lượng của các trang website.
Được xem là tiêu chuẩn của W3C.

Lợi ích của XHTML

Dưới đây là một số những lợi ích mà XHTML đem lại:

Giúp tạo ra các Cleaner Code dễ dàng.
Tiết kiệm chi phí tạo trang web.
Hỗ trợ định dạng tài liệu và di chuyển chúng trên các thiết bị không dây.
Được triển khai dưới dạng ứng dụng.
XHTML tích hợp với CSS để tạo ra các trang web hiệu quả.

Sự khác biệt giữa HTML và XHTML

Một số điểm khác biệt giữa HTML và XHTML:

HTML

HTML là ngôn ngữ đánh dấu được sử dụng để tạo trang web.
Framework hoạt động linh hoạt dựa vào trình phân tích cú pháp đơn giản.
Được đề xuất bởi Tim Berners-Lee vào năm 1987.
Áp dụng và mở rộng cho SGML.

XHTML

XHTML là ngôn ngữ đánh dấu XML cho phép mở rộng các phiên bản của HTML.
Các yếu tố hạn chế của XML được xử lý thông qua trình phân tích cú pháp XML tiêu chuẩn.
Được đề xuất bởi World Wide Web Consortium năm 2000.
Là ứng dụng của XML được mở rộng từ XML và HTML.

Lời kết

Như vậy, bài viết trên đây chúng tôi đã cập nhật các thông tin cơ bản về XHTML. Hy vọng bài chia sẻ này có thể giúp bạn đọc hiểu hơn về loại ngôn ngữ đánh dấu này.

Tài liệu tham khảo:

Kiến thức thiết kế web

XHTML là gì? Lợi ích khi sử dụng XHTML