hidden属性（HTML5）和display：none规则（CSS）有什么区别？

HTML5具有新的全局属性，hidden可用于隐藏内容。

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

CSS具有display:none规则，也可以用来隐藏内容。

article { display:none; }

在视觉上，它们是相同的。在语义上有什么区别？计算上？

在何时使用一种或另一种时，我应该考虑哪些准则？

TIA。

编辑：根据@newtron的响应（如下），我进行了更多搜索。该hidden属性去年受到激烈争论，并且（显然）几乎没有使其成为HTML5规范。有人认为这是多余的，没有目的。据我所知，最终的评估结果是：如果我仅针对Web浏览器，则没有区别。（甚至有一个页面断言，Web浏览器曾经display:none用于实现hidden属性。）但是，如果我正在考虑可访问性（例如，也许我希望屏幕阅读器可以读取我的内容），则存在区别。CSS规则display:none可能会在网络浏览器中隐藏我的内容，但会使用相应的aria规则（例如，aria-hidden="false"）可能会尝试阅读它。因此，我现在同意@newtron的答案是正确的，尽管可能（可以说）不像我想的那么清晰。感谢@newtron的帮助。

关键的区别似乎在于，hidden无论呈现形式如何，元素总是被隐藏：

hidden属性不得用于隐藏可以在其他演示文稿中合理显示的内容。例如，在选项卡式对话框中使用“隐藏”来隐藏面板是不正确的，因为选项卡式界面只是一种溢出演示文稿—同样，也可以只在一个大页面中用滚动条显示所有表单控件。同样，使用此属性仅从一个演示文稿中隐藏内容也是不正确的-如果某些内容被标记为隐藏，则它对于所有演示文稿（包括屏幕阅读器）都是隐藏的。

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

由于CSS可以针对不同的媒体/演示类型，display: none因此将取决于给定的演示。例如display: none，在桌面浏览器而非移动浏览器中查看时，某些元素可能具有。或者，在视觉上隐藏起来，但仍可供屏幕阅读器使用。