В чем разница между скрытым атрибутом (HTML5) и правилом отображения: нет (CSS)?

Question

HTML5 имеет новый глобальный атрибут hidden, который можно использовать для скрытия содержимого.

<article hidden>
   <h2>Article #1</h2>
   <p>Lorem ipsum ...</p>
</article>

В CSS есть правило display:none, которое также можно использовать для скрытия содержимого.

article { display:none; }

Визуально они идентичны.Какая разница семантически?В вычислительном отношении?

Какие руководящие принципы я должен учитывать, когда использовать один или другой?

TIA.

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

Answer 1

Ключевое отличие состоит в том, что hidden элементы всегда скрыты независимо от презентации:

Скрытый атрибут не должен использоваться для скрытия контента, который может быть законно показан в другой презентации.Например, неправильно использовать скрытые, чтобы скрыть панели в диалоговом окне с вкладками, потому что интерфейс с вкладками - это просто вид переполнения презентации - с таким же успехом можно просто показать все элементы управления формой на одной большой странице с полосой прокрутки.Также неправильно использовать этот атрибут, чтобы скрыть содержимое только из одной презентации - если что-то помечено как скрытое, оно скрыто от всех презентаций, включая, например, программы чтения с экрана.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Поскольку CSS может предназначаться для различных типов мультимедиа / презентаций, display: none будет зависеть от данной презентации.Например, некоторые элементы могут иметь display: none при просмотре в настольном браузере, но не в мобильном браузере.Или быть скрытым визуально, но все же доступным для программы чтения с экрана.