hidden=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

hidden属性は、要素を表示しないことを指定します。

  • この属性が指定された要素は、ユーザーがアクションを起こすまでは非表示となります。

<p hidden>表示されない要素</p>

属性
グローバル属性
hidden="" 要素を表示しない hidden 今は関連していないので非表示にする
空文字列 hidden の場合と同じ
until-found [+]検出されるまでは非表示にする
  • 値を省略した場合、および無効な値を指定した場合は hidden の状態になります。
  • until-found は新しく定義された値のため、対応していないブラウザも多いです。

hidden と until-found の違い

値の hiddenuntil-found には以下のような違いがあります。

  • hidden が指定された要素内のコンテンツは、ページ内検索の対象にはなりません。しかし、until-found の場合は対象になります。
  • hidden が指定された要素内のコンテンツは、ページ内リンクの到達点にはできません。しかし、until-found の場合は到達点にすることができます。
  • hidden の場合は display: none によって非表示になりますが、until-found の場合は content-visibility: hidden が使用されます。(ただし、until-found に対応していないブラウザでは display: none になります)

until-found が指定された要素内のコンテンツは、ページ内検索またはページ内リンクによって検出された際に、hidden属性が取り除かれて表示されるようになります。

  • Googleの文書によると、until-found が指定された要素内のコンテンツは、検索エンジンがアクセスできるようになると書かれています。

hidden="hidden" について

hidden="hidden" は、次のような要素に指定することができます。

  • 今は関連性がないが、これから関連するかもしれない要素。
  • 以前は関連性があったが、今はもう関連していない要素。
  • hidden="hidden" は、値を省略して hidden と記述することもできます。

次の例では、fieldset要素にhidden属性を指定して、ユーザー情報の入力欄を隠しています。これは、ユーザーが規約に同意しない限り、そのコンテンツが利用できない(無関係である)ことを表しています。

<script>
function visible(){
    if (document.getElementById("agree").checked) {
        document.getElementById("user").hidden = false;
    } else {
        document.getElementById("user").hidden = true;
    }
}
</script>

<p><label><input type="checkbox" name="agree" value="1" id="agree" onchange="visible()">規約に同意する</label></p>

<fieldset id="user" hidden>
<legend>ユーザー情報</legend>
<p>お名前:<input type="text" name="name"></p>
</fieldset>

hidden="until-found" について

hidden="until-found" は、初期状態では非表示にしておきたいが、その内容をページ内検索やページ内リンク、検索エンジンの対象にしたい場合に指定します。

<div hidden="until-found">

<p>初期状態では表示されないものの、このテキストはページ内検索やページ内リンク、検索エンジンの対象になります。</p>

</div>

hidden属性が適さないケース

現時点において関連性のある要素に対しては、この属性を指定してはならないとされています。(関連性はあるけど隠しておきたい、といったコンテンツには適さないことになります)

例えば、タブ付きボックスで表示内容を切り替える場合に、非表示のコンテンツにこの属性を使用するのは不適切となります。(この場合は、非表示のコンテンツが無関係であるとは言えないためです)

また、この属性が指定された要素は、すべてのユーザーに対して隠される必要があります。そのため、ユーザーの環境により表示内容を変える(一部を隠す)ような使い方にも適さないことになります。

リンクについて

自身が非表示でない要素は、非表示の要素にリンクしてはならないとされています(※)。また、自身が非表示でないlabel要素およびoutput要素のfor属性は、非表示の要素を参照してはならないとされています。(そのような参照はユーザーの混乱を招くというのが理由です)

  • hidden="until-found" が指定された要素にはページ内リンクが可能なため、上記の定義をどのように解釈すればいいのか、正確には分かりませんでした。(検出した際にhidden属性が削除されるのでOK、ということでしょうか?)
  • もしかすると非表示 = hidden状態(hidden="hidden"を意味しているのかもしれません。

指定できる要素

hidden属性はグローバル属性のため、全てのHTML要素に指定することができます。

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。
旧HTMLからの変更点
  • HTML5:hidden属性が定義されました。
  • HTML LS:値に until-found が追加されました。

使用例

表示・非表示を切り替えた例

<h3>会員登録</h3>

<p>利用規約にご同意の上、ユーザー情報を送信してください。</p>

<p>※ご同意いただけない場合は、ユーザー情報の入力欄は表示されません。</p>

<form method="post" action="example.cgi">

<script>
function visible(){
    if (document.getElementById("agree").checked) {
        document.getElementById("user").hidden = false;
    } else {
        document.getElementById("user").hidden = true;
    }
}
</script>

<p><label><input type="checkbox" name="agree" value="1" id="agree" onchange="visible()">規約に同意する</label></p>

<fieldset id="user" hidden>
<legend>ユーザー情報</legend>
<p>お名前:<input type="text" name="name"></p>
<p>メールアドレス:<input type="email" name="email"></p>
</fieldset>

<p><input type="submit" value="登録する"></p>

</form>

表示例

会員登録

利用規約にご同意の上、ユーザー情報を送信してください。

※ご同意いただけない場合は、ユーザー情報の入力欄は表示されません。

  • サンプルのため送信できません。
until-foundを指定した例

<p>ページ内検索のテストです。</p>

<div hidden>
<p>"太郎"で検索してください。</p>
<p>この要素内のテキストはページ内検索の対象になりません。</p>
</div>

<div hidden="until-found">
<p>"花子"で検索してください。</p>
<p>この要素内のテキストはページ内検索の対象になります。</p>
</div>

表示例

ページ内検索のテストです。

  • "太郎"で検索した場合は非表示のままですが、"花子"で検索した場合はdiv要素内のコンテンツが表示されます。
  • ただし、until-found に未対応のブラウザでは、どちらの場合も非表示のままになります。