Webサイトを運営する中で、情報の修正や更新が必要になる場面は多々あります。
その際、単に古い記述を消去するのではなく「以前はこうだったが、現在はこう変わった」という履歴を視覚的に、かつ構造的に示すことはユーザーの利便性と検索エンジンへの理解を助ける上で非常に重要です。
HTMLにおいて、この役割を担うのがdelタグです。
しかし、一見すると同じように「打ち消し線」を表示するsタグとの使い分けに迷う方も少なくありません。
また、2026年現在のWeb標準においても、セマンティクス（意味論）に基づいた正しいマークアップは、アクセシビリティの向上やSEOの観点から欠かせない要素となっています。
本記事では、delタグの正確な使い方から、関連タグとの違い、さらにCSSを用いた洗練された装飾方法までを詳しく解説します。
delタグの役割と基本ルール
HTMLのdelタグは、ドキュメントから削除されたテキストの範囲を示すための要素です。
「Deleted Text」の略称であり、そのテキストが以前は存在したが、現在は有効ではないことを意味します。
単に見た目を変えるだけのタグではなく、検索エンジンやブラウザといった「機械」に対しても、その箇所が変更された履歴であることを伝える重要な意味を持っています。
delタグの基本的な書き方
基本的な使い方は、削除したいテキストを<del></del>で囲むだけです。
ブラウザのデフォルトスタイルでは、囲まれた部分に中央の打ち消し線が表示されます。
<!-- 基本的なdelタグの使用例 -->
<p>
今年のキャンペーン期間は<del>6月30日まででしたが、好評につき7月15日まで延長となりました。
</p>今年のキャンペーン期間は[打ち消し線：6月30日まで]でしたが、好評につき7月15日まで延長となりました。属性を活用した情報の付加
delタグには、変更の理由や日時を示すための属性が用意されています。
これらを活用することで、より詳細な更新情報をマークアップすることが可能です。
| 属性名 | 役割 | 記述例 |
|---|---|---|
cite | 変更の理由を説明する文書のURL | cite=”https://example.com/update-info“ |
datetime | 変更が行われた日時（ISO 8601形式） | datetime=”2026-05-10T10:00″ |
特にdatetime属性は、いつ情報が更新されたのかを明確にするために有効です。
検索エンジンがページの更新頻度や鮮度を判断する際の手助けとなる場合もあります。
<!-- 属性を含めたdelタグの例 -->
<p>
商品価格：<del datetime="2026-05-01" cite="./price-change.html">2,980円</del> 2,480円
</p>delタグとsタグの決定的な違い
打ち消し線を引くHTMLタグには、delの他にsタグが存在します。
見た目はどちらも同じ打ち消し線ですが、その意味（セマンティクス）は大きく異なります。
sタグの定義：正確ではなくなった情報
sタグは「Strikethrough」の略ですが、現代のHTML（HTML5以降）では、単なる見た目ではなく「もはや正確ではない、または関連性がなくなった情報」を指すために使用されます。
一方、delタグは「編集履歴としての削除」を意味します。
この違いを以下の表にまとめました。
| 特徴 | delタグ | sタグ |
|---|---|---|
| 主な意味 | 編集による削除（履歴） | 正確性・関連性の消失 |
| 推奨シーン | 規約の改定、修正箇所の明示 | セールの旧価格、完売情報の表示 |
| セットで使うタグ | insタグ | 特になし |
| 属性 | cite, datetime | 特になし |
使い分けの具体例
例えば、ブログの記事内で誤字を修正する場合はdelタグを使用します。
これは「後から文章を編集した」という文脈があるからです。
対して、ECサイトで「メーカー希望小売価格 10,000円 → 販売価格 8,000円」と表示する場合、10,000円という価格自体は「過去に編集して消した」わけではなく、「今の販売条件とは関連がなくなった」だけなので、sタグが適しています。
insタグとのセット運用
delタグを使用する場合、多くの場合で対となるのがinsタグ（Inserted Text）です。
これは新たに追加されたテキストを示します。
削除された部分と追加された部分をセットで記述することで、ユーザーに対してどこがどう変わったのかを完璧に伝えることができます。
<!-- delとinsを併用した修正の例 -->
<p>
次回の定例会議は<del datetime="2026-05-20">5月20日（水）</del>
<ins datetime="2026-05-20">5月27日（水）</ins>に変更となりました。
</p>ブラウザのデフォルトでは、insタグには下線が表示されます。
この「打ち消し線」と「下線」の組み合わせにより、視覚的な修正の意図が明確になります。
CSSで打ち消し線をカスタマイズする方法
デフォルトの打ち消し線は、テキストと同じ色、同じ太さで表示されます。
しかし、デザインによっては「打ち消し線だけを赤くしたい」あるいは「線をもっと太くしたい」という要望があるでしょう。
CSSを使用すれば、これらの装飾は自由自在です。
打ち消し線の色だけを変更する
text-decoration-colorプロパティを使用すると、テキストの色を保持したまま線だけの色を変更できます。
/* 打ち消し線を赤くする設定 */
del {
text-decoration-color: #ff0000; /* 線の色を赤にする */
text-decoration-thickness: 2px; /* 線の太さを指定 */
}<p>旧価格：<del>5,000円</del></p>このように指定することで、文字は黒のまま、打ち消し線だけを強調したい色に変更でき、視認性が大幅に向上します。
打ち消し線の種類を変える（点線・波線）
text-decoration-styleを使えば、直線の打ち消し線を波線や二重線に変更することも可能です。
/* 波線の打ち消し線 */
.cancelled {
text-decoration: line-through wavy #999;
}線ではなく背景色で表現する
あえて線を使わず、背景色を変えることで「削除された感」を出す手法もあります。
del {
text-decoration: none; /* デフォルトの線を消す */
background-color: #fdd; /* 薄い赤の背景 */
color: #a00; /* 濃い赤の文字色 */
padding: 0 4px;
}このスタイルは、システム開発の差分表示（Diff表示）などでよく見られるデザインです。
アクセシビリティへの配慮
delタグを使用する際に忘れてはならないのが、スクリーンリーダー（音声読み上げソフト）を利用するユーザーへの配慮です。
実は、多くのスクリーンリーダーはデフォルトの設定では「打ち消し線」を音声で読み上げません。つまり、視覚障害を持つユーザーには「削除されたテキスト」であるという情報が伝わらず、新旧のデータが混ざって聞こえてしまうリスクがあります。
これを解決するためには、以下のようにCSSの疑似要素を使って、音声読み上げ時のみ「削除開始」「削除終了」といったテキストを挿入する方法があります。
/* スクリーンリーダー向けの配慮 */
del::before {
content: " [削除開始] ";
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
}
del::after {
content: " [削除終了] ";
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
}このように、見えないテキストを補助的に追加することで、すべてのユーザーに対して等しく正確な情報を届けることができます。
これはWebアクセシビリティのガイドライン（WCAG）にも通ずる重要なテクニックです。
まとめ
HTMLのdelタグは、単なる打ち消し線を表示するツールではなく、ドキュメントの更新履歴を正しく管理するための重要なセマンティック要素です。
- delタグ：編集によって「削除」された箇所に使用。
- sタグ：もはや「不適切・正確ではない」箇所に使用。
- insタグ：新しく「追加」された箇所に使用し、
delと併用するのがベスト。 - CSSカスタマイズ：
text-decoration-colorなどで視認性を高める。 - アクセシビリティ：読み上げソフトへの対応も考慮する。
これらのポイントを抑えることで、情報の透明性が高まり、ユーザーにとっても検索エンジンにとっても親切なWebサイトを構築できます。
修正が発生した際は、安易にテキストを書き換えるだけでなく、delタグを適切に活用して、正確なドキュメント構造を維持することを心がけましょう。