숨겨진 속성 (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는 데스크톱 브라우저에서 볼 때있을 수 있지만 모바일 브라우저에서는 볼 수 없습니다. 또는 시각적으로 숨겨 지지만 화면 판독기에서는 계속 사용할 수 있습니다.