` 元素，这些元素将包含图片。
### 图片
一个不需要结束标签的 HTML 标签是 `![]()
` 标签，因为它有一个 `src` 元素，包含页面渲染该项目所需的所有信息。
在你的应用中创建一个名为 `images` 的文件夹，并将 [源代码文件夹](../../../../3-terrarium/solution/images) 中的所有图片添加到其中；（有 14 张植物图片）。
### 任务
在 `` 标签之间的两列中添加这些植物图片：
```html
```
> 注意：Span 和 Div 的区别。Div 被认为是“块”元素，而 Span 是“内联”元素。如果你将这些 div 转换为 span，会发生什么？
通过这些标记，植物现在会显示在屏幕上。看起来可能很糟，因为它们还没有使用 CSS 进行样式化，我们将在下一课中完成样式化。
每张图片都有 alt 文本，即使你无法看到或渲染图片，alt 文本也会显示。这是一个重要的属性，有助于提高可访问性。在后续课程中，你将了解更多关于可访问性的信息；目前，请记住，alt 属性为图片提供了替代信息，以防用户因某些原因无法查看图片（例如网络连接慢、src 属性错误或用户使用屏幕阅读器）。
✅ 你是否注意到每张图片都有相同的 alt 标签？这是一个好习惯吗？为什么？你能改进这段代码吗？
---
## 语义化标记
通常，在编写 HTML 时，使用有意义的“语义化”标记是更好的选择。这是什么意思？这意味着你使用 HTML 标签来表示它们设计用于的数据或交互类型。例如，页面上的主要标题文本应该使用 `` 标签。
在打开的 `` 标签下方添加以下代码：
```html
` 标签上方添加以下标记：
```html
` 标签。
在打开的 `` 标签下方添加以下代码：
```html
My Terrarium
```
使用语义化标记，例如将标题设置为 ``，将无序列表渲染为 ``，可以帮助屏幕阅读器更好地导航页面。通常，按钮应该写为 `
- `，可以帮助屏幕阅读器更好地导航页面。通常，按钮应该写为 `