HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のhidden属性を使って非表示の段落を作成する方法

HTML5では、hidden属性を使うことで、段落などの要素を簡単に非表示にできます。hidden属性が指定された要素はブラウザ上に表示されなくなり、現在表示する必要がないものの、後で利用する可能性があるコンテンツなど、もはや関連性のない要素を扱う際に非常に便利です。

hidden属性の基本

hidden属性はブール型の属性のため、タグにhiddenと記述するだけで機能し、値を指定する必要はありません。属性が付与された要素は、CSSでdisplay: none;を適用した場合と同様に画面から隠れます。

サンプルコード

HTML5でhidden属性を実装するには、以下のコードを実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <h2>Heading</h2>
      <p>This is a demo paragraph and visible.</p>
      <p hidden>This is a demo paragraph and hidden.</p>
   </body>
</html>

実行結果のポイント

上記のコードをブラウザで開くと、「This is a demo paragraph and visible.」と書かれた段落だけが表示されます。hidden属性が付いた「This is a demo paragraph and hidden.」の段落はHTML内には存在していますが、画面上には表示されません。

注意点

非表示になった要素もHTMLドキュメント内には残っているため、JavaScriptなどでhidden属性を削除すれば、後から再び表示させることも可能です。ユーザーの操作に応じてコンテンツの表示・非表示を切り替えたい場合にも活用できる便利な属性です。

  1. HTML5セマンティクスとは？主要なセマンティックタグと実装例を徹底解説

    HTML5セマンティクスとは、Webページに「意味」を持たせるためのセマンティックタグ（意味論的タグ）のことを指します。HTML5では、タグがセマンティック（意味を持つ）とノンセマンティック（意味を持たない）の2種類に分類されており、HTML5の登場によって数多くの新しいセマンティックタグが導入されました。 従来のdiv要素だけのマークアップと比べ、セマンティックタグを使うことで、検索エンジンやスクリーンリーダーがページ構造を正確に理解できるようになり、SEO対策やアクセシビリティの向上にも大きく貢献します。 主なHTML5セマンティックタグ一覧 タグ説明 figure画像や図表などのコン

  2. Java 9でHTML5準拠のJavadocドキュメントを生成する方法

    Java 9より前のバージョンでは、特定のパッケージ、クラス、インターフェース、メソッドに関する情報を調べるには、Googleなどの検索エンジンを使って探す必要がありました。しかしJava 9からは、Javadoc自体に検索機能が組み込まれ、生成されるAPIドキュメントの出力もHTML5標準に準拠するようになりました。 この記事では、実際にサンプルを作成しながら、Java 9でHTML5準拠のJavadocを生成する手順を解説します。 サンプルファイルの作成 まず、「C:/JAVA」フォルダ内に「JavaDocTest.java」というファイルを作成します。コードには、Javadocコメントと