HTML［hidden属性］要素を表示しないことを指定する

hidden=""

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

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

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


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

属性		値
グローバル属性
`hidden=""`	要素を表示しない	`hidden`	今は関連していないので非表示にする
		空文字列	`hidden` の場合と同じ
		`until-found`	検出されるまでは非表示にする

値を省略した場合、および無効な値を指定した場合は hidden の状態になります。
until-found は新しく定義された値のため、対応していないブラウザも多いです。

hidden と until-found の違い

値の hidden と until-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 に未対応のブラウザでは、どちらの場合も非表示のままになります。