delタグ -文書内で削除されたテキストを示す｜HTML辞典
<del>タグとは？
<del> タグは、文書内で削除されたテキストを示すためのタグです。
変更履歴を明示するために使用され、SEO やアクセシビリティの向上に役立ちます。
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<del> は 開始タグ（<del>）と閉じタグ（</del>）の両方が必要 です。
基本的な記述方法
<p>旧価格: <del>5,000円</del> → 新価格: 3,500円</p>
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
cite | 削除の根拠となる URL を指定 | <del cite="https://example.com">削除された内容</del> |
datetime | 削除された日時を指定 | <del datetime="2024-07-01T12:00:00Z">削除された内容</del> |
cite と datetime の使用例
<p>利用規約が変更されました:</p>
<p><del cite="https://example.com/terms" datetime="2024-07-01T12:00:00Z">旧規約の内容</del></p>
CSSを使ったデザイン変更
<del> のデフォルトのスタイルは 取り消し線（line-through） ですが、スタイルをカスタマイズできます。
del {
text-decoration: none;
color: red;
font-weight: bold;
background-color: #ffe6e6;
}
適切な使用例
✅ 削除された情報を明示する
<p>この機能は <del>2024年6月1日</del> に廃止されました。</p>
✅ 価格変更を示す
<p>旧価格: <del>12,800円</del> → 新価格: 9,800円</p>
✅ cite と datetime を使用して、情報の出典と削除日時を示す
<p><del cite="https://example.com/news" datetime="2024-07-01T09:00:00Z">このサービスは終了しました。</del></p>
適切でない使用例（誤った使い方）
❌ <del> を単なる強調目的で使用する
<!-- NG: 文章の強調として使用 -->
<p>この製品は <del>とても人気</del> です！</p>
✅ 正しい書き方（削除情報として使用）
<p>この製品の旧バージョンは <del>販売終了</del> しました。</p>
❌ <del> を新しく追加された情報に使用する（追加部分には <ins> を使う）
<!-- NG: 追加部分を <del> でマークアップ -->
<p><del>無料プラン</del> が利用可能になりました。</p>
✅ 正しい書き方（追加部分には <ins> を使用）
<p><ins>無料プラン</ins> が利用可能になりました。</p>
<del>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<del> | 削除されたテキストを示す | 取り消し線が適用される | 変更前の内容を保持 |
<ins> | 追加されたテキストを示す | 下線が適用される | 文書の更新履歴、修正部分の表示 |
<s> | 無効または関係なくなった情報を示す | 取り消し線が適用される | 価格変更、廃止情報 |
使用上の注意点
✅ <del> は削除された情報を示す際にのみ使用する
- 強調やデザイン目的では使用しない。
✅ <ins> と組み合わせて変更履歴を明確にする
<del>で削除部分を示し、<ins>で新しい情報を示す。
✅ cite や datetime を適切に活用する
- 変更の出典や日時を明示することで、情報の透明性を向上できる。
関連タグ
まとめ
<del> タグは、HTML 文書内で 削除された情報を示すためのタグ です。
変更履歴を明示し、SEO やアクセシビリティの向上に役立ちます。
