こんにちは、Tomaです。
前回はリストや表組みなど、記事の構成を整えるタグをご紹介しました。HTMLの基本を体系的に学びたい方は、こちらの目次ページもあわせて活用してみてください。
さて、今回はブログを華やかにし、情報を直感的に伝えるために欠かせない「画像表示タグ」について解説します。
「画像を表示させるだけ」と思われがちですが、実は正しく設定しないとブログの読み込み速度や検索順位（SEO）に影響することもある、奥の深いタグなんです。
第5章：ブログに命を吹き込む！画像表示（imgタグ）の基本
HTMLで画像を表示するには、<img>タグを使用します。ここで注意したいのは、HTMLには「image」というタグはなく、省略形の「img」を使うという点です。
1. imgタグの基本構造
imgタグは、これまでに紹介したタグと違い「終了タグ（</img>）」が必要ありません。その代わりに、画像がどこにあるかを示す「src」属性と、画像の説明をする「alt」属性をセットで記述します。
<img src="画像のURL" alt="画像の説明文">2. 忘れてはいけない「alt属性」の役割
alt（オルト）属性は、通信エラーなどで画像が表示されなかった時に代わりに表示されるテキストです。また、検索エンジンに「この画像は何を表しているか」を伝える重要な役割も持っています。
【良い例】alt="モンスターハンターの装備画面"
【良くない例】alt="画像1"（内容が伝わらない）
3. サイズの指定（widthとheight）
画像の幅（width）と高さ（height）を指定することで、ページを読み込む際の「ガタつき（レイアウトシフト）」を防ぐことができます。
<img src="photo.jpg" alt="景色の写真" width="600" height="400">【実際の表示イメージ】
第6章：画像にリンクを貼る方法
「画像をクリックすると公式サイトや攻略Wikiに飛ぶ」ようにしたい場合は、以前学んだ<a>タグの中に<img>タグを入れます。
<a href="https://example.com">
<img src="banner.png" alt="キャンペーンバナー">
</a>このように、タグを組み合わせて使う（入れ子にする）ことで、ブログの機能性はどんどん高まっていきます。
まとめ
今回は画像表示の基本、<img>タグについて解説しました。 srcで場所を教え、altで意味を伝える。このセットを意識するだけで、読者にも検索エンジンにも優しい「質の高い記事」になります。
HTMLの基礎をもっと知りたい方は、ぜひこちらのまとめページもチェックしてみてくださいね。
スクリーンショットを多用するゲームブログだからこそ、1枚1枚の画像に意味を持たせていきたいですね！
