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

Question

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的帮助。

Answer 1

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

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

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