delタグの使い方と削除されたテキストの表示方法をわかりやすく解説

delの概要

delタグの主な属性

delタグの基本的な使い方

以下の例では、削除された部分が取り消し線で表示されます。

<p>この商品は<del>5000円</del> → 4500円に値下げされました。</p>

実行例：

この商品は 5000円 → 4500円に値下げされました。

delタグとinsタグの併用

削除された部分と新しい情報を明示するために、insタグと組み合わせることができます。

<p>この商品は<del>5000円</del> → <ins>4500円</ins>に値下げされました。</p>

実行例：

この商品は 5000円 → 4500円 に値下げされました。

delタグの応用：更新履歴の記録

以下のように、変更履歴を記録するために使用することもできます。

<p>最新の利用規約（更新日: <del datetime="2023-12-01">2023年12月1日</del> → <ins datetime="2024-02-01">2024年2月1日</ins>）</p>

実行例：

最新の利用規約（更新日: 2023年12月1日 → 2024年2月1日）

注意事項

• delタグは主に文書の修正履歴を示すために使用されるが、装飾目的だけで使うべきではない。
• CSSを使うことで、取り消し線のスタイルを変更できる。
• SEOにおいて、削除したことが明確になり、検索エンジンのインデックス更新に影響を与える可能性がある。
• 意味を明確にするため、insタグと併用するとより適切な表現になる。

よくある質問

Q: delタグは取り消し線を表示するだけですか？

A: いいえ、削除されたことを意味づけるためのタグであり、SEO的にも影響を与える可能性があります。

Q: delタグのスタイルをカスタマイズすることはできますか？

A: はい、CSSを使用して取り消し線の色やスタイルを変更できます。例えば、以下のように設定できます。

del {
    text-decoration: line-through;
    color: red;
}

Q: delタグとsタグの違いは？

A: delタグは「文書内で削除されたことを明示する」目的で使われるのに対し、sタグは「現在無効になったテキスト」を示すために使われます。

Q: delタグのcite属性とdatetime属性は必須ですか？

A: いいえ、これらの属性はオプションですが、削除の理由や日時を明確にするために推奨されます。

まとめ

• delタグは、削除されたテキストを明示するために使用する。
• 取り消し線が表示され、SEOにも影響を与える可能性がある。
• 新しい情報を追加する場合はinsタグと組み合わせると効果的。
• cite属性で削除の理由を、datetime属性で削除日時を指定できる。
• 見た目を変更する場合はCSSでカスタマイズ可能。