標題

title 全域性屬性 包含表示與其所屬元素相關的建議資訊的文字。

試一試

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與之無關,不應在該元素的工具提示中使用。

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

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱