`要素を作成し、それらに画像を含めます。
### 画像
閉じタグを必要としないHTMLタグの1つは`![]()
`タグです。このタグには`src`要素があり、ページがアイテムをレンダリングするために必要な情報がすべて含まれています。
アプリ内に`images`というフォルダを作成し、その中に[ソースコードフォルダ](../../../../3-terrarium/solution/images)にあるすべての画像を追加してください。（植物の画像が14枚あります）
### タスク
以下の植物画像を``タグの間に2つの列として追加してください:
```html
```
> 注意: SpansとDivs。Divsは「ブロック」要素と見なされ、Spansは「インライン」です。これらのdivをspanに変換した場合、何が起こるでしょうか？
このマークアップにより、植物が画面に表示されます。ただし、まだCSSでスタイルが設定されていないため、見た目はかなり悪いです。次のレッスンでCSSを使用してスタイルを設定します。
各画像には、画像が表示されない場合でも表示されるaltテキストがあります。これはアクセシビリティのために重要な属性です。アクセシビリティについては今後のレッスンでさらに学びますが、alt属性は画像を表示できない場合（接続が遅い、src属性にエラーがある、またはスクリーンリーダーを使用している場合など）に代替情報を提供します。
✅ 各画像に同じaltタグがあることに気づきましたか？これは良いプラクティスでしょうか？なぜそうではないのでしょうか？このコードを改善できますか？
---
## セマンティックマークアップ
一般的に、HTMLを書く際には意味のある「セマンティクス」を使用することが推奨されます。それはどういう意味でしょうか？それは、データやインタラクションの種類を表すために設計されたHTMLタグを使用することを意味します。例えば、ページのメインタイトルテキストには``タグを使用するべきです。
以下の行を開いている``タグのすぐ下に追加してください:
```html
`タグの上に以下のマークアップを追加してください:
```html
`タグを使用するべきです。
以下の行を開いている``タグのすぐ下に追加してください:
```html
My Terrarium
```
ヘッダーを``として、順序なしリストを``としてレンダリングするなど、セマンティックマークアップを使用することで、スクリーンリーダーがページをナビゲートしやすくなります。一般的に、ボタンは`
- `としてレンダリングするなど、セマンティックマークアップを使用することで、スクリーンリーダーがページをナビゲートしやすくなります。一般的に、ボタンは`