Bạn có thể không sử dụng XHTML (nữa), nhưng khi viết HTML, bạn có thể bị ảnh hưởng bởi XHTML nhiều hơn bạn nghĩ. Rất có thể bạn đang viết HTML theo cách XHTML.

Cách viết HTML của XHTML là gì và cách viết HTML của HTML là gì? Chúng ta hãy có một cái nhìn.

HTML, XHTML, HTML

Vào những năm 1990, đã có HTML. Vào những năm 2000, đã có XHTML. Sau đó, vào những năm 2010, chúng tôi quay lại HTML. Đó là câu chuyện đơn giản.

Bạn cũng có thể biết được ngày tháng gần đúng của các thông số kỹ thuật: HTML “1” 1992, HTML 2.0 1995, HTML 3.2 1997, HTML 4.01 1999; XHTML 1.0 2000, XHTML 1.1 2001; “HTML5” 2007.

XHTML trở nên phổ biến khi mọi người tin rằng XML và các dẫn xuất XML là tương lai. “XML tất cả mọi thứ.” Đối với HTML, điều này có ảnh hưởng sâu sắc: Hiệu ứng mà chúng tôi đã học cách viết nó theo cách XHTML.

Cách viết HTML của XHTML

Cách XHTML được ghi chép đầy đủ vì XHTML 1.0 mô tả rất chi tiết trong phần về “Sự khác biệt với HTML 4”:

• Tài liệu phải được hình thành tốt.
• Tên phần tử và thuộc tính phải ở dạng chữ thường.
• Đối với các phần tử không trống, bắt buộc phải có thẻ kết thúc.
• Giá trị thuộc tính phải luôn được trích dẫn.
• Giảm thiểu thuộc tính không được hỗ trợ.
• Các phần tử trống cần phải được đóng lại.
• Việc xử lý khoảng trắng trong các giá trị thuộc tính được thực hiện theo XML.
• Các phần tử script và style cần có phần CDATA.
• Không thể loại trừ SGML.
• Các phần tử với id và name thuộc tính, như a, applet, form, frame, iframe, imgvà map, chỉ nên sử dụng id.
• Các thuộc tính có bộ giá trị được xác định trước có phân biệt chữ hoa chữ thường.
• Tham chiếu thực thể dưới dạng giá trị hex phải ở dạng chữ thường.

Điều này có vẻ quen thuộc? Ngoại trừ việc đánh dấu nội dung CDATA, cũng như xử lý các loại trừ SGML, bạn có thể tuân theo tất cả các quy tắc này. Tất cả bọn họ.

Mặc dù XHTML đã chết nhưng nhiều quy tắc trong số này chưa bao giờ bị nghi ngờ nữa. Một số thậm chí còn được nâng lên thành “các phương pháp hay nhất” cho HTML.

Đó là cách viết HTML của XHTML và tác động lâu dài của nó đối với lĩnh vực này.

Cách viết HTML của HTML

Một cách để đưa chúng ta quay trở lại là phủ nhận các quy tắc do XHTML áp đặt. Hãy thực sự làm điều này (không có phần SGML, vì HTML không còn dựa trên SGML nữa):

• Tài liệu có thể không được định dạng tốt.
• Tên phần tử và thuộc tính không được viết thường.
• Đối với các phần tử không trống, không phải lúc nào cũng cần có thẻ kết thúc.
• Giá trị thuộc tính có thể không phải lúc nào cũng được trích dẫn.
• Giảm thiểu thuộc tính được hỗ trợ.
• Các phần tử trống không cần phải đóng.
• Việc xử lý khoảng trắng trong các giá trị thuộc tính không được thực hiện theo XML.
• Các thành phần tập lệnh và kiểu dáng không cần phần CDATA.
• Các phần tử với id và name thuộc tính có thể không chỉ sử dụng id.
• Các thuộc tính có bộ giá trị được xác định trước không phân biệt chữ hoa chữ thường.
• Tham chiếu thực thể dưới dạng giá trị hex không chỉ có thể ở dạng chữ thường.

Hãy loại bỏ những điều bí truyền; những điều tưởng chừng như không liên quan. Điều này bao gồm việc xử lý khoảng trắng XML, các phần CDATA, nhân đôi name giá trị thuộc tính, trường hợp tập hợp giá trị được xác định trước và tham chiếu thực thể thập lục phân:

• Tài liệu có thể không được định dạng tốt.
• Tên phần tử và thuộc tính không được viết thường.
• Đối với các phần tử không trống, không phải lúc nào cũng cần có thẻ kết thúc.
• Giá trị thuộc tính có thể không phải lúc nào cũng được trích dẫn.
• Giảm thiểu thuộc tính được hỗ trợ.
• Các phần tử trống không cần phải đóng.

Loại bỏ các quy tắc này, điều này trông không giống như chúng ta đang làm việc với XML mà giống làm việc với HTML hơn. Nhưng chúng tôi vẫn chưa xong.

“Tài liệu có thể không được định dạng đúng” cho thấy rằng sẽ ổn nếu mã HTML không hợp lệ. XHTML có thể chỉ ra tính đúng định dạng vì cách xử lý lỗi nghiêm ngặt của XML. Nhưng mặc dù các tài liệu HTML hoạt động ngay cả khi chúng chứa các vấn đề nghiêm trọng về cú pháp và tính đúng định dạng, nhưng việc sử dụng và lạm dụng khả năng phục hồi này sẽ không hữu ích cho chuyên gia — cũng như lĩnh vực của chúng tôi —. (Tôi đã tranh luận về trường hợp này trước đây trong bài viết của mình, “Trong phòng thủ quan trọng của sự phát triển giao diện người dùng.”)

Do đó, cách HTML sẽ không gợi ý “tài liệu có thể không được định dạng đúng”. Cũng cần phải rõ ràng rằng không chỉ thẻ kết thúc mà cả thẻ bắt đầu cũng không phải lúc nào cũng được yêu cầu. Viết lại và sắp xếp lại, đây là bản chất:

• Thẻ bắt đầu và kết thúc không phải lúc nào cũng được yêu cầu.
• Các phần tử trống không cần phải đóng.
• Tên phần tử và thuộc tính có thể viết thường hoặc viết hoa.
• Giá trị thuộc tính có thể không phải lúc nào cũng được trích dẫn.
• Giảm thiểu thuộc tính được hỗ trợ.

Các ví dụ

Điều này trông như thế nào trong thực tế? Đối với thẻ bắt đầu và kết thúc, hãy lưu ý rằng nhiều thẻ là tùy chọn. Ví dụ: một đoạn văn và một danh sách được viết như thế này trong XHTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul> <li>Praesent augue nisl</li> <li>Lobortis nec bibendum ut</li> <li>Dictum ac quam</li>
</ul>

Tuy nhiên, trong HTML, bạn có thể viết chúng chỉ bằng mã này (mã này hợp lệ):

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul> <li>Praesent augue nisl <li>Lobortis nec bibendum ut <li>Dictum ac quam
</ul>

Các nhà phát triển cũng đã học cách viết các phần tử void, như sau:

<br />

Đây là thứ mà XHTML mang đến cho HTML, nhưng vì dấu gạch chéo không có tác dụng đối với các phần tử trống, bạn chỉ cần điều này:

<br>

Trong HTML, bạn cũng có thể viết mọi thứ bằng chữ in hoa:

<A HREF="https://css-tricks.com/">CSS-Tricks</A>

Có vẻ như bạn đang la hét và có thể bạn không thích nhưng viết như thế này cũng không sao.

Khi bạn muốn cô đọng liên kết đó, HTML cung cấp cho bạn tùy chọn bỏ đi một số trích dẫn nhất định:

<A HREF=https://css-tricks.com/>CSS-Tricks</A>

Theo nguyên tắc chung, khi giá trị thuộc tính không chứa dấu cách hoặc dấu bằng, bạn có thể bỏ dấu ngoặc kép.

Cuối cùng, HTML–HTML — không phải XHTML–HTML — cũng cho phép giảm thiểu các thuộc tính. Nghĩa là, thay vì đánh dấu một input phần tử theo yêu cầu và chỉ đọc, như thế này:

<input type="text" required="required" readonly="readonly">

Bạn có thể giảm thiểu các thuộc tính:

<input type="text" required readonly>

Nếu bạn không chỉ lợi dụng thực tế là không cần đến dấu ngoặc kép mà còn text là mặc định cho type thuộc tính ở đây (có nhiều thuộc tính như vậy kết hợp thuộc tính-giá trị không cần thiết), bạn sẽ có một ví dụ thể hiện vẻ đẹp tối giản của HTML:

<input required readonly>

Viết HTML theo cách HTML

Ở trên không phải là sự thể hiện vị trí của HTML vào những năm 90. Hồi đó HTML được tải bằng <table> các phần tử dành cho bố cục, được đóng gói bằng mã trình bày, phần lớn không hợp lệ (như ngày nay vẫn vậy), với sự hỗ trợ tác nhân người dùng rất khác nhau. Tuy nhiên đó là bản chất về những gì chúng tôi muốn giữ lại nếu XML và XHTML không xuất hiện.

Nếu bạn sẵn sàng đón nhận một gợi ý về cách viết HTML hiện đại, toàn diện hơn thì tôi có một gợi ý. (HTML là lĩnh vực trọng tâm chính của tôi, vì vậy tôi đang tăng cường điều này bằng các liên kết đến một số bài viết của mình.)

1. Tôn trọng cú pháp và ngữ nghĩa.
   • Xác thực HTML của bạnvà chỉ gửi HTML hợp lệ.
2. Sử dụng các tùy chọn mà HTML cung cấp cho bạn, miễn là bạn thực hiện điều đó một cách nhất quán.
   • Hãy nhớ rằng tên thành phần và thuộc tính có thể là chữ thường hoặc chữ hoa.
3. Giữ việc sử dụng HTML ở mức tối thiểu
   • Hãy nhớ rằng thay vào đó, đánh dấu trình bày và hành vi sẽ được xử lý bằng CSS và JavaScript.
   • Hãy nhớ rằng thẻ bắt đầu và kết thúc là không phải lúc nào yêu cầu.
   • Hãy nhớ rằng các phần tử trống không cần phải đóng.
   • Hãy nhớ rằng một số thuộc tính có giá trị mặc định cho phép những cặp thuộc tính-giá trị này sẽ bị bỏ qua.
   • Hãy nhớ rằng các giá trị thuộc tính có thể không phải lúc nào được trích dẫn.
   • Hãy nhớ rằng việc giảm thiểu thuộc tính được hỗ trợ.

Không phải ngẫu nhiên mà điều này giống ba quy tắc cơ bản cho HTML, rằng nó hoạt động với tiền đề của tải trọng nhỏ hơn cũng dẫn đến các trang web nhanh hơn, và điều này theo sau trường phát triển web tối thiểu. Không có điều nào trong số này là mới - lĩnh vực của chúng tôi chỉ có thể quyết định khám phá lại nó. Công cụ cũng có sẵn: công cụ khai thác html có lẽ là được thiết lập tốt nhất và có thể xử lý tất cả các tối ưu hóa HTML.

Bạn đã học HTML theo cách XHTML. HTML không phải là XHTML. Khám phá lại HTML và giúp định hình một cách viết HTML mới, hiện đại — thừa nhận nhưng không nhất thiết phải dựa trên XML.

Viết HTML, cách HTML (Không phải cách XHTML) ban đầu được xuất bản trên CSS-Thủ thuật. Bạn nên nhận bản tin.