hidden - 隠し要素

• トップ
• HTMLリファレンス
• hidden

属性

サポート

説明

HTML5 でサポートされた属性で、その要素を非表示にするか否かを指定します。

hidden

その要素を非表示にします。display: none を指定したのと同様の動作となります。検索対象にも #id によるページ内ジャンプの対象にもなりません。(→ サポート状況)

<div hidden>...
<div hidden="hidden">...
<div hidden="">...

until-found

その要素を非表示にします。(ブラウザがサポートしていれば) content-visibility: hidden を指定したのと同様の動作となります。検索対象や #id によるページ内ジャンプの対象とすることができ、検索やジャンプ対象とされた時点で hidden 属性が削除され、表示されるようになります。(→ サポート状況)

<div hidden="until-found">...

使用例

<section id="sec-11">
 <h2>表示セクション</h2>
 <p>このセクションは表示されます。</p>
</section>

<section id="sec-2" hidden>
 <h2>非表示セクション</h2>
 <p>このセクションは常に非表示となります。</p>
</section>

<section id="sec-3" hidden="until-found">
 <h2>見つかるまで非表示セクション</h2>
 <p>このセクションは検索されたり #id によるジャンプ対象となるまでは非表示となります。</p>
</section>

リンク

• https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute
• https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/hidden
• https://caniuse.com/hidden