概要

<img> タグは、HTMLで画像を表示するために使用されるタグです。
自己終了タグであり、テキストの代わりに視覚的なコンテンツを提供する重要な要素です。

基本的な使い方

See the Pen aタグについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<img src="https://individual-wordpress-learning.com/2024/wp-content/themes/individual-wordpress-learning/img/logo.png" alt="サンプル画像">

src 属性で画像ファイルのURLを指定し、alt 属性には代替テキストを記述します。
alt 属性はアクセシビリティやSEOの観点でも重要です。

出力される内容の例

役割とメリット（定義リスト形式）

視覚的表現

テキストだけでは伝わらない情報を補完し、ユーザーの理解を助けます。

アクセシビリティ

alt 属性により、スクリーンリーダーが画像内容を伝えることができます。

SEO強化

適切なファイル名やalt テキストにより、画像検索結果からの流入が見込めます。

ページデザイン

アイキャッチや装飾画像として、デザイン性の向上に寄与します。

注意点

• alt 属性は必ず記述する。SEOやアクセシビリティの面で不可欠です。
• サイズの指定（width、height）はCSSでの管理がおすすめです。
• 表示されない場合の対処として、alt テキストで補う設計が重要です。
• 外部URL使用時はリンク切れのリスクがあるため、自サーバーへの保存が安心です。

まとめ

<img> タグは、Webページに画像を挿入するための基本タグです。
情報の補足、アクセシビリティ対応、ビジュアルデザインの強化など、多くの面で重要な役割を果たします。
常にaltを適切に記述し、意味のある画像利用を心がけましょう。