В чем разница между скрытым атрибутом (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 (ниже), я провел более тщательный поиск. Атрибут скрытый в прошлом году горячо оспаривался и (по-видимому) едва вошел в спецификацию HTML5. Некоторые утверждали, что это было лишним и бесполезным. Насколько я могу судить, окончательная оценка такова:Если я ориентируюсь только на веб-браузеры, разницы нет. (На одной странице даже утверждалось, что веб-браузеры использовали display: none для реализации скрытого атрибута.) Но если я рассматриваю возможности доступности (например, возможно, я ожидаю, что мой контент будет прочитан программами чтения с экрана), тогда есть разница. Правило CSS display: none может скрыть мой контент от веб-браузеров, но соответствующее правило aria (например, aria-hidden = "false" ) может попытаться прочитать его. Таким образом, теперь я согласен с тем, что ответ @newtron правильный, хотя, возможно (возможно), не так ясен, как мне хотелось бы. Спасибо @newtron за вашу помощь.