关键的区别似乎是hidden元素总是隐藏的，不管表示形式如何：
hidden属性不能用于隐藏可在其他演示文稿中合法显示的内容。例如，使用hidden隐藏选项卡式对话框中的面板是不正确的。因为选项卡式界面仅仅是一种溢出表示--同样可以在一个带有滚动条的大页面中显示所有表单控件。同样，使用此属性仅从一个表示中隐藏内容也是不正确的-如果某个内容被标记为隐藏，则它将从所有表示中隐藏，包括屏幕阅读器等。
http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute
由于CSS可以针对不同的媒体/演示类型，display: none将取决于给定的演示。例如，一些元素在桌面浏览器中查看时可能具有display: none，但在移动的浏览器中不具有。或者，在视觉上隐藏，但仍可用于屏幕阅读器。

简单规则：
你是否隐藏了一些东西，因为它还不是页面内容的语义部分，比如一系列潜在的错误消息还没有被触发？使用hidden。
您是否隐藏了页面内容的一部分，例如将段落切换为折叠状态以避免混乱？请使用display:none。

• • hidden与语义有关（某些内容当前是否是页面内容的一部分），display: none与页面内容的表示有关。**

不幸的是，hidden不会覆盖任何display CSS，即使这会让人感觉到不属于页面的东西不应该被显示。如果你想让hidden得到尊重，添加这个css规则：[hidden] { display: none !important }
示例：
1.使用hidden表示"thank you"消息，在填写表单之前，该消息不应作为页面的一部分存在。
1.使用hidden可以显示一系列可能的错误消息，这些消息可能会根据用户在页上的操作而显示给用户。在错误发生之前，这些错误不会在语义上成为页内容的一部分。
1.将display: none用于仅在用户悬停或单击菜单按钮时显示的导航。
1.对于选项卡式窗格，使用display: none，选项卡式窗格的唯一原因是同时向用户显示所有窗格太过复杂（如果用户的屏幕足够宽，可能会显示所有窗格，因此窗格始终是页面内容的一部分，因此CSS表示逻辑是适当的选择）。
1.使用display: none折叠文档中的段落或节。这表示该段落仍是页面内容的一部分，但为了方便用户，我们已将其隐藏。
注意：无障碍设备将受益于了解导航或存在但当前未显示的内容与当前未被视为页面一部分的内容之间的差异，因此永远不应向用户描述这些内容。

hidden属性（HTML5）和display:none规则（CSS）之间的区别是什么？

• • MDN**确认：

更改具有hidden特性的元素的CSS display属性值将覆盖该行为。
我们可以直截了当地说明：

.hidden {
  display:none;
}

.not-hidden {
  display: block
}

<p hidden>Paragraph 1: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden">Paragraph 2: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p hidden class="not-hidden">Paragraph 3: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>
<p class="hidden not-hidden">Paragraph 4: This content is not relevant to this page right now, so should not be seen. Nothing to see here. Nada.</p>

这表明，在以下方面没有表象差异：

• a）<p hidden>
• b）<p class="hidden">，其中.hidden {display: none;}

那么... hidden和class="hidden"是可以互换的，对吗？
错了。

• • 添加辅助功能：**

除了视觉表现之外，我们还需要考虑更多的东西，我们都应该迎合屏幕阅读器的需求 *，以最大限度地提高可访问性 *（对吗？），所以上面的第二个选项应该是这样的：

• b）<p class="hidden" aria-hidden="true">，其中.hidden {display: none;}
• • 为什么使用class="hidden"和aria-hidden="true"优于使用hidden？**

因为我们 * 知道 * CSS可以使用级联或特异性来覆盖，而且我们 * 知道 * aria-hidden与屏幕阅读器等辅助功能用户代理对话。
相比之下，HTML5的hidden属性要粗略得多，它没有明确说明它做什么或不做什么--更糟糕的是，它似乎暗示它做了一些实际上不做的事情。

• • 参见：**https://meowni.ca/hidden.is.a.lie.html
• • 最后说明：**

无论您使用HTML、CSS和ARIA的哪种组合，请注意：
我们已经有6种方法来隐藏具有不同目的/意图的内容。

1. display: none;
2. visibility: hidden;（不显示，但仍保留空格）
3. opacity: 0;
4. width: 0; height: 0;
5. x1米20英寸1x
   1.对于表单数据，则为input type="hidden"

• • 来源：**https：//www.example.comdavidwalsh.name/html5-hidden#comment-501242