hidden属性 は，HTML5 で新規に導入された属性 で，

値 は，「hidden="hidden"」，「hidden=""」，「hidden」 のいずれかの形式で指定します。

この属性を指定すると，指定対象の要素が，現在のページの表示状態とは，未だ，もしくは，もはや 関連性をもたない こと，あるいは，この要素のコンテンツを ユーザーからアクセスできない「ページの他の部分」として利用する ことを示します。　ブラウザーは，この属性が指定された要素は表示しません。　この属性は，当該要素が無関係の状態を表す場合にのみ，上記の形式で指定します。

【注意】 通常この属性は，CSS を用いて実装されるため，CSS を用いてこの属性による指定を上書きすることができます。　たとえば，CSS で，すべての要素を対象として {display: block} を指定すると hidden属性 による指定は無効になってしまいます。　従って，Webページ作成者は，スタイルシートの作成時に，この hidden属性 による指定が想定どおりに反映されるかどうかをテストして確認する必要があります。

別の表示機器等では正しく表示することが可能なコンテンツを隠すたに，hidden属性 を使うことは避けるべきです。　例えば，タブ付きダイアログのパネルを隠すために hidden属性 を使うのは正しくありません。　それは，「タブ付きインタフェース」というのは，一種の オーバーフロー表現 に過ぎないからです。　つまり，一つの大きなページの中でスクロールバーを使ってすべてのフォーム・コントロールを表示するのと同じようなものと考えることができるからです。　ですので，タブ付きダイアログのパネルに対応する部分のみを隠すというのは不適当ということになります。

同様に，一つの表示機器等を対象とした文書表示のみで要素を非表示にするために，この属性を使うのも正しくありません。　実際，hidden属性 の値に hidden が指定された要素の場合，直接の指定対象以外のすべての機器での文書表示でも，同様に非表示になります。　スクリーン・リーダーやプリンターも例外ではありません。

hidden属性 の値 hidden が指定されていない要素は，hidden が指定された要素にリンクするのは避けるべきです。　また，値 hidden が指定されていない <label> や <output> の for属性 で，hidden が指定された要素を参照するのも避けるべきです。

例えば，値 hidden が指定されたセクションに対して，href属性 を使ってリンクするのは正しくありません。　もしそのコンテンツが利用不可能または関連性がないのであれば，それにリンクする理由はありません。

同様に，値 hidden が指定された説明を参照するために，ARIA の aria-describedby 属性を使うのも正しくありません。　セクションを隠すというのは，その時点では誰にも利用可能ではない，または，誰にも関係がない，ということを意味するのです。　だから，それは，明らかに，ユーザーが利用できるコンテンツに関する適切な説明にはなり得ないのです。

hidden属性 によって隠された領域の中にある要素はアクティブなままです。　例えば，そのような領域にあるスクリプトやフォーム・コントロールでも，それぞれ，実行したりサブミットしたりできます。　ユーザーに対する表示状態が変わるだけです。

hidden IDL属性 は，同じ名前のコンテンツ属性（つまり当属性）の値を反映しなければいけません。

次の例では，id="login" と id="game" がそれぞれ指定された ２つの <section>要素 があります。　Webページのロード時には，"game" の方は，hidden属性 の値 hidden が指定されていますので，"login" だけが表示されます。　ログインを実行しますと，JavaScript の login() 関数で，hidden属性 の値が変更されて，"login" は非表示となり，"game" が表示されます。

  <h1>An Example of Starting a Game</h1>
  <section id="login">
   <h2 style="width: 98%;">Login</h2>
   <form>
    <!-- calls login() once 
         the user's credentials have been checked -->
    &nbsp;&nbsp;&nbsp;<label>ログイン: </label>
    <input type="text" value="ユーザーID！">
    &nbsp;&nbsp;&nbsp; 
    <button onmousedown="login()">OK</button>
   </form>
   <script>
    function login() {
      // switch screens
      document.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
   </script>
  </section>
  <section id="game" hidden>
   <h2 style="width: 98%;">Game へようこそ！</h2>
  </section>