【HTML Living Standard】hidden属性の使い方
hidden属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
hiddenプロパティは、HTML要素が現在ユーザーに表示されるべきではない状態であるかを示す真偽値を保持するプロパティです。このプロパティがHTML要素に指定されると、その要素はブラウザのレンダリングツリーから除外され、画面上には表示されなくなります。これにより、まだ表示する準備ができていないコンテンツや、特定の条件下でのみ表示されるべきコンテンツを一時的に隠す際に活用できます。
hiddenプロパティが適用された要素は、視覚的には非表示になりますが、DOM（Document Object Model）上には引き続き存在します。そのため、JavaScriptなどのスクリプトからは、非表示状態の要素にもアクセスしてその内容を操作したり、状態を変更したりすることが可能です。
このプロパティは真偽属性として機能し、要素にhidden属性が存在するだけで値がtrueと見なされ、要素が非表示になります。属性が存在しない場合はfalseと見なされ、要素は通常通り表示されます。技術的にはCSSのdisplay: none;に似た効果をもたらしますが、hiddenプロパティは要素がセマンティックに非表示であるべき状況を示すという点で、単なるスタイル設定とは異なる意味合いを持ちます。
注意点として、CSSのdisplayプロパティが明示的に設定されている場合、その設定がhiddenプロパティよりも優先されることがあるため、意図した表示にならない可能性もあります。JavaScriptを使用して、要素のDOMオブジェクトのhiddenプロパティの値を動的に変更することで、要素の表示・非表示を簡単に切り替えることが可能です。このプロパティは、HTMLのすべての要素に適用できるグローバル属性の一つです。
構文(syntax)
1<element hidden>コンテンツ</element>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません