HTML の hidden 属性を扱うのは難しい
hidden グローバル属性 は、要素はまだ、あるいはもはや関連性がないことを示す論理型属性です。
例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。
ブラウザーは、 hidden 属性を設定している要素を表示しません。
hidden 属性をセマンティックに使い分けるのは難しい。
正しい使い方
ログインのプロセスが完了したあとに DOM を表示させる。
間違った使い方らしい……
タブメニューの切り替えを hidden で実装する。
hidden 属性は、CSS によって意図せず簡単に書き換えられてしまう。
hidden 属性を付けた DOM に
display: block を与えると、CSS が優先されて表示される。なるべく hidden 使わず、セマンティクスを意識せずに
display: none を使ったほうが気楽になれそう。