HTML alt 属性 - 绿叶网

HTML alt 语法

在 HTML 中，alt 是 img 或 area 元素的必需属性，它用于定义图片的替代文本。当图片无法正常显示时，浏览器会显示该替代文本。这个属性对网页的可访问性和搜索引擎优化（SEO）非常重要。

语法：

<!--用于img-->
<img src="图片路径" alt="替代文本">

<!--用于area-->
<area shape="形状" coords="坐标" href="链接地址" alt="替代文本">

<!--用于图片按钮-->
<input type="image" src="submit.png" alt="替代文本">

说明：

对于 alt 属性来说，它的值应准确描述图片或区域的内容。适当使用 alt 属性不仅可以帮助搜索引擎更好地理解网页内容，还能提升网页的可访问性。

此外，alt 属性对于以下 2 个方面非常重要。

搜索引擎优化（SEO）：搜索引擎无法直接 “看” 图片，但它们可以读取 alt 属性的文本。通过给图片添加简洁、相关的描述，可以帮助搜索引擎更好地理解图片内容，从而提高网页在搜索结果中的排名。
无障碍性 : 对于视力障碍的用户，他们常常依赖屏幕阅读器等辅助技术来浏览网页。屏幕阅读器会读取网页中的 alt 文本，帮助他们了解图片的内容。如果没有提供合适的替代文本，此时用户就无法理解图片的含义。

HTML alt 摘要

适用元素	img、area 或 input
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML alt 示例

接下来，我们通过几个简单的例子来讲解一下 HTML alt 属性是如何使用的。

示例 1：img 元素中使用 alt 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <img src="imgs/bird.jpg" alt="little bird">
</body>
</html>

页面效果如下图所示。

HTML img元素使用alt属性

分析：

从页面效果看不出 alt 属性加上和没加上的区别，但当我们把 “imgs/bird.jpg” 去掉之后，此时图片无法正常显示出来，但却可以看到浏览器会显示 alt 的提示文字，如下图所示。如果没有加上 alt 属性值，图片无法显示时，则不会有提示文字。

img元素alt属性的提示文字

示例 2：area 元素中使用 alt 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        <img usemap="#frontend" src="./imgs/html-css-js.jpg" alt="">
        <map name="frontend">
            <area shape="rect" coords="35,205,195,365" alt="html" href="https://www.lvyenet.com/html">
            <area shape="rect" coords="205,205,365,365" alt="css" href="https://www.lvyenet.com/css">
            <area shape="rect" coords="120,35,280,195" alt="javascript" href="https://www.lvyenet.com/javascript">
        </map>
    </div>
</body>
</html>

页面效果如下图所示。

HTML area元素使用alt属性

分析：

在上面例子中，如果我们把 src 的路径设置为一个错误的路径，此时就会显示 alt 属性的内容，如下图所示。

area元素alt属性的提示文字

alt 属性的最佳实践

在使用 alt 属性时，小伙伴们应该遵循以下最佳实践。

1. 为每个图片提供描述性的 alt 属性

每张图片都应该有一个描述性的 alt 文本，且该文本应该与图片内容相关。例如，如果图片是一个 “狗” 的照片，alt 属性应该描述狗的特征，而不是单纯使用 “图片” 这样的词汇。

<!--推荐-->
<img src="dog.jpg" alt="一只棕色的小狗在草地上奔跑">

<!--不推荐-->
<img src="dog.jpg" alt="图片">

2. 对于装饰性的图片，alt 属性可以为空

如果图片仅仅作为装饰，而不传达任何实际信息（比如背景图案），我们可以将 alt 属性设置为空，此时屏幕阅读器就会忽略它。这样做有助于避免不必要的干扰，特别是对依赖屏幕阅读器的用户。

<img src="decoration.png" alt="">

3. 避免在 alt 属性中堆砌关键字

不要为了提高搜索引擎排名而故意在 alt 属性中塞满很多关键字。alt 的目的应该是清晰、准确地描述图片内容，而不是用来塞关键词。这不仅不利于用户体验，也可能影响搜索引擎的排名。

<!--错误-->
<img src="dog.jpg" alt="狗，宠物狗，狗图片，狗照片，狗在草地上">

<!--正确-->
<img src="dog.jpg" alt="一只在草地上奔跑的棕色小狗">

4. 对于包含多个图片的元素，使用 figure 和 figcaption 元素提供更丰富的描述

如果你有一组相关的图片，可以使用 figure 元素来包裹这些图片，并使用 figcaption 元素提供图片的描述。这样做可以让你的页面内容更加有组织，并且更有助于用户理解。

<figure>
    <img src="dog1.jpg" alt="狗在草地上">
    <figcaption>这只狗正在享受阳光。</figcaption>
</figure>