サイトに画像を表示しよう
初心者のためのHTML入門4 / 9
このレッスンでは、imgタグを使ってサイト上に画像を表示する方法を学びます。
imgタグとは？
img（イメージ）タグは、HTMLで画像を表示する時に使います。
基本の書き方
<img src="画像ファイルのURL" alt="画像の説明文">
src属性
まず画像を表示するためには、imgタグの中にsrc（ソース）属性を入力し、=（イコール）の次に画像ファイルのURLを入力します。
<img src="https://example.com/image/200/">
URLは、ダブルクォーテーション("")で挟むことを忘れないようにね！
alt属性
画像にはalt（オルト）属性をつけ、画像の説明を書きましょう。
<img src="https://example.com/spain.jpg" alt="グエル公園" >
画像が読み込めなかった時や、画像を表示することができない環境（例えば、視覚障害を持つ人が使うスクリーンリーダーなど）の場合、代わりに文字としてその説明が表示されます。
画像を必要なタイミングで読み込もう
Webページを表示する時、画像や動画などはページの読み込みに時間がかかってしまいます。
そのため、ページの読み込み速度を向上させるために、「loading="lazy"」（ローディングレイジー）という機能があります。
これは、ユーザーが画面をスクロールする時に、必要なタイミングで画像が表示されることにより、ページの読み込み速度を高速化することができます。
<img src="https://example.com/spain.jpg" loading="lazy" alt="グエル公園" >
imgタグで、終了タグは不要
これまでのレッスンでは、HTMLタグは開始タグと終了タグは合わせて使うことが必要だということを学んできました。
しかし、imgタグのように空要素（からようそ）と呼ばれる一部のタグには、終了タグは必要ありません。
<!-- 🙅♂️これはNG -->
<img src="https://example.com/spain.jpg" alt="グエル公園" loading="lazy"></img>