HTML5マーク要素の使用方法

getdocs

2年前

markは、特定のコンテキストに関連するテキストをマーク/ハイライトするために使用できる新しいセマンティック要素です。このチュートリアルでは、mark要素の実装を確認します。

前提条件

mark要素を使用する場合の良い例は、検索結果でキーワードを強調表示することです。

たとえば、「犬」を検索したとします。

<p>
  Tell your <mark>dog</mark> to behave!
</p>

mark 要素を適切と思われるスタイルにするのは、あなた次第です。例えば：

mark {
  background-color: rgba(107, 183, 86, 0.95);
  border-bottom: 2px solid rgb(65, 118, 50);
}

これは、markタグの基本的な使用例と実装です。

<mark>は<em>や<strong>とは異なり、強調表示されたコンテンツに重要性や強調が追加されないため、使用が少数のユースケースに限定されることに注意してください。

HTML5マークアップ言語のより包括的なレビューについては、シリーズ「HTMLでWebサイトを構築する方法」を参照してください。