Gizli özellik (HTML5) ile display: yok kuralı (CSS) arasındaki fark nedir?

HTML5, hiddeniçeriği gizlemek için kullanılabilen yeni bir genel özelliğe sahiptir .

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

CSS, display:noneiçeriği gizlemek için de kullanılabilen kurala sahiptir .

article { display:none; }

Görsel olarak aynılar. Anlamsal olarak fark nedir? Hesaplamayla?

Birini veya diğerini ne zaman kullanacağım konusunda hangi kuralları dikkate almalıyım?

TIA.

DÜZENLEME : @ newtron'un yanıtlarına (aşağıda) dayanarak, daha fazla arama yaptım. hiddenNitelik ateşli geçen yıl çekişmeli ve (görünüşte) zorlukla HTML5 spec içine yapıldı. Bazıları gereksiz olduğunu ve amacı olmadığını savundu. Anlayabildiğim kadarıyla, son değerlendirme şudur: Yalnızca web tarayıcılarını hedefliyorsam, hiçbir fark yoktur. (Hatta bir sayfa, web tarayıcılarının display:nonegizli özniteliği uygulamak için kullanıldığını iddia etti .) Ancak erişilebilirliği düşünüyorsam (örneğin, içeriğimin ekran okuyucular tarafından okunmasını bekliyorum), o zaman bir fark vardır. CSS kuralı display:noneiçeriğimi web tarayıcılarından gizleyebilir, ancak karşılık gelen bir arya kuralı (ör.aria-hidden="false") okumaya çalışabilir. Bu nedenle, @ newtron'un cevabının doğru olduğuna, belki de (tartışmalı olarak) istediğim kadar net olmadığına şimdi katılıyorum. Yardımınız için teşekkürler @newtron.

Temel fark hidden, sunumdan bağımsız olarak öğelerin her zaman gizli kalması gibi görünüyor :

Gizli özellik, başka bir sunumda yasal olarak gösterilebilecek içeriği gizlemek için kullanılmamalıdır. Örneğin, sekmeli bir iletişim kutusunda panelleri gizlemek için gizli'yi kullanmak yanlıştır, çünkü sekmeli arayüz yalnızca bir tür taşma sunumudur - tek bir büyük sayfada bir kaydırma çubuğu ile tüm form kontrollerini aynı şekilde gösterebilir. Bu özniteliği yalnızca bir sunumdan içeriği gizlemek için kullanmak da benzer şekilde yanlıştır - bir şey gizli olarak işaretlenirse, örneğin ekran okuyucular dahil tüm sunumlardan gizlenir.

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

CSS, farklı medya / sunum türlerini hedefleyebildiğinden, display: nonebelirli bir sunuya bağlı olacaktır. Örneğin, bazı öğeler display: nonebir masaüstü tarayıcısında görüntülendiğinde sahip olabilir , ancak bir mobil tarayıcıda olmayabilir. Ya da görsel olarak gizlense de ekran okuyucuya açık olun.