• img要素は領域指定を必要としない空要素です。
  • 終了タグはありません。
  • imgはimage（「画像」の意）の省略形です。
• src属性とalt属性は必須の属性です。

• src属性は表示する画像を指定するための属性です。
  • srcはsource（「参照元」の意）の省略形です。
• 表示する画像を指定するには、ファイルパスという決まった記述方法があります。
  • 次節でファイルパスの記述方法を解説します。
  • ファイルパスに関する知識は、次章のリンクの設定や、後に学ぶCSSにおいても使います。
• ファイルパスの記述方法を理解して覚えることは、Webページ制作の学習において非常に重要で、ここを避けて通ることはできません。

• alt属性は、画像が表示されない環境（通信エラーなど）で閲覧した際、代わりに表示されるテキストを指定するための属性です。
  • 画像の意味を的確に伝える短い文章を設定することが大切です。
  • altはalternative text（「代替テキスト」の意）の略です。

• imgタグのsrc属性で表示する画像を指定する際、その画像ファイルがどこに置かれているかということを指示する必要があります。
  • そのような目的のファイルまでの経路のことをファイルパス（file path）といいます。
    • ファイルパスは省略してパスと呼ばれることもあります。
  • 画像の表示のみならず、今後学習していくリンク（ハイパーリンク）の記述や、CSSの記述においても必要とされる大変重要な表記方法ですので、しっかりと学習していきましょう。

• index.html
• dog.html
• catフォルダ内のcat.html
• rabbitフォルダ内のrabbit.html

1. index.htmlにanimals-photo.jpgを表示する。
2. dog.htmlにdog-photo.jpgを表示する。
3. cat.htmlにcat-photo.jpgを表示する。
4. rabbit.htmlにrabbit-photo.jpgを表示する。

それでは、index.htmlの「ここに「animals-photo.jpg」を表示する。」のテキストを消去して、その代わりにimgタグを入力してみましょう。

• imgタグはファイルパスを指定するためのsrc属性と代替テキストを指定するためのalt属性が必須です。
• VS Codeで入力する場合は、要素名のimgを入力してからenter（return）キーで確定すれば、下記コードがすぐに書き込まれます。

• サイト内部の画像ファイルを指定するためには、通常相対パス（relative path）を使います。
• 相対パスは、HTMLファイルと目的の画像ファイルとの位置関係により指定方法が変わります。
• 相対パスの指定方法は、大きく分類すると、上の4種類のパターンがあります。
• この4種類のパターンの組み合わせにより、どのようなファイル構成のWebサイトにも対応することができます。
• どの方法で記述する場合も、自分が今HTMLタグを書き込もうとしている現在のファイルと、目的のファイルが、PC内のどこに保存されているのかを、しっかりと確認しておく必要があります。

• 右のファイル構成図を見るとわかるように、index.htmlとanimals-photo.jpgはフォルダで隔てられておらず、startフォルダ内に隣り合って置かれています。
• このような2つのファイルの位置関係を「同じ階層」にあるといいます。
• 相対パスでは、現在のファイルと同じ階層を「./（ドット、スラッシュ）」で表します。
• ただし、「./」は省略可能ですので、同じ階層にあるファイルの相対パスを指定するときは、ファイル名のみを記述する方が一般的です。

• 現在のファイルであるdog.htmlからdog-photo.jpgまでは、imagesフォルダを経由しなければなりません。
• このように、1つのフォルダ内部を通過するパス（経路）のことを、1つ下の階層へのパスといいます。
• 現在のファイルよりも下の階層にあるファイルを指定するためには、目的のファイルに辿り着くまでに通過するフォルダ名を「/（スラッシュ）」で区切っていきます。

• 現在のファイルであるcat.htmlからcat-photo.jpgまでは、catフォルダの外部へ出ていくことにより辿り着きます。
• このように、1つのフォルダの外部へ出ていくパス（経路）のことを、1つ上の階層へのパスといいます。
• 現在のファイルよりも上の階層にあるファイルを指定するためには、目的のファイルに辿り着くまでに通過するフォルダの数だけ「../（ドット、ドット、スラッシュ）」を記述します。
• 「../」は1つ上の階層へ出るための記号です。

• 現在のファイルであるrabbit.htmlからは、一旦rabbitフォルダの外部へ出てから、imagesフォルダの内部へ入るという経路でrabbit-photo.jpgまで辿り着くことができます。
• このように、上の階層に出てから下の階層に入る場合は、2.と3.の相対パスの記述方法を組み合わせて指定します。
• 現在のファイルから目的のファイルに至るまでに通過するフォルダがあれば、上の階層に出るときは「../」、下の階層へ入るときは「フォルダ名/」と順番に繋げて記述します。