HTMLのimgタグの書き方｜src・altの必須属性を初心者向けにやさしく整理
生徒
「Webページに写真を表示したいんですが、どうやって画像を置くんですか？」
先生
「HTMLでは、imgタグを使って画像を表示します。とても基本で、最初に覚える大切なタグのひとつです。」
生徒
「imgタグには、必ず書かないといけないものがあるんですか？」
先生
「はい、srcとaltという二つの属性は必須です。それぞれの意味を順番に説明しますね。」
1. HTMLのimgタグとは？
imgタグは、HTMLで画像を表示するための専用のタグです。文章だけのページに写真やイラストを追加することで、内容が分かりやすくなり、見た目も一気に良くなります。
imgタグは文章の途中や見出しの下など、好きな場所に置くことができます。ノートに写真を貼り付けるような感覚で使えるのが特徴です。
2. imgタグの基本的な書き方
imgタグは、開始タグと終了タグを分けて書かず、一行で完結します。画像の場所や説明文を属性として指定します。
属性とは、タグに追加情報を与えるためのものです。人の名札のように、その要素が何者かを伝える役割があります。
<img src="/img/sample150-100.jpg" alt="サンプルの横長画像">
3. src属性とは？画像の場所を指定する
src属性は、表示したい画像ファイルがどこにあるかを指定するためのものです。これは住所のような役割を持っています。
たとえばimgフォルダの中に画像がある場合、その道順を正しく書かないと画像は表示されません。一文字でも間違えると表示されないため、正確さがとても大切です。
<img src="/img/sample120-120.jpg" alt="正方形のサンプル画像">
4. alt属性とは？画像の説明文の役割
alt属性は、画像が表示できないときに代わりに表示される説明文です。また、画面を音声で読み上げる機能でも使われます。
検索エンジンは画像の中身を直接見ることができないため、alt属性の文章を参考にします。そのため、altを書くことはSEO対策としても非常に重要です。
難しく考えず、その画像を言葉で説明するつもりで書くと自然な文章になります。
5. srcとaltはなぜ必須なのか
srcがなければ、どの画像を表示すればよいか分かりません。altがなければ、画像が見られない人や検索エンジンに情報が伝わりません。
この二つは、画像を使ううえで最低限必要な情報です。HTMLのルールとしても、imgタグにはaltを書くことが強く推奨されています。
6. 画像サイズを指定する方法
画像が大きすぎる場合は、widthやheightを使ってサイズを調整できます。これは写真を枠に合わせて縮めるようなイメージです。
数値はピクセルという単位で指定します。ピクセルとは、画面を構成する小さな点のことです。
<img src="/img/sample150-100.png" alt="サイズ指定された画像" width="150" height="100">
7. 初心者が間違えやすいポイント
画像が表示されない原因で多いのは、ファイル名の間違いや拡張子の違いです。大文字と小文字は別として扱われるため注意が必要です。
また、alt属性を空のままにしたり、省略してしまう人もいますが、基本的には内容をきちんと書くようにしましょう。
8. imgタグを正しく使うことの大切さ
imgタグを正しく使うことで、ページの見た目だけでなく、使いやすさや検索エンジンからの評価も向上します。
srcとaltを丁寧に書くことは、読む人への思いやりでもあります。初心者のうちから正しい書き方を身につけることが、後々の大きな力になります。
まとめ
imgタグの基本と重要ポイントの総復習
HTMLのimgタグは、Webページに画像を表示するための基本的かつ重要なタグです。初心者が最初に覚えるべきHTMLタグのひとつであり、WebデザインやWeb開発の基礎となる知識です。imgタグを正しく使うことで、文章だけでは伝わりにくい情報を視覚的に補い、ユーザーにとって理解しやすく魅力的なページを作成することができます。
特に重要なのがsrc属性とalt属性です。src属性は画像ファイルの場所を指定するものであり、Webページがどの画像を表示するかを決定する役割を持っています。一方でalt属性は、画像の内容を文章で説明する役割があり、画像が表示されない場合や、音声読み上げ機能を使用するユーザーにとって非常に重要です。また、検索エンジンは画像そのものを理解できないため、alt属性の内容をもとに画像の意味を判断します。そのため、alt属性を適切に記述することは検索結果に影響を与える重要な要素となります。
SEOに強いimgタグの使い方
imgタグは単に画像を表示するだけでなく、検索エンジン最適化の観点でも重要な役割を持っています。特にalt属性に適切なキーワードを自然な文章で含めることで、画像検索やWeb検索において評価されやすくなります。例えば、「サンプル画像」ではなく、「HTMLのimgタグで表示したサンプル画像」のように具体的に書くことで、より効果的なSEO対策になります。
また、画像のファイル名もSEOに影響します。image1.jpgのような曖昧な名前ではなく、html-img-sample.jpgのように内容を表す名前にすることで、検索エンジンに正しく評価されやすくなります。さらに、画像サイズの最適化や表示速度の向上もSEOにおいて重要なポイントです。
初心者が意識すべきポイント
初心者がimgタグを扱う際に注意すべき点として、パスの記述ミスや拡張子の違いがあります。特にjpgとpngの違いや、大文字小文字の違いは見落としがちですが、正しく記述しないと画像は表示されません。また、alt属性を省略してしまうケースもありますが、アクセシビリティやSEOの観点から必ず記述することが推奨されています。
さらに、widthやheight属性を使って画像サイズを指定することで、ページのレイアウトが安定し、ユーザー体験の向上につながります。スマートフォンやタブレットなど、さまざまなデバイスで表示されることを考え、適切なサイズ指定を行うことが重要です。
サンプルプログラムで理解を深める
<img src="/img/sample150-100.jpg" alt="HTMLのimgタグで表示する横長のサンプル画像" width="150" height="100">
<img src="/img/sample120-120.jpg" alt="HTML初心者向けの正方形サンプル画像" width="120" height="120">
CSSと組み合わせた応用例
<style>
img {
border: 3px solid #333;
border-radius: 10px;
}
</style>
<img src="/img/sample150-100.jpg" alt="装飾付きの画像サンプル">
このようにCSSと組み合わせることで、画像に装飾を加えたり、デザイン性を高めたりすることができます。Webサイト全体の統一感を出すためにも、imgタグとCSSの組み合わせは非常に重要です。
生徒
「imgタグってただ画像を表示するだけかと思っていましたが、こんなに重要なんですね。」
先生
「そうですね。見た目だけでなく、検索エンジンやアクセシビリティにも関係する重要な要素です。」
生徒
「alt属性は特に意識して書いたほうがいいんですね。」
先生
「その通りです。画像の内容をしっかり説明することで、検索にも強くなりますし、すべてのユーザーに優しいページになります。」
生徒
「これからはファイル名やサイズにも気をつけて書いてみます。」
先生
「とても良い意識ですね。基本を丁寧に積み重ねることが、質の高いWebページを作る近道になります。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
HTMLのimgタグとは何ですか初心者でもわかるように教えてください
HTMLのimgタグはWebページに画像表示をするための基本タグであり写真やイラストを表示して視覚的に分かりやすくする重要なHTML要素です
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
