HTMLのmarkタグとは？正しい使い方と他の強調タグとの違いを徹底解説！

コード例:

<p>Webサイトの制作では、<mark>ユーザビリティ</mark>を第一に考える必要があります。</p>

<p>Webサイトの制作では、<mark>ユーザビリティ</mark>を第一に考える必要があります。</p>

表示例:

Webサイトの制作では、ユーザビリティを第一に考える必要があります。

markタグの基本的な役割とブラウザでの見え方

<mark>タグの主な役割は「一時的な関連性」を読者に示すことです。

例えば、ユーザーが特定のキーワードで検索し、そのキーワードが記事内のどこにあるかを素早く見つける必要があるとき、<mark>タグはそのキーワードをハイライトするのに最適です。

これは、記事全体でその単語が「重要」なのではなく、「今、この文脈（検索）において関連性が高い」ことを示しているからです。

最重要ポイント！markタグとstrong・emタグの決定的な違い

この表が示すように、<mark>タグは、テキストの「重要度」や「強調度」を示すタグではありません。

あくまで、読者が特定の情報を素早く見つけるための「マーカー」として機能します。

【markタグ】「一時的な関連性」を示す正しい使用シーン

<mark>タグが最も輝くのは、「特定の行動」の結果としてテキストがハイライトされる場合です。

• 検索結果のハイライト: ユーザーが「HTML」で検索した場合、ページ内の「HTML」という単語を<mark>で囲む。
• 引用文中の注目箇所: 引用した文章の中で、特に注目してほしい部分を指摘するためにハイライトする。

<p>有名なスローガンに「<mark>ユーザーの立場に立つ</mark>」という言葉があります。</p>

<p>有名なスローガンに「<mark>ユーザーの立場に立つ</mark>」という言葉があります。</p>

【strongタグ】「重要性」を示す場合

<strong>タグは、そのコンテンツ全体における「重要性」を強調したいときに使用します。

<p>作業を始める前に、<strong>必ずデータのバックアップを取ってください。</strong></p>

<p>作業を始める前に、<strong>必ずデータのバックアップを取ってください。</strong></p>

【emタグ】「強調」を示す場合

<em>タグは、文章を読む際の「抑揚」や「口調の変化」を伝えるために使用します。

<p>私はそのアイデアを<em>試したくありませんでした</em>。</p>

<p>私はそのアイデアを<em>試したくありませんでした</em>。</p>

知らないと損をする！CSSでmarkタグを自在にデザインする方法

<mark>タグはデフォルトで黄色ですが、CSSを使うことで、よりモダンでデザイン性の高い蛍光ペン風マーカーを実現できます。

最もシンプルなのは、background-colorプロパティを使う方法です。

mark {
  /* シンプルな緑色のハイライトに変更 */
  background-color: #a4f5a4;
  /* 文字色も変更したい場合 */
  color: #333;
  /* パディング（余白）を追加するとより見やすい */
  padding: 0 5px;
}

mark {
  /* シンプルな緑色のハイライトに変更 */
  background-color: #a4f5a4;
  /* 文字色も変更したい場合 */
  color: #333;
  /* パディング（余白）を追加するとより見やすい */
  padding: 0 5px;
}

/* 蛍光ペン風（下線タイプ）を実現 */
mark {
  background: linear-gradient(transparent 60%, #ffe929 60%);
  padding: 0;
  /* 背景の繰り返しを無効化 */
  background-repeat: no-repeat;
}

/* 蛍光ペン風（下線タイプ）を実現 */
mark {
  background: linear-gradient(transparent 60%, #ffe929 60%);
  padding: 0;
  /* 背景の繰り返しを無効化 */
  background-repeat: no-repeat;
}

markタグは「重要度」や「強調」を伝えるタグではない

前述のとおり、<mark>タグは視覚的に目立ちますが、これはSEO上の「重要度」を上げるものではありません。

本当に重要な情報には<strong>タグを使いましょう。

スクリーンリーダーへの配慮:

<mark>タグは視覚的なハイライトを提供するものであり、スクリーンリーダー（視覚障害者が利用する読み上げソフト）は、通常、特にマークアップの違いを伝えません。

マークされたテキストが本当に重要な情報であれば、視覚的な要素だけでなく、文言そのものを工夫する必要があります。

ソースコードの色分け（シンタックスハイライト）には使用しない

プログラミングのコードを表示する際に、キーワードや関数名などを色分け（シンタックスハイライト）することがありますが、これには<mark>タグを使うべきではありません。

シンタックスハイライトは、文脈での関連性ではなく、種類やカテゴリによって色分けしているため、意味を持たない汎用的な<span>タグをCSSと組み合わせて使うのが適切です。