hidden 属性関連性がないことを表す

hidden 属性は、関連性がないことを表します。

hidden 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。hidden 属性は論理属性です。ユーザエージェントは、hidden 属性が指定された要素をレンダリングしないことが求められています。

間違えてはいけないのは、hidden 属性は 「隠す」、「非表示」 といった意味ではないということです (レンダリング上は隠されるかもしれませんが)。ですから、タブ型のユーザインタフェースにおいて初期状態で非表示になっている要素を隠すために hidden 属性を使用するような使い方は妥当ではありません。また、hidden を付与された要素にリンクをしたり、参照したりするべきではありません。

なお、hidden 属性を付与されたセクション中にある要素はアクティブなままです。

サンプルソースを見る

hidden 属性の仕様

この属性を使用できる要素
  • すべての HTML5 要素

hidden 属性のサンプルソース

<script>
 function display() {
  var element = document.getElementById("content");
  element.removeAttribute("hidden");
 }
</script>
<p>
 あなたはお医者様ですか?
 <input type="radio" name="question" id="answer-yes" value="Yes" onClick="display()" />
 <label for="answer-yes">はい</label>
</p>
<div id="content" hidden="">
 <p>
  <em>大歓迎です!</em>
 </p>
</div>
<!-- このような書き方もできます -->
<div id="content" hidden="hidden">
 …省略…
</div>
<!-- このような書き方もできます。ただし、XHTML5 として扱う場合は不正です -->
<div id="content" hidden>
 …省略…
</div>

W3C HTML5 仕様書

7.1 The hidden attribute