`

图片标签img中alt与title的区别

    博客分类:
  • seo
阅读更多

可能很多新手在做站内优化的时候,不明白图片标签img中alt与title的区别,今天sem学院就单独为大家整理分享一下其中的区别。

大家可以一起动手来做测试:把以下代码保存的文本中,命名为.html结尾的文件,然后分别用不同浏览器打开。

代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head><title>图片标签img中alt与title的区别</title></head>

<body>
<img src=”图像的正确地址” title=”title正确图片” >
<img src=”图像的正确地址” alt=”alt正确图片” >

<img src=”图像的错误地址” title=”title错误图片” >
<img src=”图像的错误地址” alt=”alt错误图片” >

</body>
</html>

 

ie6下图片截图

ie6下各代码的表现

ie8下图片的截图

ie8下各代码的表现

firefox下图片截图

firefox下各代码的表现

 

从以上三组图中我们可以看出alt与title的不同:

1、含义不同

alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明

2、在浏览器中的表现不同

在firefox和ie8中,当鼠标经过图片时title值会显示,而alt的值不会显示;只有在ie6中,当鼠标经过图片时title和alt的值都会显示。

对于网站seo优化来说,title与alt还有最重要的一点:

搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里,进一步对图片说明。

 

作者:孟凡成@sem学院
原文链接:http://www.semxyz.com/seo/780.html
版权所有,转载请以链接形式注明作者及原始出处。

 

分享到:
评论

相关推荐

    图片标签IMG内alt和title属性.docx

    图片标签IMG内alt和title属性详解 图片标签IMG是HTML语言中用来嵌入图片的标签,而alt和title是IMG标签中的两个重要属性。本文将详细解释IMG标签内alt和title属性的语法、作用、SEO优化的重要性,以及如何正确地...

    img标签中alt和title属性的正确使用

    其中,`&lt;img&gt;`标签中的`alt`和`title`属性尤为关键,它们不仅有助于提高图片的可访问性和搜索引擎优化效果,还能增强用户的体验感。本文将详细介绍这两个属性的功能、正确使用方法以及注意事项。 #### 二、`alt`...

    让DEDE文章中的图片自动添加ALT属性,搜索引擎更喜欢

    例如,你可以修改为`&lt;img src="{field:pic}" alt="{field:title}" /&gt;`,这里的`{field:title}`是文章标题,可以作为默认的ALT值。当然,也可以根据需要设置其他变量或函数来提供更具描述性的ALT值。 4. **保存并...

    设置网页元素 提示信息 如title,alt提示

    其次,`alt`属性主要应用于图像元素`&lt;img&gt;`,它提供了图片无法显示或加载时的替代文本。这对SEO(搜索引擎优化)至关重要,因为它允许搜索引擎理解图片的内容,同时也能帮助视觉障碍的用户通过屏幕阅读器理解页面...

    百度ueditor组件上传图片后如何设置img里的alt属性

    当图片上传成功后,UEditor会自动生成一个`&lt;img&gt;`标签,并自动为该标签设置`alt`属性。根据描述,这个`alt`属性的值默认为上传图片时的本地路径,这可能并不符合实际的需求,因为`alt`属性通常用于提供图片的文字...

    关于alt和title的用法区别详解

    如果希望在所有浏览器中保持一致性,建议在`img`标签中使用`title`属性来提供额外说明,而`alt`属性专注于替代图像内容。 4. **在`&lt;a&gt;`标签内的使用**: 当`&lt;a&gt;`标签内嵌套`&lt;img&gt;`标签时,`&lt;img&gt;`的`title`属性会...

    HTMLimg标签的alt属性和title属性使用介绍

    img标签有两个重要的属性,分别是alt属性和title属性,这两个属性都用于提供关于图像的额外信息,但是它们的用途和显示效果有所不同。 alt属性被称为替换文本属性,主要用于提供图像内容的文本替代,当图片无法正常...

    title及alt提示个性化特效.rar

    另一方面,`alt`属性主要用于图像元素`&lt;img&gt;`,它提供了图片的替代文本,当图片无法加载或者用户使用屏幕阅读器时,`alt`文本就显得尤为重要。在本项目中,可能探讨了如何利用JavaScript动态修改`alt`文本,或者创建...

    支持图片的title效果代码

    在HTML中,我们可以为图片元素添加`&lt;img&gt;`标签,并在`title`属性中设置提示文字。例如: ```html &lt;img src="image.jpg" alt="图片描述" title="这是图片的详细信息"&gt; ``` 当鼠标悬停在图片上时,浏览器会自动显示`...

    HTML教程:title属性与alt属性

    首先,alt属性主要用于图像标签&lt;img&gt;,它提供了一个替代文本,当图片无法显示或者用户代理(如屏幕阅读器)不支持图片时,alt属性的值就会被用来代替图像。这不仅有助于视觉障碍的用户理解页面内容,也使得使用文本...

    title及alt提示个性化特效

    例如,在一个图片元素`&lt;img&gt;`中,`title`属性可以提供图片的详细说明,当用户将鼠标悬停在图片上时,这个说明就会出现。在网页中,这不仅有助于增加用户对页面内容的理解,也有助于搜索引擎优化(SEO)。 而`alt`...

    HTML5中对title属性的定义与规定

    - **图像**: `&lt;img&gt;`标签可以通过`title`属性来补充`alt`属性中缺失的信息,特别是在`alt`无法充分描述图片的情况下。 - **按钮**: 对于表单中的按钮(如`&lt;button&gt;`和`&lt;input type="submit"&gt;`),`title`属性可以...

    插入图片.docx

    HTML 图片插入与 title 和 alt 属性详解 在 HTML 中,插入图片是非常常见的操作,但是在插入图片时,需要了解 title 和 alt 属性的作用,以便更好地优化图片的加载和显示。 title 属性 title 属性是 HTML 的一个...

    Thymeleaf显示base64字符串为图片.docx

    &lt;img alt="64位字符串图片" th:src="${str64}" /&gt; ``` 在这个HTML页面中,`&lt;img&gt;`标签的`th:src`属性使用Thymeleaf表达式 `${str64}`,这将在页面渲染时被替换为后台传递的Base64字符串。由于我们在后台已经添加...

    html标签和属性总结

    * `&lt;img&gt;`:图片标签 * `&lt;hr&gt;`:水平线标签 * `&lt;sub&gt;`:下标文本标签 * `&lt;sup&gt;`:上标文本标签 HTML标签和属性是构建Web页面的基础,了解这些标签和属性的使用方法是非常重要的。本文总结了HTML标签的种类、属性和...

    js实现单击图片放大

    &lt;img id="myImg" src="example.jpg" alt="图片示例"&gt; &lt;!-- 模态框(Modal) --&gt; &lt;span id="close"&gt;&times; &lt;img class="modal-content" id="img01"&gt; &lt;div id="caption"&gt;&lt;/div&gt; ...

Global site tag (gtag.js) - Google Analytics