hidden属性 - 無関係な要素
公開日:
hidden属性は、この要素がドキュメントとは関係がないことを表すための属性です。一般的なブラウザではこの属性が付いた要素は非表示になります。
説明
hidden属性は、要素がドキュメントと関係な状態であることを表します。開かれていないダイアログボックスの内容などに指定することで、ユーザーエージェントがドキュメントの内容を理解しやすくなるよう助けます。一般的なブラウザではこの属性が付いた要素は非表示になりますが、非表示にすることを目的としてこの属性を使ってはいけません。
例えば、アコーディオンをマークアップする時に、閉じているタブの内容にhidden属性を指定するのは適切ではありません。アコーディオンの閉じているタブは、デザイン上、見た目をすっきりさせるために非表示になっているだけで、その内容はドキュメントと常に関係あるものだからです。
それに対して、例えば、一定の条件下で表示される警告の内容であるダイアログボックスは、表示される時にだけ、ドキュメントと関係がある存在です。こういったダイアログボックスの場合は、非表示状態の時にはhidden属性を付けるのが適切です。
例えば、Internet Explore 10以下など、一部のブラウザは、hidden属性を付けても非表示にはなりません。そのため、hidden属性を付ける時には、併せてdisplay: none
も適用することをオススメします。
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】hidden属性 - 無関係な要素</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/hidden/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>hidden属性は、この要素がドキュメントとは無関係な状態であることを、ユーザーエージェントに伝えるための属性です。一般的なブラウザでは非表示状態になります。</p>
<h2>hidden属性あり</h2>
<p hidden>この要素はドキュメントとは関係ありません。</p>
<h2>hidden属性なし</h2>
<p>この要素はドキュメントと関係があります。</p>
</body>
</html>