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を丁寧に書くことは、読む人への思いやりでもあります。初心者のうちから正しい書き方を身につけることが、後々の大きな力になります。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
