<small> / <s> / <u> / <mark> / <del> / <ins>

対応:		HTML5（2014）

テキストの意味的な修飾に使うインライン要素のグループです。『small』（注記）・『s』（無効テキスト）・『u』（固有名詞等）・『mark』（ハイライト）・『del』（削除）・『ins』（挿入）をまとめて解説します。

構文

<small>著作権表示や注意書き</small>
<s>もう正しくない情報</s>
<u>固有名詞や注意を引くテキスト</u>
<mark>検索でヒットしたキーワード</mark>
<del>削除されたテキスト</del>
<ins>追加されたテキスト</ins>
<!-- sup: 上付き文字 -->
x<sup>2</sup>
<!-- sub: 下付き文字 -->
H<sub>2</sub>O

タグ一覧

タグ	概要
small	著作権・免責事項・注意書きなど補足的な細かいテキストを表します。デフォルトで小さいフォントで表示されます。
s	もはや正確・適切ではなくなったテキストを示します。価格の取り消しや旧情報に使います。デフォルトで打ち消し線が付きます。
u	固有名詞・スペルミスの下線など、注意が必要なテキストを示します。デフォルトで下線が付きます。
mark	文脈上に関連する・参照目的でハイライトしたいテキストを示します。デフォルトで黄色の背景色が付きます。
del	文書から削除されたテキストを示します。デフォルトで打ち消し線が付きます。
ins	文書に追加されたテキストを示します。デフォルトで下線が付きます。
sup	上付き文字を表します。数式の指数や注釈番号に使います。
sub	下付き文字を表します。化学式や数式の添え字に使います。

サンプルコード

sample_small_s_u_mark_del_ins.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- sで取り消し価格を表示 -->
  <p>通常価格：<s>5,980円</s> → セール価格：<strong>2,980円</strong></p>

  <!-- markでキーワードをハイライト -->
  <p>検索結果：<mark>HTML</mark>の基本的な使い方について解説します。</p>

  <!-- delとinsで変更履歴を表示 -->
  <p>次回の締め切りは<del>3月10日</del><ins>3月17日</ins>に変更になりました。</p>

  <!-- smallで注意書き -->
  <p>ご購入はこちらから。<small>※在庫がなくなり次第終了します</small></p>

  <!-- supとsubの使用例 -->
  <p>面積 = 縦<sup>2</sup> + 横<sup>2</sup></p>
  <p>水の化学式：H<sub>2</sub>O</p>

</body>
</html>

実行結果

各要素がデフォルトの視覚スタイルで表示されます。

サンプルページはこちら

概要

『s』と『del』はどちらも打ち消し線で表示されますが意味が異なります。『s』は「もはや適切でない情報（価格変更・旧情報など）」を示し、『del』は「文書の編集によって削除されたテキスト」を示します。同様に『u』と『ins』はどちらも下線ですが、前者は「注意が必要なテキスト」、後者は「追加されたテキスト」という意味の違いがあります。

『mark』は検索エンジンの強調表示や、文章を参照する際に関連する部分をハイライトするのに最適です。単に見た目を黄色くしたいだけならCSSの『background-color』を使い、意味的なハイライトが必要な場合に『mark』を使いましょう。

『sup』と『sub』は数式・化学式・参考文献の注釈番号などに活用できます。フォントサイズが自動的に小さくなり上・下に配置されます。テキストの基線（ベースライン）からずれるため、行間が乱れることがあります。気になる場合はCSSの『line-height』で調整してください。

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

4 以降 ○

3 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

3.2 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

実践的な使い方

各タグの典型的な使用場面をまとめます。

タグ	典型的な使用場面
<small>	免責事項・著作権表示・注釈・利用規約の補足など、法的・慣習的に小さい文字で示す情報
<s>	値下げ前の価格表示、旧情報の取り消し（訂正ではなく「もはや正確でない」内容）
<u>	固有名詞の下線表示（中国語等の慣習）、スペルミスの強調。リンクと混同しやすいので慎重に使う
<mark>	検索結果のキーワードハイライト、引用文中の注目箇所、ユーザーが選択したテキストの強調
<del>	文書の編集履歴（削除された文章）、価格の取り消し。<ins>とセットで使うことが多い
<ins>	文書の編集履歴（追加された文章）。<del>とセットで使い、変更前後を示す

<!-- 価格表示: 旧価格を取り消し、新価格を強調 -->
<p><s>通常価格: ¥5,000</s> → 特別価格: <strong>¥3,000</strong></p>

<!-- 検索結果のキーワードハイライト -->
<p>「<mark>HTML</mark>とCSSの使い方」について解説します。</p>

<!-- 文書の変更履歴 -->
<p>イベントは<del datetime="2024-01-10">1月15日（月）</del><ins datetime="2024-01-11">1月22日（月）</ins>に開催します。</p>

<!-- 著作権表示 -->
<footer>
  <small>© 2024 Example Corp. All rights reserved.</small>
</footer>

CSSでのスタイリング

各タグのデフォルトスタイルは変更でき、デザインに合わせたカスタマイズが可能です。

/* markのデフォルト黄色ハイライトをカスタマイズ */
mark {
  background-color: #b3e5fc; /* 水色ハイライト */
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

/* delのデフォルト取り消し線をカスタマイズ */
del {
  text-decoration: line-through;
  color: #999;
  opacity: 0.7;
}

/* insのデフォルト下線をカスタマイズ */
ins {
  text-decoration: none;     /* 下線を消す */
  background-color: #e8f5e9; /* 緑色ハイライトで追加部分を示す */
}

/* smallのフォントサイズを調整 */
small {
  font-size: 0.75em;
  color: #666;
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典