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

瀏覽器相容性

Report problems with this compatibility data on GitHub

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`title`
Multi-line titles

Tip: you can click/tap on a cell for more information.

Full support: Full support

參見

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

Legend