title

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

全域屬性 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 屬性，則其值必須是縮寫或首字母縮略詞的完整擴展。建議盡可能在第一次使用縮寫或首字母縮略詞時，使用 <abbr> 標記縮寫，並在純文本中提供其完整擴展，而不是使用 title 屬性。這讓所有用戶都知道縮寫或首字母縮略詞代表的名稱或術語，同時也為用戶代理提供了如何朗讀內容的提示。

雖然 title 屬性可以用於為 <input> 元素提供以程式設計方式關聯的標籤，但這並不是良好的做法。建議改用 <label>。

多行標題

title 屬性可以包含多行。每個 U+000A LINE FEED（LF）字符表示一個換行符。使用時必須小心，因為這意味著以下內容會呈現為兩行：

HTML

html

<p>
  需要考量 <code>title</code> 中的換行問題。<span
    title="這是
多行的標題"
    >範例 span</span
  >
  有一個帶有換行符的 title 屬性。
</p>
<hr />
<pre id="output"></pre>

JavaScript

我們可以查詢 title 屬性並將其顯示在空的 <pre> 元素中，如下所示：

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

<div title="CoolTip">
  <p>當滑鼠移動到這上面則會顯示「CoolTip」。</p>
  <p title="">當移動到這裡則不會顯示任何資訊。</p>
</div>

結果

無障礙議題

使用 title 屬性對於以下情況會造成很大的問題：

僅使用觸控設備的用戶
使用鍵盤導航的用戶
使用輔助技術（如螢幕閱讀器或放大鏡）進行導航的用戶
具有精細動作控制障礙的用戶
具有認知障礙的用戶

這是因為瀏覽器支援度不一致，再加上輔助技術對瀏覽器渲染頁面的額外解析，導致了這個問題。如果你需要工具提示效果，最好透過使用更易於訪問的技術，以便可以透過以上瀏覽方式訪問。

規範

Specification
HTML # the-title-attribute

瀏覽器相容性

BCD tables only load in the browser

參見

所有全域屬性。
HTMLElement.title 反映这个属性的。