<mark>: 標記文字元素

基線 廣泛可用

此功能已得到很好的建立,並在許多裝置和瀏覽器版本上都能正常使用。它已在所有瀏覽器中可用,自 2015 年 7 月.

<mark> HTML 元素表示標記突出顯示的文字,用於參考或註釋目的,因為標記的段落與包含它的上下文中相關。

試一試

屬性

此元素只包含全域性屬性

使用注意事項

<mark> 的典型用例包括

  • 當用在引號 (<q>) 或塊引用 (<blockquote>) 中時,它通常表示對使用者特別感興趣的文字,但不在原始源材料中標記,或者需要特別審查的材料,即使原始作者認為它並不特別重要。想象一下,這就像在書中使用熒光筆標記你感興趣的段落。
  • 否則,<mark> 表示文件內容中可能與使用者當前活動相關的部分。例如,這可能用於指示與搜尋操作匹配的單詞。
  • 不要使用 <mark> 進行語法高亮顯示;相反,請使用 <span> 元素,並應用相應的 CSS。

注意: 不要將<mark><strong>元素混淆;<mark>用於表示具有相關性程度的內容,而<strong>表示具有重要性的文字跨度。

無障礙性

大多數螢幕閱讀技術在其預設配置中不會宣佈mark元素的存在。可以使用 CSS content屬性以及::before::after偽元素來使其被宣佈。

css
mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [highlight start] ";
}

mark::after {
  content: " [highlight end] ";
}

一些使用螢幕閱讀器的人會故意停用宣佈建立額外冗長性的內容。因此,重要的是不要濫用此技術,而僅在不知道內容已被突出顯示會不利於理解的情況下使用它。

示例

標記感興趣的文字

在第一個示例中,<mark>元素用於標記引文中對使用者特別感興趣的某些文字。

html
<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>

結果

識別上下文敏感段落

此示例演示了使用<mark>標記段落中的搜尋結果。

html
<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>

為了幫助區分<mark>在搜尋結果中的使用與其他潛在使用方式,此示例將自定義類"match"應用於每個匹配項。

結果

技術摘要

內容類別 流內容短語內容,可感知內容。
允許的內容 短語內容.
標籤省略 無,開始標籤和結束標籤都是必需的。
允許的父級 任何接受短語內容的元素。
隱式 ARIA 角色 沒有對應的角色
允許的 ARIA 角色 任何
DOM 介面 HTMLElement

規範

規範
HTML 標準
# the-mark-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入