markタグ -特に目立たせたい部分をハイライトする｜HTML辞典
<mark>タグとは？
<mark>タグは、HTML文書内で「特に目立たせたい部分をハイライト表示する」ためのタグです。
デフォルトでは黄色の背景色 が適用され、文章の中で重要なキーワードや強調したいポイントを示すのに適しています。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）
インライン要素として扱われ、テキストの一部分を視覚的に強調する役割を持ちます。
閉じタグの有無
<mark>は開始タグ（<mark>）と閉じタグ（</mark>）の両方が必要です。
基本的な記述方法
<mark> を使用すると、テキストにハイライトが適用されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>markタグの例</title>
</head>
<body>
<p>この文章の中で、<mark>特に注目してほしい部分</mark> をハイライト表示します。</p>
</body>
</html>ポイント：
<mark>は視覚的にハイライト表示するが、検索エンジンにも「強調されたキーワード」として認識される。- SEO的にも重要なワードを目立たせる効果がある。
使用できる主な属性
<mark>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <mark class="highlight">注目</mark> |
id | 一意の識別子を設定 | <mark id="highlight-text">重要</mark> |
style | インラインスタイルを適用 | <mark style="background-color: lightblue;">青いハイライト</mark> |
CSSを使ったデザイン変更
デフォルトでは黄色の背景色が適用されますが、CSSを使って色を変更できます。
✅ カスタムハイライトの適用
.custom-mark {
background-color: lightblue;
color: black;
padding: 2px 4px;
border-radius: 4px;
}<p class="custom-mark">この部分はカスタムスタイルでハイライトされています。</p><mark> の適切な使用例
✅ キーワードの強調
文章内の重要なキーワードを目立たせる目的で使用するのが適切です。
<p>この製品は <mark>完全防水</mark> 仕様です。</p>✅ 検索結果のハイライト表示
検索エンジンやサイト内検索の結果で該当ワードを強調する場合にも使用されます。
<p>検索結果: あなたが探しているのは <mark>最新のスマートフォン</mark> ですか？</p><mark> の適切でない使用例（誤った使い方）
❌ 装飾目的で使うのはNG
視覚的に目立たせる目的なら、CSSを使用する方が適切です。
<!-- NG：装飾目的のみで <mark> を使う -->
<h1><mark>見出し</mark></h1>✅ 正しい書き方（CSSを使用）
.highlight-title {
background-color: yellow;
padding: 5px;
}<h1 class="highlight-title">見出し</h1><mark> と他のタグの違い
| タグ | 役割 | 視覚的な変化 | 意味の強調 |
|---|---|---|---|
<mark> | 重要な単語やフレーズのハイライト | 背景色（デフォルトは黄色） | あり（SEOに影響） |
<strong> | 文章の意味的な強調（重要） | 太字（デフォルト） | あり（SEOに影響） |
<em> | 文章内で重要な部分を強調 | 斜体（デフォルト） | あり（SEOに影響） |
使用上の注意点
✅ 本当に重要な箇所にのみ使用する
<mark>を多用すると、文章全体が見づらくなるため、本当に強調すべき部分のみに使うのが望ましい。
✅ 装飾目的なら CSS を使うのが推奨される
- HTMLの構造をシンプルにするため、見た目の変更は CSS で行うのが望ましい。
.highlight {
background-color: yellow;
color: black;
}<p class="highlight">これはCSSで適用されたハイライトです。</p>関連タグ
<strong>– 文章の意味的な強調（太字）<b>– 視覚的な太字（装飾目的）<em>– 文章の意味的な強調（斜体）<i>– 装飾目的の斜体<span>– インライン要素のグループ化（カスタムスタイル適用に便利）
まとめ
<mark>タグは、HTML文書内で重要な部分をハイライト表示するためのタグ です。
検索結果の強調や、特定のキーワードを目立たせる目的で使用されます。
SEOにも影響を与えるため、適切に使用することでユーザーの視認性を向上させることができます。
ただし、単なる装飾目的なら CSS を使用する方が推奨されます。
