HTML <mark>

<mark>はテキストをハイライトするHTMLタグです。mark要素の使い方をサンプルを交えてご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。mark 要素の終了タグは省略できない。

<mark>
  <!-- phrasing content -->
</mark>
<MARK>
  <!-- phrasing content -->
</MARK>

内容

mark 要素の開始タグと終了タグの間にフレージング・コンテンツを含めることができる。

There is <mark>no place</mark> like home.

There is no place like home.

属性

以下に示す属性を mark 要素に指定できる。

accesskey
アクセスキー
autocapitalize
自動キャピタライズ
autofocus
自動フォーカス
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。 
There is <mark class="bg-primary">no place</mark> like home.
contenteditable
コンテンツが編集可能か
dir
文章が流れる方向
draggable
ドラッグ可能か
id
HTML文書内で一意な識別子を指定する。
lang
言語を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。 
There is <mark style="background-color: violet">no place</mark> like home.

There is no place like home.

title
ツールチップに適切な、要素のためのアドバイザリ情報を指定する。 
There is <mark title="重要">no place</mark> like home.

There is no place like home.

JavaScript

JavaScriptからは HTMLElement インタフェースを通じて mark 要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ 型 説明
accessKey string accessKey属性
accessKeyLabel string 要素に割り当てられたアクセスキー（読取り専用）
contentEditable string contenteditable属性
isContentEditable boolean この要素が編集できるかどうか（読取り専用）
dataset DOMStringMap カスタムデータ属性
dir string dir属性
draggable boolean draggable属性
innerText string ノードに描画されるテキスト
lang string lang属性
style string style属性
tabIndex number tabIndex属性
title string title属性

参考文献

Web Hypertext Application Technology Working Group 2023. Text-level semantics. HTML Living Standard