Sự khác biệt giữa thuộc tính ẩn (HTML5) và quy tắc hiển thị: không (CSS) là gì?

HTML5 có một thuộc tính toàn cục mới hidden, có thể được sử dụng để ẩn nội dung.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

CSS có display:nonequy tắc, quy tắc này cũng có thể được sử dụng để ẩn nội dung.

article { display:none; }

Nhìn bề ngoài, chúng giống hệt nhau. Sự khác biệt về mặt ngữ nghĩa là gì? Về mặt tính toán?

Tôi nên xem xét những nguyên tắc nào khi sử dụng cái này hay cái kia?

TIA.

CHỈNH SỬA : Dựa trên phản hồi của @ newtron (bên dưới), tôi đã tìm kiếm nhiều hơn. Các hiddenthuộc tính được tranh luận sôi nổi trong năm ngoái và (rõ ràng) hầu như không làm cho nó vào spec HTML5. Một số người cho rằng nó là thừa và không có mục đích. Từ những gì tôi có thể nói, đánh giá cuối cùng là: Nếu tôi chỉ nhắm mục tiêu các trình duyệt web, không có sự khác biệt. (Một trang thậm chí còn khẳng định rằng các trình duyệt web được sử dụng display:noneđể triển khai thuộc tính ẩn.) Nhưng nếu tôi đang xem xét khả năng truy cập (ví dụ: có lẽ tôi mong muốn nội dung của mình được trình đọc màn hình đọc), thì có một sự khác biệt. Quy tắc CSS display:nonecó thể ẩn nội dung của tôi khỏi trình duyệt web, nhưng quy tắc aria tương ứng (ví dụ:aria-hidden="false") có thể cố gắng đọc nó. Vì vậy, bây giờ tôi đồng ý rằng câu trả lời của @ newtron là đúng, mặc dù có lẽ (có thể cho là) ​​không rõ ràng như tôi có thể muốn. Cảm ơn @newtron vì sự giúp đỡ của bạn.

Sự khác biệt chính dường như là hiddencác phần tử luôn bị ẩn bất kể bản trình bày:

Thuộc tính ẩn không được sử dụng để ẩn nội dung có thể được hiển thị hợp pháp trong bản trình bày khác. Ví dụ: việc sử dụng hidden để ẩn các bảng trong hộp thoại theo thẻ là không chính xác, vì giao diện theo thẻ chỉ là một loại trình bày tràn - người ta cũng có thể hiển thị tất cả các điều khiển biểu mẫu trong một trang lớn với một thanh cuộn. Tương tự, việc sử dụng thuộc tính này để ẩn nội dung chỉ khỏi một bản trình bày cũng không chính xác - nếu nội dung nào đó được đánh dấu là ẩn, nó sẽ bị ẩn khỏi tất cả các bản trình bày, bao gồm cả trình đọc màn hình chẳng hạn.

http://dev.w3.org/html5/spec/Overview.html#the-hiised-attribute

Vì CSS có thể nhắm mục tiêu các loại phương tiện / bản trình bày khác nhau, display: nonesẽ phụ thuộc vào một bản trình bày nhất định. Ví dụ: một số phần tử có thể có display: nonekhi được xem trong trình duyệt trên máy tính để bàn, nhưng không có trong trình duyệt dành cho thiết bị di động. Hoặc, được ẩn trực quan nhưng vẫn khả dụng với trình đọc màn hình.