HTML del・insタグ：削除・追加内容と変更日時の表示

HTMLの<del>は文書から削除された内容をマークし、<ins>は挿入された内容をマークします。デフォルトの表示は通常取り消し線と下線ですが、主な目的は変更の意味を伝えることであり、文書のバージョンを自動的に管理したり、編集履歴を保存したりするものではありません。

完全な例: 削除された内容と挿入された内容を一緒に表示する

以下のスケジュール通知は練習用の例です。changes.htmlとして保存し、ブラウザで開くと古い値と新しい値の両方を見ることができます。日付と理由も可視テキストとして表示されるため、色や線が区別しにくい場合でも読者が変更内容を理解できます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>予定変更の例</title>
</head>
<body>
  <h1>練習会の予定変更</h1>
  <p>開始時刻:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>以前の開始時刻は10:00で、新しい開始時刻は11:00です。</p>
  <p id="reason">2026年10月30日、準備時間を確保するために予定を変更しました。</p>
</body>
</html>

通常のデフォルトスタイルでは、10:00 は取り消し線、11:00 は下線が付けられます。CSS を使って表示を変更することができます。del を適用してもデータから元のテキストは消えないため、パスワード、個人情報、または公開してはいけない他の内容を隠す目的では使用しないでください。

datetime属性とcite属性の役割

オプションのdatetime属性は、変更が行われた日付、または日付と時刻を記録します。例の2026-10-30は年-月-日形式の日付です。正確な時刻が必要な場合は、2026-10-30T09:00:00+09:00のように明示的なタイムゾーンオフセットを含めることができます。日付を追加しても、公開をスケジュールしたり、その時間に自動的に文書を変更したりすることはありません。

cite属性は、変更を説明するリソースのURLを指定します。例では#reasonを使用して、同じ文書内の説明段落を指しています。属性は自動的に説明やクリック可能なリンクを表示するわけではないため、必要な理由や日付は表示されるテキストにも含めてください。

文書の編集と装飾的な線を区別してください

文書の編集を表すには del および ins を使用してください。もはや正確でない、または関連性のない情報に取り消し線を引く場合、<s> の意味も考慮してください。純粋に装飾的な線には CSS text-decoration を使用します。見た目が同じだからといって、意味が同じであるとは限りません。

スクリーンリーダーは、デフォルトの設定ではすべての削除または挿入の境界を読み上げない場合があります。重要な変更については、例のように、古い値と新しい値を文で説明してください。2つの状態を色だけで区別せず、現在有効な情報がどれであるかを明確に示してください。 MDNのdel要素リファレンス および MDNのins要素リファレンス は、要素とその属性について説明しています。