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

HTMLのfigcaption要素とは？画像にキャプションを付ける正しい使い方

<figcaption>要素は、<figure>要素に対してキャプション（説明文）を追加するためのHTML要素です。特に画像に説明文や出典を付ける際によく使われます。

基本的な使い方

<figcaption>は必ず<figure>要素の中に配置します。配置できる位置は、<figure>内の最初の子要素または最後の子要素のどちらか一方のみです。

<figure>
  <img src="path-to-image.jpg" alt="画像の説明" />
  <figcaption>写真のキャプション</figcaption>
</figure>

figcaptionを使うメリット

<figure>と<figcaption>を組み合わせることで、以下のようなメリットがあります。

  • 意味的な明確さ： 画像とその説明がセットであることが、ブラウザや検索エンジン、支援技術に伝わります。
  • アクセシビリティの向上： スクリーンリーダー利用者にも、画像の内容や文脈が伝わりやすくなります。
  • スタイリングのしやすさ： CSSでキャプションのデザインを柔軟に調整できます。

alt属性との違い

<img>のalt属性は画像が表示されない場合のための代替テキストであり、画面上には通常表示されません。一方、<figcaption>はユーザーの目に見える形で補足情報を提供するため、両者は役割が異なります。両方を適切に併用することが推奨されます。

  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値