使用 HTML <abbr> 标签来解释内容答案

【问题标题】：Using HTML <abbr> tag to explain content使用 HTML <abbr> 标签来解释内容
【发布时间】：2012-08-12 02:38:20
【问题描述】：

使用<abbr> 标记来解释实际上不是缩写但产生“悬停”内容解释的单词是不是不好的形式？

如果是，为什么它的格式不好，什么是好的 HTML 替代品？

【问题讨论】：

您的意思是“不好”，好像它会影响您的 SEO？

标签： html seo abbreviation abbr

【解决方案1】：

您实际上不需要使用<abbr> 标签来使用title= 属性。你可以把它应用到很多东西上，包括<span>标签。

使用示例：

<span title="This is my explanation here.">Confusing text</span>

来自 w3schools.com：通过标记缩写，您可以为浏览器、拼写检查器、翻译系统和搜索引擎索引器提供有用的信息。

换句话说，你会在没有理由的情况下通过错误地使用<abbr>标签向搜索引擎提供误导性信息。

【讨论】：

请注意，屏幕阅读器等辅助技术通常不会公布标题属性

【解决方案2】：

Bootstrap 4 将为 HTML <abbr> 元素设置样式，底部带有虚线边框和帮助光标：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<p>You can use <abbr title="Cascading Style Sheets" class="text-info font-italic initialism">CSS</abbr> to style your <abbr title="HyperText Markup Language" class="text-info font-italic initialism">HTML</abbr>.</p>

【讨论】：

【解决方案3】：

如果您希望搜索引擎更好地理解您的内容，您应该使用标签来解释您网页中令人困惑的文字。

仅将它用于设计目的并没有什么坏处，但如果浏览器不支持它，您的用户就会受到影响。对于一般用途，简单的<span title="Explanation">Abbr</span> 效果更好；当然你需要用漂亮的 CSS 规则添加一些样式；）

【讨论】：

【解决方案4】：

HTML 元素定义缩写或首字母缩略词。

标记缩写可以为浏览器、翻译系统和搜索引擎提供有用的信息。

喜欢

<p> <abbr title="Unknown Flying Object"> UFO </abbr>

【讨论】：

这不是问题的答案。