So sánh HTML với XHTML

Tiêu đề: So sánh HTML với XHTML Sat Sep 17, 2011 4:51 pm

Chào mọi người, mình có thắc mắc mong mọi người giải đáp: so sánh giữa HTML và XHTML thì mình thấy XHTML chặt chẽ hơn bởi nó có nhiều điều kiện ràng buộc hơn HTML nhưng khi thiết kế web chúng ta vẫn hay thường sử dụng HTML và vậy thì XHTML có lợi gì hơn so với HTML? khi nào thì chúng ta nên dùng XHTML? Cám ơn mọi người.

Tiêu đề: Re: So sánh HTML với XHTML Sat Sep 17, 2011 6:48 pm

xHTML chẳng qua chính là HTML mà thôi. Có điều nó tuân theo các quy tắc viết XML. Để so giữa xHTML và HTML ta có thể ví như 1 cái là văn phong nghiêm ngặt ở trường học, câu cú phải chuẩn xác, và 1 cái là văn nói ở ngoài đời, nói sao cũng được miễn người kia hiểu.
có 3 quy tắc chính:

Nhớ là các thẻ (tag) xHTML khác với HTML ở vài điểm cơ bản sau:
1 - Nó viết thường chứ không viết hoa. Tức là không viết

Code:: <P>

mà viết

Code:: <p>

2 - Có thẻ mở thì có thẻ đóng. Ví dụ, đã có thẻ

Code:: <p>

thì phải có thẻ

Code:: </p>

3 - Trường hợp có 1 thẻ duy nhất thì cuối thẻ phải có dấu gạch chéo slash. Nghĩa là với 1 số thẻ, như thẻ br chẳng hạn thì phải viết
(có dấu cách trước ký tự /) chứ không phải là

Code:: <br/>

hay

Code:: <br>

hay

Code:: </br>

Điều này có nghĩa là trong HTML ta mở thẻ mà không đóng thẻ cũng chẳng sao, không có dấu slash cũng chẳng ảnh hưởng, viết hoa viết thường lung tung vẫn được, nhưng trong XHTML thì BUỘC PHẢI TUÂN THEO 3 nguyên tắc trên.

XHTML = XML + HTML
=> HTML tuân thủ các tiêu chuẩn của XML, đây là cái cơ bản của XHTML. Kết hợp thêm các DTD tiêu chuẩn sẽ có các phiên bản XHTML khác nhau với nhiều yêu cầu nghiêm ngặt hơn so với HTML thông thường.

File HTML nếu có Doctype là XHTML thì nó sẽ là XHTML, chẳng liên quan gì đến file extension.

Còn đây là sự sai khác chi tiết:
Các phần tử phải được lồng nhau đúng cách
Trong HTML một số phần tử có thể được lồng vào nhau không đúng cách như thế này.

Code:: <b><i>This text is bold and italic</b></i>

Trong XHTML tất cả các phần tử phải được lồng vào nhau đúng cách như thế này:

Code:: <b><i>This text is bold and italic</i></b>

Chú ý: Một lỗi thường thấy ở các danh sách gạch đầu dòng lồng vào nhau mà quên mất rằng danh sách bên trong phải được đặt trong phần tử li. Ví dụ:

Code:: <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>

Đây mới là đúng:

Code:: <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Phải có đặt ở dạng chuẩn (well-formed)
Tất cả các phần tử XHTML phải được đặt lồng bên trong phần tử gốc . Tất cả các phần tử khác có thể có các phần tử con. Các phần tử con phải đi theo cặp và phải được đặt lồng nhau đúng cách bên trong phần tử mẹ. Cấu trúc tài liệu cơ bản là:

Code:: <html>
<head> ... </head>
<body> ... </body>
</html>

Tên gọi của thẻ đều phải viết thường
Do XHTML kế thừa cú pháp của XML và mỗi trang XHTML đều là các ứng dụng XML cho nên XHTML có phân biệt chữ hoa chữ thường, điều không có ở HTML. Với HTML thì các thẻ như
và
là hiểu là giống nhau nhưng một khi bạn đã xác định trang web của bạn là XHTML thì trình duyệt sẽ dịch hai thẻ này là khác nhau.

HTML chấp nhận cách viết dưới:

Code:: <BODY>
<P>This is a paragraph</P>
</BODY>
XHTML đòi hỏi phải viết lại phần trên thành:
<body>
<p>This is a paragraph</p>
</body>

Tất cả các phần tử XHTML phải được đóng lại
Phần tử không rỗng phải có một thẻ đóng. HTML chấp nhận cách viết dưới:

Code:: <p>This is a paragraph
<p>This is another paragraph
XHTML đòi hỏi phải viết lại phần trên thành:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Các phần tử rỗng cũng phải được đóng lại
Các phần tử rỗng hoặc là phải có thể đóng hoặc là thẻ khởi đầu phải được kết thúc bằng />. HTML chấp nhận cách viết dưới:

Code:: This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">
XHTML đòi hỏi phải viết lại phần trên thành:
This is a break

Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />

Chú ý quan trọng
Để làm cho trang XHTML tương thích với các trình duyệt hiện nay thì nên đặt một khoảng trắng thêm vào trước kí tự / kiểu như

Code:: <br />

và

.

Các giá trị của thuộc tính phải được đặt trong dấu nháy kép
HTML chấp nhận cách viết dưới:

Code:: <table width=100%>

XHTML đòi hỏi phải viết lại phần trên thành:

Code:: <table width="100%">

Việc tối giản thuộc tính là bị nghiêm cấm
HTML chấp nhận cách viết dưới:

Code:: <dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

XHTML đòi hỏi phải viết lại phần trên thành:

Code:: <dl compact="compact">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />

Tiêu đề: Re: So sánh HTML với XHTML Sat Sep 17, 2011 8:44 pm

Cám ơn bạn, bạn giải thích rất chi tiết Smile

mà bạn cho mình hỏi là trường hợp nào thì cần sử dụng XHTML? vì như bạn nói XHTML chính là HTML và khi viết web thì chúng ta lại hay viết bằng HTML vậy người ta đặt ra XHTML để làm gì? và theo như mình biết thì có lúc chúng ta phải chuyển đổi HTML sang XHTML nhưng mình vẫn chưa rõ là khi nào cần phải chuyển hay sử dụng nó. Mong các bạn có thể giải đáp giùm mình. Tks!

Tiêu đề: Re: So sánh HTML với XHTML Sat Sep 17, 2011 10:16 pm

1. Tại sao lại cần XHTML? HTML không đủ tốt sao?

HTML chắc chắn là ngôn ngữ đánh dấu tài liệu thành công nhất trên thế giới. Nhưng kể từ khi XML được giới thiệu, một cuộc họp đã được tổ chức để thảo luận liệu rằng một phiên bản mới của HTML theo chuẩn XML có cần thiết. Những ý kiến tại cuộc họp đó là"Có": với HTML dựa trên XML, những ngôn ngữ XML khác có thể bao gồm những mẩu tin của XHTML, và tài liệu XHTML có thể bao gồm những mẫu tin của các ngôn ngữ đánh dấu khác. Chúng ta cũng có thể lợi dụng việc thiết kế lại để dọn dẹp một vài phần lộn xộn của HTML, và thêm vào những chức năng cần thiết mới, giống như biểu mẫu tốt hơn.

2. Đâu là ưu điểm của XHTML so với HTML?

Nếu tài liệu của bạn chỉ đơn thuần là XHTML 1.0 (không bao gồm những ngôn ngữ đánh dấu khác) thì bạn sẽ không nhận thấy sự khác biệt rõ rệt. Tuy nhiên, khi mà ngày càng nhiều công cụ XML ra đời, như XSLT để biến đổi các tài liệu, bạn sẽ bắt đầu nhận ra những lợi điểm của XHTML. Ví dụ Xforms sẽ cho phép bạn soạn thảo tài liệu XHTML (hoặc là bất kỳ tài liệu nào thuộc loại XML) theo một cách vô cùng đơn giản. Các ứng dụng Web cũng có thể tận dụng những lợi thế này của tài liệu XHTML. Nếu tài liệu của bạn chứa đựng nhiều hơn XHTML 1.0, ví dụ nó bao gồm cả MathML, SMIL, hay SVG, thì ưu điểm sẽ xuất hiện rõ rệt: bạn không thể làm những công việc đại loại như vậy với HTML.

3. Cách dễ nhất để chuyển đồi tài liệu của tôi từ HTML sang XHTML là gì?

Phần mềm HTML Tidy sẽ cho bạn một lựa chọn trong việc chuyển đổi bất kỳ một tài liệu HTML sang dạng XHTML.
Amaya là một trình duyệt kiêm soạn thảo tài liệu web và có thể lưu tài liệu HTML của bạn dưới dạng XHTML.

4. Tại sao tôi phải quan tâm XHTML nếu tài liệu HTML của tôi hiển thị tốt trên trình duyệt web của tôi?

Tất cả các trình duyệt web biết phải làm thế nào để xử lý tài liệu HTML chính xác. Tuy nhiên, nếu như tài liệu HTML không chính xác, trình duyệt web phải sửa tài liệu, và bởi vì không phải trình duyệt nào cũng sửa tài liệu HTML không chính xác này theo một cách giống nhau, điều này làm nảy sinh những khác biệt, do đó tài liệu của bạn sẽ trông và hoạt động một cách khác nhau trên những trình duyệt khác nhau. Vì có đến hàng trăm trình duyệt web khác nhau, và nhiều cái khác đang xuất hiện dần (không chỉ trên PC, mà còn cả trên PDA, điện thoại di động, ti vi, máy in, và ngay cả tủ lạnh). Bên cạnh đó, bạn không thể thử nghiệm tài liệu HTML trên mọi trình duyệt. Nếu bạn dùng tài liệu HTML có lỗi và tài liệu này không hiển thị được trên một trình duyệt nào đó, thì lỗi là do bạn; nếu bạn dùng tài liệu HTML không có lỗi và nó cũng không hiển thị được trên một trình duyệt nào đó, thì đây là một lỗi của trình duyệt.

5. Tôi có thể kiểm tra tài liệu của tôi có được định dạng chính xác hay không ở đâu?

W3C cung cấp một dịch vụ tại địa chỉ [You must be registered and logged in to see this link.].Tại địa chỉ này, bạn có thể kiểm tra tính đúng đắn của một tệp xhtml (.html,.htm) hay một web site trên internet. Bên cạnh đó phần mềm Amaya cũng có khả năng kiểm tra tài liệu đánh dấu (HTML/XHTML) của bạn có đúng đắn hay không.

Sau đây là một số vấn đề thường gặp khác nếu như bạn đam mê lập trình WEB:

6. Đâu là sự khác biệt giữa "user agent" và"browser" (trình duyệt)?

Mặc dù trình duyệt thật sự là một chương trình quan trọng sử dụng tài liệu HTML/XHTML, nhưng có những chương trình khác và những hệ thống khác có thể đọc được những tài liệu này.

Những máy tìm kiếm (Search engines) chẳng hạn, chúng đọc những tài liệu này để tìm kiếm tài liệu nhưng chúng không phải là các trình duyệt web. Bằng cách sử dụng thuật ngữ “user agent” tôi muốn nhắc cho mọi người về sự khác biệt này. Ví dụ, khi bạn tìm kiếm với Google, bạn thường thấy ở phía dưới mỗi dòng kết quả tìm kiếm một dòng chữ đại loại như “This web page uses frames, but your browser doesn ’t support them” (trang web này có sử dụng các khung, nhưng trình duyệt của bạn không hỗ trợ nó), điểu này khiến cho một vài người e ngại không nhắp chuột vào liên kết đó.

Tác giả của những trang web này đã không nhận ra rằng có các chương trình khác cũng đọc tài liệu HTML/XHTML chứ không chỉ có mỗi trình duyệt mà thôi. Do đó họ nên thêm vào những đoạn văn vào đoạn , để trang web của họ sẽ không hiện ra một cách ngớ ngẩn khi người ta tìm thấy trang web của họ.

7. Tại sao tôi lại phải sử dụng khái niệm "name space" trong tài liệu XHTML?

Trong những ngày đầu của HTML, nhiều nhóm và công ty đã thêm vào những thành phần (elements) và thuộc tính vào HTML để sắn dùng. Điều này đã tạo ra một cuộc hỗn loạn về các phiên bản HTML khác nhau không tương thích. XML (chữ X đại diện cho chữ Extensible) cho phép mọi người sử dụng các thành phần (elements) từ những ngôn ngữ khác nhau, nhưng để cho một trình duyệt hoặc chương trình đọc HTML khác (user agent) biết thành phần nào thuộc về ngôn ngữ nào thì bạn phải nói cho nó biết. Phần khai báo không gian tên (namespace) làm việc đó.

8. Tại sao lại cho phép gửi tài liệu XHTML 1.0 dưới dạng text/html?

XHTML là định dạng XML; điều này có nghĩa là lý do phải được gửi đi với một kiểu truyền thông liên quan đến XML (application/xhtml xml, application/xml, hoặc text/xml). Tuy nhiên XHTML 1.0 đã được thiết kế một cách kỹ lưỡng để nó có thể hoạt động được với cả những phần mềm HTML cũ. Nếu bạn tuân theo một số chỉ dẫn đơn giản, bạn có thể có được nhiều tài liệu XHTML 1.0 để làm việc với những trình duyệt cũ. Tuy nhiên những trình duyệt cũ chỉ có thể hiểu được kiểu truyền thông text/html, do đó bạn phải sử dụng kiểu truyền thông này nếu bạn muốn gửi tài liệu XHTML 1.0 tới chúng. Nhưng cũng phải nên lưu ý rằng, gửi những tài liệu XHTML đến những trình duyệt dưới dạng text/html đồng nghĩa với việc những trình duyệt đó sẽ hiểu và hiển thị những tài liệu này dưới dạng HTML, chứ không phải XHTML.

9. Tại sao lại cho phép gửi tài liệu XHTML 1.1 dưới dạng text/html?

XHTML 1.1 là XML thuần túy, và chỉ được dùng như XML. Nó không thể gửi một cách tin cậy đến những trình duyệt cũ. Do đó tài liệu XHTML 1.1 phải được gửi với kiểu truyền thông liên quan đến XML, như application/ xhtml xml. 0.
CSS có rất nhiều quy tắc đặc biệt chỉ áp dụng đối với HTML. Liệu những quy tắc này có còn áp dụng đối với XHTML? Không, các quy tắc của CSS (Cascade Style Sheet) chỉ áp dụng đối với HTML, và với những tài liệu mà nó kế thừa từ text/htm.

Trên đây là một vài trao đổi mà mình đã thu lượm được, trao đổi cùng các bạn.

Tiêu đề: Re: So sánh HTML với XHTML Mon Sep 19, 2011 8:32 am

Cám ơn bạn đã giái đáp được những thắc mắc của mình và còn hơn thế nữa. Mình vừa biết thêm được khá nhìều thứ. Cám ơn sự nhiệt tình của bạn Very Happy

.