title: What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
body: <p>HTML5 has a new global attribute, <code>hidden</code>, which can be used to hide content.   </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;article hidden&gt;
     &lt;h2&gt;Article #1&lt;/h2&gt;
     &lt;p&gt;Lorem ipsum ...&lt;/p&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>CSS has the <code>display:none</code> rule, which can also be used to hide content. </p>
  
  <pre><code>article { display:none; }
  </code></pre>
  
  <p>Visually, they are identical.  What is the difference semantically?  Computationally?</p>
  
  <p>What guidelines should I consider on when to use one or the other?</p>
  
  <p>TIA.</p>
  
  <p><strong>EDIT</strong>:  Based on @newtron's responses (below), I did more searching.  The <code>hidden</code> attribute was hotly contested last year and (apparently) barely made it into the HTML5 spec.  Some argued it was redundant and had no purpose.  From what I can tell, the final evaluation is this:  If I'm targeting only web browsers, there is no difference.  (One page even asserted that web browsers used <code>display:none</code> to implement the hidden attribute.)  But if I'm considering accessibility (e.g., perhaps I expect my content to be read by screen-readers), then there is a difference.  The CSS rule <code>display:none</code> might hide my content from web browsers, but a corresponding aria rule (e.g., <code>aria-hidden="false"</code>) might try to read it.  Thus, I now agree that @newtron's answer is correct, though perhaps (arguably) not as clear as I might like.  Thanks @newtron for your help.</p>