画像の表示 - 個人サイトのためのHTML LS講座
画像の表示についての説明です。
<img src="画像のURL" alt="画像の説明">
で画像を表示できます。終了タグはありません。
altタグは画像の内容をGoogle(検索エンジン)に伝えるためのもので、このタグの記載によって初めて検索エンジンが画像の内容を理解・評価して画像の検索結果にも反映してくれるので、サーチエンジン最適化に大きく影響します。また、ブラウザが何らかの理由でその画像を読み込めない場合にaltタグ内のテキストを代わりに表示してくれる役割もあります。画像にリンク先が設定されている場合はそのリンク先の内容を示す文書、それ以外の場合は「alt="サンプル画像"」のように画像の内容を示す文書を簡潔に記載しましょう。
ただし、これは写真や画像などのサイト内のコンテンツとなる画像に記載するもので、背景やアイコンのような画像には「alt=""」のように何も記入せずに書いておけばOKです。(重要性の低い画像であることをサーチエンジンに伝える必要があるため、altタグ自体は必須です)
そして以下のようにfigureタグで囲むことでテキストの行頭との間に余白が生まれ、「これは画像である」ということを示せます。
<figure>
<img src="image/b7.jpeg" alt="サンプル画像">
</figure>
《表示結果》
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
画像にキャプションをつける場合は、figcaptionタグを使います。
<figure>
<img src="image/b7.jpeg" alt="サンプル画像">
<figcaption>ここにキャプションが表示されます</figcaption>
</figure>
《表示結果》
テキストテキストテキストテキストテキストテキストテキスト
ここにキャプションが表示されます
テキストテキストテキストテキストテキストテキストテキスト
>>HTML LS講座メニューへ戻る