hidden - 関係のないことを表す

hidden属性と[display:none]の違い

さて、hidden属性とdisplay:noneは、「非表示になる」という点で挙動が同じですが、その用途は明確に違います。hidden属性は、ドキュメント上、その要素が無関係であることを意味します。対して、display:noneはデザイン目的で非表示にするだけで、その要素がドキュメント上で無関係であることは意味しません。ブラウザ、強いては検索エンジンがどう解釈するかを意識して、利用しましょう。

hidden属性を使うケース

hidden属性を使うケースを見てみましょう。下記は、ブラウザゲームの画面を想定しています。ログインをするとゲームの画面が表示される仕組みです。ログインをするまでは、ゲーム画面は無関係(この場合は存在しない状態という意味)なのでhidden属性を付けていますが、ログインをすると、hidden属性が無効になってゲーム画面が表示されます。このように、hidden属性を外すことで、その要素がドキュメントと無関係ではなくなったことをブラウザに伝えます。

<p>ログインして下さい → <a onclick="login(event)">ログイン</a></p>
<p id="game" hidden>ゲームの始まりです！…(<a onclick="logout(event)">ログアウト</a>)</p>

// ログイン
function login(e) {
	var e = e || window.event ;
	e.preventDefault() ;

	// [hidden]属性を無効にする
	document.getElementById("game").hidden = false ;
}

// ログアウト
function logout(e) {
	var e = e || window.event ;
	e.preventDefault() ;

	// [hidden]属性を有効にする
	document.getElementById("game").hidden = true ;
}

hidden属性を使わないケース

クリックしたメニューによって表示を切り替えるタブコンテンツ、親メニューと子メニューに分かれていて、親メニューをクリックした時に子メニューの一覧が展開されるようなアコーディオンなどは、隠れている要素にhidden属性を使うべきではありません。何故なら、隠れている要素はドキュメントと無関係なわけではなく、単にユーザーインターフェイスを快適にするために、デザイン上、非表示になっているだけだからです。意味があり、存在していて、出番がありますよね。

Ie 10以下のフォロー

2015年12月現在、hidden属性は主要なブラウザの全てが対応しているので問題なく使用できます。Ieだと、バージョン10以下は対応していません。つまり、hidden属性を指定しても非表示になりません。Ie 10以下を切り捨てたくない場合は、hidden属性と一緒にdisplay:noneを使うことで、非表示にしましょう。