HTML5 tem um novo atributo global,hidden, que pode ser usado para ocultar o conteúd

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

CSS tem odisplay:none rule, que também pode ser usada para ocultar o conteúd

article { display:none; }

Visualmente, eles são idênticos. Qual é a diferença semanticamente? Computacionalmente?

Quais diretrizes devo considerar quando usar um ou outro?

TIA.

EDITA: Com base nas respostas do @ newtron (abaixo), fiz mais pesquisas. Ohidden atributo @ foi muito disputado no ano passado e (aparentemente) mal chegou à especificação do HTML5. Alguns argumentaram que era redundante e não tinha propósito. Pelo que sei, a avaliação final é a seguinte: se estou segmentando apenas navegadores da Web, não há diferença. (Uma página chegou a afirmar que os navegadores da Web usavamdisplay:none para implementar o atributo oculto.) Mas se estou pensando em acessibilidade (por exemplo, talvez eu espere que meu conteúdo seja lido pelos leitores de tela), então há uma diferença. A regra CSSdisplay:none pode ocultar meu conteúdo dos navegadores da web, mas uma regra de ária correspondente (por exemplo,aria-hidden="false") pode tentar lê-lo. Portanto, agora eu concordo que a resposta da newtron está correta, embora talvez (sem dúvida) não seja tão clara quanto eu gostaria. Obrigado @ newtron por sua ajuda.