Summary  
This chapter explains how to embed images in HTML using the <img> tag. It covers configuring the src, alt, width, height, and title attributes and using both external URLs and local file paths.  

General domain of usage  
Web development

画像はウェブページの視覚的な魅力を高め、情報の伝達を助ける要素。HTMLでは、`<img>` タグを使用して画像を追加。

## 画像の挿入
`<img>` タグは自己終了型で、少なくとも2つの属性が必要：
- `src`: 画像ファイルの場所；
- `alt`: アクセシビリティや画像が表示されない場合の代替テキスト。
```html
<img src="image.jpg" alt="Description of the image">
```




## 画像の属性
- `src`: 画像のパスまたはURL（必須）；
- `alt`: 代替テキストおよびアクセシビリティ説明；
- `width`: 画像の幅を設定；
- `height`: 画像の高さを設定；
- `title`: ホバー時にツールチップを表示。


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkltYWdlczwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8zOTJmMjRhYy0wMTI2LTRjMzQtYTI4YS1mMmYyNmQxMjE5NmIvc2VjdGlvbi0zL3N0YXJ0dXAucG5nIgogICAgICBhbHQ9IlRoZSByb2NrZXQgaXMgZ2FpbmluZyBhbHRpdHVkZSIKICAgICAgd2lkdGg9IjEyOCIKICAgICAgaGVpZ2h0PSIxMjgiCiAgICAgIHRpdGxlPSJSb2NrZXQgcHJlc2VydmluZyBzdGFydHVwIGxhdW5jaCIKICAgIC8+CiAgPC9ib2R5Pgo8L2h0bWw+

- `<img>` タグはウェブページに画像を挿入するためのタグ。
- `src` 属性は画像ファイルのソースURLを指定。
- `alt` 属性は画像の代替テキストを設定。
- `width` 属性は画像の幅を設定。
- `height` 属性は画像の高さを設定。
- `title` 属性は画像に関する追加情報を提供。

HTMLドキュメントに画像を挿入するために使用されるタグはどれですか？

画像を表示するために `<img>` タグで必須となる属性はどれですか？

`alt` 属性は画像に対して何を提供しますか？

`src` 属性で指定した画像が読み込めない場合、どうなりますか？

HTMLの基本を習得し、構造化され、アクセシブルなウェブコンテンツを作成します。タグ、要素、属性を使用してドキュメントを構造化する方法を学びます。テキスト、リスト、画像、音声、動画を自在に扱い、ウェブページを充実させます。整理されたデータのためのテーブルや、ユーザー入力・インタラクションのためのフォームを作成します。アクセシビリティを高めるセマンティックHTMLを理解し、基礎から完全で機能的なウェブサイト構造を構築します。

ウェブとHTMLの概要、タグ、要素、属性の重要性について紹介します。HTMLドキュメントの基本構造やウェブの簡単な歴史について学びます。

HTMLマークアップの基本を習得し、特別なテキストのフォーマットやリストに焦点を当て、HTMLドキュメント内でのコンテンツ構造化における重要性を理解します。HTMLドキュメント構造の詳細に踏み込み、テキストマークアップ技術を洗練させます。

ウェブ開発における視覚および聴覚コンテンツの力を引き出し、画像、動画、音声要素をHTMLドキュメントにシームレスに統合する方法を学びます。さまざまなメディア形式を取り入れる際の細かな違いについて探求します。

HTMLにおけるテーブルとフォームの包括的な解説を通じて、データの提示方法やユーザーインタラクションの複雑さを理解します。テーブル構造、フォーム作成、入力要素を網羅しています。フォーム入力要素の実装や、機能性を高める属性の活用に習熟します。

セマンティックHTML要素を深く学ぶことで、HTMLスキルを次のレベルへ引き上げ、構造化されアクセシブルなウェブコンテンツの作成が可能になります。新たに得た知識を活用し、初めてのウェブサイト構築に挑戦し、アイデアを形にしましょう。

HTMLでの画像の扱い

画像の挿入

画像の属性

1. HTMLドキュメントに画像を挿入するために使用されるタグはどれですか？

2. 画像を表示するために `<img>` タグで必須となる属性はどれですか？

3. `alt` 属性は画像に対して何を提供しますか？

4. `src` 属性で指定した画像が読み込めない場合、どうなりますか？