Thuộc tính không chuẩn trên thẻ HTML. Điều tốt? Điều tồi tệ? Suy nghĩ của bạn?

Question

HTML (hoặc có thể chỉ là XHTML?) Tương đối nghiêm ngặt khi nói đến thuộc tính không chuẩn trên thẻ. Nếu chúng không phải là một phần của thông số, thì mã của bạn được coi là không tuân thủ.

Thuộc tính không chuẩn có thể khá hữu ích để chuyển cùng với siêu dữ liệu sang Javascript. Ví dụ, nếu một liên kết được giả sử để hiển thị một popup, bạn có thể đặt tên của cửa sổ bật lên trong một thuộc tính:

<a href="#null" class="popup" title="See the Popup!" 
    popup_title="Title for My Popup">click me</a> 

Ngoài ra, bạn có thể lưu trữ các tiêu đề cho popup trong một phần tử ẩn, như một khoảng :

<style> 
    .popup .title { display: none; } 
</style> 
<a href="#null" title="See the Popup!" class="popup"> 
    click me 
    <span class="title">Title for My Popup</span> 
</a> 

Tuy nhiên, tôi bị rách là phương pháp ưu tiên. Phương pháp đầu tiên là súc tích hơn và tôi đoán là không phải vặn vẹo với công cụ tìm kiếm và trình đọc màn hình nhiều. Ngược lại, tùy chọn thứ hai giúp lưu trữ một lượng lớn dữ liệu dễ dàng hơn và do đó, linh hoạt hơn. Nó cũng tuân thủ các tiêu chuẩn.

Tôi tò mò muốn biết suy nghĩ của cộng đồng này. Làm thế nào để bạn xử lý một tình huống như thế này? Liệu sự đơn giản của phương pháp đầu tiên có lớn hơn các nhược điểm tiềm ẩn (nếu có)?

Answer 1

Tôi là một người hâm mộ lớn của giải pháp HTML 5 được đề xuất (data- thuộc tính tiền tố). Chỉnh sửa: Tôi muốn thêm rằng có lẽ có những ví dụ tốt hơn cho việc sử dụng các thuộc tính tùy chỉnh. Ví dụ, dữ liệu mà một ứng dụng tùy chỉnh sẽ sử dụng không có tương tự trong các thuộc tính tiêu chuẩn (ví dụ: tuỳ biến cho trình xử lý sự kiện dựa trên một thứ không nhất thiết phải được thể hiện trong một className hoặc id).

Answer 2

Cảm giác cá nhân của tôi trong ví dụ của bạn là tuyến đường span phù hợp hơn, vì nó đáp ứng các tiêu chuẩn của đặc tả XHTML. Tuy nhiên, tôi có thể thấy một lập luận cho các thuộc tính tùy chỉnh, nhưng tôi nghĩ rằng chúng thêm một mức độ nhầm lẫn không cần thiết.

Answer 3

Một lựa chọn khác sẽ được xác định một cái gì đó như thế này trong Javascript:

<script type="text/javascript"> 
var link_titles = {link1: "Title 1", link2: "Title 2"}; 
</script> 

Sau đó, bạn có thể sử dụng sau này trong mã Javascript của bạn, giả sử kết nối của bạn có ID tương ứng với ID trong hashtable này.

Nó không có những nhược điểm của hai phương pháp khác: không có thuộc tính không chuẩn cũng như khoảng ẩn xấu xí.

Điểm bất lợi là nó có thể hơi quá mức đối với những thứ đơn giản như ví dụ của bạn. Nhưng đối với các tình huống phức tạp hơn, nơi bạn có nhiều dữ liệu hơn để vượt qua, đó là một lựa chọn tốt. Đặc biệt xem xét rằng dữ liệu đang được truyền dưới dạng JSON, vì vậy bạn có thể dễ dàng truyền các đối tượng phức tạp.

Ngoài ra, bạn giữ dữ liệu tách biệt với định dạng, đây là một điều tốt để bảo trì.

Bạn thậm chí có thể có một cái gì đó như thế này (mà bạn có thể không thực sự làm gì với các phương pháp khác):

var poi_types = {1: "City", 2: "Restaurant"}; 
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}}; 

...

<a id="poi-2" href="/poi/2/">Hatsune</a> 

Và kể từ khi bạn có lẽ hầu hết sử dụng một số máy chủ ngôn ngữ lập trình bên cạnh, bảng băm này không đáng kể để tạo ra động (chỉ cần tuần tự hóa nó vào JSON và nhổ nó trong phần tiêu đề của trang).

Answer 4

Cũng trong trường hợp này, giải pháp tối ưu là

<a href="#" alt="" title="Title of My Pop-up">click</a> 

và sử dụng thuộc tính tiêu đề.

Thỉnh thoảng tôi phá vỡ thông số nếu tôi thực sự cần. Nhưng hiếm khi, và chỉ vì lý do tốt.

EDIT: Không chắc chắn tại sao -1, nhưng tôi đã chỉ ra rằng đôi khi bạn nghĩ rằng bạn cần phải phá vỡ spec, khi bạn không.

Answer 5

Tôi cũng đã đánh cắp bộ não của mình. Tôi thích khả năng đọc của các thuộc tính không chuẩn, nhưng tôi không thích rằng nó sẽ phá vỡ tiêu chuẩn. Ví dụ khoảng ẩn là tuân thủ, nhưng nó không phải là rất dễ đọc. Điều gì về điều này:

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a> 

Ở đây mã này rất dễ đọc, vì ký hiệu cặp khóa/giá trị của JSON. Bạn có thể nói rằng đây là dữ liệu meta thuộc về liên kết chỉ bằng cách nhìn vào nó. Lỗ hổng duy nhất tôi có thể thấy bên cạnh việc chiếm đoạt thuộc tính "rel" là điều này sẽ gây rối cho các đối tượng phức tạp. Tôi thực sự thích ý tưởng đó về các thuộc tính tiền tố "data-" được đề cập ở trên. Có bất kỳ trình duyệt hiện tại nào hỗ trợ tính năng này không?

Đây là điều khác để suy nghĩ. Bao nhiêu tác động không tuân thủ mã có trên SEO?

Answer 6

Thuộc tính tùy chỉnh cung cấp cách thuận tiện để chuyển dữ liệu bổ sung sang phía máy khách. Dojo Toolkit là làm điều này thường xuyên và nó đã được chỉ (Debunking Dojo Toolkit Myths) ra rằng:

thuộc tính tùy chỉnh đã luôn HTML hợp lệ, họ chỉ không xác nhận khi thử với DTD. [...] Thông số kỹ thuật HTML tuyên bố rằng bất kỳ thuộc tính nào không được nhận dạng là bị bỏ qua bởi công cụ hiển thị HTML trong tác nhân người dùng và Dojo tùy chọn tận dụng lợi thế này để cải thiện dễ phát triển.

Answer 7

Bạn có thể tổ ẩn các yếu tố đầu vào bên trong phần tử neo

<a id="anchor_id"> 
    <input type="hidden" class="articleid" value="5"> 
    Link text here 
</a> 

Sau đó, bạn có thể dễ dàng kéo dữ liệu ra bởi

$('#anchor_id .articleid').val() 

Answer 8

Tại sao không khai báo thuộc tính popup_title trong một DTD tùy chỉnh? Điều này giải quyết vấn đề với xác thực. Tôi làm điều này với mọi yếu tố phi tiêu chuẩn, thuộc tính và giá trị và cảm ơn xác thực này chỉ cho tôi thấy những vấn đề thực sự với mã của tôi. Điều này cũng làm cho bất kỳ lỗi trình duyệt nào ít xảy ra hơn với HTML như vậy.

Answer 9

Giải pháp của tôi cuối cùng là ẩn dữ liệu bổ sung trong thẻ id được phân tách bằng một số dấu phân tách (một dấu gạch dưới là khoảng trắng, hai là cuối của arg đó), arg thứ hai có id:

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a> 

Xấu xí và giả sử bạn chưa sử dụng thẻ id cho một mục nào khác, nhưng nó tuân thủ trên mọi trình duyệt.