HTML title 全局属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

title 全局属性包含代表其所属元素的相关建议性信息的文本。

试一试

<p>
  Use the <code>title</code> attribute on an <code>iframe</code> to clearly
  identify the content of the <code>iframe</code> to screen readers.
</p>

<iframe
  title="Wikipedia page for the HTML language"
  src="https://en.m.wikipedia.org/wiki/HTML"></iframe>
<iframe
  title="Wikipedia page for the CSS language"
  src="https://en.m.wikipedia.org/wiki/CSS"></iframe>
iframe {
  height: 200px;
  margin-bottom: 24px;
  width: 100%;
}

title 属性的主要用途是为 <iframe> 元素提供辅助技术的标签。

title 属性还可以用于标记 数据表中的控件。

当 `title` 属性添加到 <link rel="stylesheet"> 时,它会创建一个备用样式表。在使用 <link rel="alternate"> 定义备用样式表时,此属性是必需的,并且必须设置为非空字符串。

如果包含在 <abbr> 的开始标签中,title 必须是缩写或首字母缩略词的完整展开。当可能时,应在首次使用时以纯文本提供缩写或首字母缩略词的展开,而不是使用 title,而是使用 <abbr> 来标记缩写。这使得所有用户都能知道缩写或首字母缩略词缩短的是什么名称或术语,同时为用户代理如何播报内容提供提示。

虽然 title 可用于为 <input> 元素提供可编程关联的标签,但这并非最佳实践。请改用 <label>

多行标题

title 属性可能包含多行。每个 U+000A LINE FEED (LF) 字符代表一个换行符。必须采取一些谨慎措施,因为这意味着以下内容会显示在两行上

HTML

html
<p>
  Newlines in <code>title</code> should be taken into account. This
  <span
    title="This is a
multiline title">
    example span
  </span>
  has a title a attribute with a newline.
</p>
<hr />
<pre id="output"></pre>

JavaScript

我们可以查询 title 属性并将其显示在空的 <pre> 元素中,如下所示

js
const span = document.querySelector("span");
const output = document.querySelector("#output");
output.textContent = span.title;

结果

Title 属性继承

如果一个元素没有 title 属性,那么它会从其父节点继承该属性,而父节点又可能从其父节点继承,依此类推。

如果此属性设置为空字符串,则表示其祖先的 title 无关紧要,不应用于此元素的工具提示。

HTML

html
<div title="CoolTip">
  <p>Hovering here will show "CoolTip".</p>
  <p title="">Hovering here will show nothing.</p>
</div>

结果

可访问性考虑

使用 title 属性对于以下人群来说存在很大问题:

  • 仅使用触摸设备的用户
  • 使用键盘导航的用户
  • 使用屏幕阅读器或放大镜等辅助技术的用户
  • 精细运动控制受损的用户
  • 有认知障碍的用户

这是由于浏览器支持不一致,再加上辅助技术对浏览器渲染页面的额外解析。如果需要工具提示效果,最好使用更易于访问的技术,这些技术可以通过上述浏览方法访问。

规范

规范
HTML
# the-title-attribute

浏览器兼容性

另见

  • 所有 全局属性
  • 反映此属性的HTMLElement.title