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

瀏覽器相容性

另見