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

HTML5のfigure要素にfigcaptionタグでキャプションを追加する方法

HTML5では、<figure>要素にキャプション（図の説明文）を付けるために、<figcaption>タグを使用します。<figcaption>は<figure>要素内に配置することで、画像や図表に対する説明を意味的に関連付けることができます。

基本的な使い方

<figure>要素の中に<img>などのコンテンツを配置し、その直後に<figcaption>でキャプションを記述します。以下のコード例を実行して、実際の表示を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML figcaptionタグの例</title>
   </head>
   <body>
      <figure><img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg"/>
         <figcaption>Tutorials Point チュートリアルライブラリ</figcaption>
      </figure>
   </body>
</html>

ポイント

・<figcaption>は必ず<figure>要素の子要素として配置します。
・<figure>要素内の最初または最後に1つだけ配置できます。
・キャプションは画像だけでなく、コードブロックや引用、図表などにも利用できます。

このように<figure>と<figcaption>を組み合わせることで、セマンティックなマークアップが実現でき、検索エンジンやスクリーンリーダーにも内容が伝わりやすくなります。

  1. HTML5のCanvasで使える無料ライブラリとは？おすすめ3選をわかりやすく解説

    Webサイトにインタラクティブな要素を追加したいなら、Canvas用の無料ライブラリを活用することで開発作業を大幅に効率化できます。まずは、HTML5でキャンバスを作成する基本方法から見ていきましょう。HTML5のcanvasタグの基本HTMLの<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するために使用される要素です。このタグはHTML5で新たに導入されました。以下のコードを実行すると、HTML5でキャンバスを作成できます。サンプルコード<!DOCTYPE html> <html>   &n

  2. HTML DOM Figcaptionオブジェクトの使い方を徹底解説

    FigcaptionオブジェクトとはHTML DOM の Figcaption オブジェクトは、HTML5 の <figcaption> 要素を JavaScript から操作するためのインターフェースです。<figure> 要素内に配置されるキャプション（図表の説明文）を表現するために使われます。新しい figcaption 要素を作成するには document オブジェクトの createElement() メソッドを使用し、既にページ上に存在する要素にアクセスするには getElementById() メソッドを使用します。構文Figcaption オブジェクトを