В чем разница между скрытым атрибутом (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 спецификации. Некоторые утверждали, что это было лишним и бесполезным. Насколько я могу судить, окончательная оценка такова: если я ориентируюсь только на веб-браузеры, разницы нет. (Одна страница даже утверждала, что веб-браузеры использовали display:noneдля реализации скрытого атрибута.) Но если я рассматриваю вопрос о доступности (например, возможно, я ожидаю, что мой контент будет прочитан программами чтения с экрана), тогда есть разница. Правило 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при просмотре в браузере настольного компьютера, но не в браузере мобильного устройства. Или быть скрытым визуально, но по-прежнему доступным для программы чтения с экрана.