HTML | hidden属性で要素を非表示（display:none）にする方法
CSSを使わずにdisplay:noneをHTMLのみで指定可能なHTMLのグローバル属性「hidden」と簡単な指定方法を紹介しています。
hiddenで要素を非表示にする
HTML5から追加された属性hiddenは、HTMLコードにて指定する事で要素を非表示の状態にする事が可能です。
See the Pen CSS | Shadows that make the text float by yochans (@yochans) on CodePen.
hidden属性は、要素のdisplayステータスをnoneに切り替えます。
hiddenの指定方法は下記のパターンでいずれも指定したHTML要素に対して「display:none」が設定されます。
<p hidden>この部分は非表示</p>
<p hidden="">この部分は非表示</p>hiddenの上書き
hiddenとなっている要素はCSSのdisplayの値を変更する事で表示・非表示を切り替える事が可能です。
試してみた結果、初期状態ではHTMLよりCSSでの指定が優先されるようです。
<p class="hidden" hidden>この部分は非表示です</p>.hidden {
display: block;
}hiddenの注意点として「hidden=""」で指定する場合、引数になにを入れても、例えば「none」「false」「no」などを入れても「display:none」となりますので注意して下さい。
JavaScriptなどで動的に表示・非表示を変更したい場合は、やはりCSSのdisplayの値を書き換えるべきかと思います。
また、display:noneを指定した要素は幅・高さのサイズを持たずスペースを確保しませんので、以降のHTML要素が詰まる事に注意が必要です。