HTML のマーク タグの用途は何ですか?

HTMLの<mark>タグについて

HTMLのの<mark>タグは、ウェブページでユーザーに関連する重要なテキストをマークまたは強調表示するために使用されます。デフォルトでは、背景に黄色が使用されますが、CSSプロパティを使用すると、背景色やテキストの色、ハイライトの形などを変更できます。

の<mark>タグの用途

の<mark>タグは、次のような場合に役立ちます。

  • 検索結果で、検索語句を強調表示する
  • 記事の中で、重要な単語やフレーズを目立たせる
  • ユーザーが編集したテキスト部分を強調表示する

の<mark>タグの使い方

の<mark>タグは、強調表示したいテキストを囲むように使用します。例えば、次のようになります。

<p>この文章の中で、<mark>重要な部分</mark>を強調表示しています。</p>

このコードは、ブラウザ上では次のように表示されます。

この文章の中で、の<mark>重要な部分を強調表示しています。

の<mark>タグのスタイル

の<mark>タグのデフォルトのスタイルは、黄色の背景色です。しかし、CSSを使用して、背景色、テキストの色、ハイライトの形などを変更できます。

例えば、次のCSSコードは、ハイライトの背景色を緑色、テキストの色を白に変更します。


mark {
  background-color: green;
  color: white;
}

の<mark>タグの例

以下は、の<mark>タグの使用例です。

コード 表示結果
<p>最新の<mark>ニュース</mark>をご覧ください。</p>

最新のの<mark>ニュースをご覧ください。

<p>この商品は<mark style="background-color: red; color: white;">セール中</mark>です。</p>

この商品はセール中です。

よくある質問

Q1: の<mark>タグとタグの違いは何ですか?

タグは、テキストを太字で表示しますが、の<mark>タグは、テキストを強調表示します。タグは、テキストの重要性を示すものではありませんが、の<mark>タグは、ユーザーにとって重要なテキストを示すために使用されます。

Q2: の<mark>タグの背景色を変更するにはどうすればよいですか?

CSSを使用して、の<mark>タグの背景色を変更できます。例えば、背景色を赤色に変更するには、次のCSSコードを使用します。


mark {
  background-color: red;
}

Q3: の<mark>タグはすべてのブラウザでサポートされていますか?

の<mark>タグは、HTML5で導入されたタグです。そのため、古いブラウザでは正しく表示されない場合があります。