hidden 属性

hidden 属性もともと論理属性でしたが、until-found 属性値が新たに定義されたことで列挙属性となっています。

hidden 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。hidden 属性は列挙属性です。下記の属性値を指定することができます。

属性値	概要
hidden	要素が文書（ページ）に対して無関係であることを示します。属性値が空の場合も hidden として扱われます。
until-found	hidden until found state、つまり「発見されるまでは無関係」という状態を示します。

hidden="hidden"

属性値に hidden が指定された、あるいは属性値が空の hidden 属性が付与された要素は、現時点では、あるいはもはや、関連性がない、無関係であることを表します。ユーザエージェントは、このような hidden 属性が指定された要素をレンダリングしないことが求められています （ユーザエージェントの CSS においては display: none が適用されることになるでしょう）。

例えば、何かの操作を完了するまでは関係のないコンテンツに対して指定するといった使用方法が考えられます。

この時、hidden 属性は 「隠す」という意味を持つわけではないということに注意しましょう （レンダリング上は隠されるかもしれませんが）。ですから、タブ型のユーザインタフェースにおいて初期状態では画面上には見えないようになっている要素を「隠す」ために、hidden 属性を使用するような使い方は妥当ではありません。

タブ型のユーザインタフェースにおいて初期状態では隠れているように見える要素は、文書（ページ）に関連性がありながらも、表示領域外にオーバーフローしている状態であり、「関連性がない」わけではないからです。

また、このような要素に対して、hidden="hidden" が指定されていない要素からリンクをしたり、for 属性などで参照したりするべきではありません。

hidden="until-found"

新たに策定された属性値です。hidden="until-found" が指定された要素は、ページ内検索や、フラグメント識別子付きの URL などでアクセスされるまでは関連性がない、無関係であることを意味します。

hidden="until-found" に対応したユーザエージェントにおいては、当該要素に content-visibility: hidden が適用されるでしょう。

なお、ページ内検索やフラグメント識別子付きの URL によるアクセスで当該要素が表示された場合、hidden 属性は削除されます。つまり、一度このような形で表示された要素は、その後も表示されたままになります。

この、hidden 属性が削除される際には、beforematch イベントが発生するため、当該要素が表示されたことを検知することが可能です。

<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="hidden">
 <p>
  <em>大歓迎です！</em>
 </p>
</div>

<!--
  このような書き方もできます
（属性値が空の場合は、hidden が指定されたものとして扱われます）
-->
<div id="content" hidden="">
 …省略…
</div>

<!-- ページ内検索でヒットした場合などに表示されます -->
<div id="content" hidden="until-found">
 …省略…
</div>