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

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

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

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

article { display:none; }

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

Какие рекомендации следует учитывать при использовании одного или другого?

ТИА.

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

Ответы

Ответ 1

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

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

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

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