定義と使用方

<del>タグは
文書内で削除された（deleted）テキスト範囲を表します。

削除は除去を意味する場合があり、変更内容の追跡や修正前後の違いを示す際に有用です。

基本の例

HTML 
<h3>やることリスト</h3>
<ul>
  <li>食器洗い機を空にする</li>
  <li><del datetime="2019-10-11T01:25-07:00">学校の講義を見る</del></li>
  <li><del datetime="2019-10-10T23:38-07:00">音楽ファイルをもっと入手する</del></li>
  <li>プリンターを購入する</li>
</ul>
ブラウザで実際に表示された様子

<del>タグは、主に削除されたテキストを強調し、ドキュメントやソースコードの変更内容を視覚的に示すために使用されます。この場合、ドキュメントやソースコードの変更点を追跡する際などに活用できます。ほとんどのブラウザではテキストに取り消し線が表示されます。

覚えておきましょう！
コンテンツが「削除」や「除去」という意味ではなく、単に情報が正確でない、もしくは考えが変わって取り消されたという意味で使用する場合には、<s>タグの方が適しています。

<ins>タグとの併用

<del>は<ins>タグと一緒に使用されることが多いです。
これらを併用することで、修正前と修正後の内容をセマンティックに区別でき、変更履歴を明確に伝えるのに効果的です。

<ins>タグは、<del>タグとは反対の用途で、HTMLドキュメントにおいて追加されたテキストの範囲を示すために使用されます。

次は、この二つのタグを一緒に使用する代表的な例です。

HTML 
<p>配送料: <del>₩5,000</del> <ins>無料</ins></p>
ブラウザで実際に表示された様子

属性

<ins>タグは、すべてのグローバル属性を使用できます。

cite属性

<del>タグのcite属性は、 削除された内容に関する説明を提供するリソースのURLです。

<del>タグにcite属性が必ずしも必要なわけではありません。しかし、cite属性は、変更内容の元情報や説明を参照できるリンクを提供することで、ドキュメントの利用者に追加情報を提供するのに役立ちます。

例えば、変更内容に関する詳細な説明や背景情報を、議事録やイシュートラッキングシステムのチケット番号などのリンクとして、cite属性で指定することができます

HTML 
<p>
    次の機能は削除されました。
    <del cite="https://example.com/changelog">
        削除された機能の詳細.....
    </del>
</p>

上の例では、cite属性が元のリソースである「取り消しや削除された機能の詳細」ページのURLを提供しています。

cite属性は、ユーザーがブラウザで閲覧する際にはこの属性や値は表示されませんが、ウェブページの管理者や検索エンジンなどはこの情報を活用できます。

datetime属性

<del>タグのdatetime属性は、削除された内容の日時を示します。

datetime属性も、cite属性と同様に<del>タグに必ずしも必要なわけではありません。しかし、この属性を使用することで、該当の削除内容が発生した正確な日時を示すことができます。これは、ドキュメントの更新履歴を管理したり、時間に基づく情報を伝えるのに非常に役立ちます。

datetime属性の有効な値

datetime属性は、HTMLで使用できる有効な形式の日時の値である必要があります。

次はdatetime属性を使用した例です。

HTML 
<p>
    次の機能は削除されました。
    <del cite="https://example.com/changelog" datetime="2022-11">
        削除された機能の詳細.....
    </del>
</p>

注意点

<del>タグは、段落の区切りを明確にする必要があります。
あいまいに段落の境界をまたいで使用してはいけません。次のコード例で確認してみましょう。

HTML 
<!-- 最初の例: 段落をまたぐ<del>タグの使用 -->
<aside>
    <!-- 注意: 以下のように使用してはいけません。 -->
    <del>
        <!-- あいまいに段落の境界をまたいで使用しています。 -->
        <p>私は果物が好きです。</p> <!-- 最初の段落開始 -->
        りんごは<em>美味しい</em>です。 <!-- 最初の段落終了: 段落の区切りが明確ではありません。 -->
    </del>
    <del>
        なしも美味しいです。 <!-- 2つ目の段落開始 -->
    </del> <!-- 2つ目の段落終了 -->
</aside>

<!-- 2つ目の例: 正しい構造での<del>タグの使用 -->
<aside>
    <!-- <del>タグがそれぞれを明示的に個別の段落として表現 -->
    <del>
        <p>私は果物が好きです。</p> <!-- 最初の段落開始 -->
    </del> <!-- 最初の段落終了 -->
    <del>
        りんごは<em>美味しい</em>です。 <!-- 2つ目の段落開始 -->
    </del> <!-- 2つ目の段落終了 -->
    <del>
        なしも美味しいです。 <!-- 3つ目の段落開始 -->
    </del> <!-- 3つ目の段落終了 -->
</aside>
  1. 最初の例では、<del>タグが二つの段落をまたいでいます。これは段落の区切りがなく、あいまいに段落の境界を越えて使用されている不適切な例です。
  2. 2つ目の例では、変更された部分をそれぞれ別々の<del>タグで区切り、各々を個別の段落として表現しています。これにより、より明確な構造が提供され、変更内容と段落の境界がはっきりと示されます。

したがって、2つ目の例のように<del>タグを使用する際は、変更内容と段落構造を明確に保つことが重要です。こうすることで、ドキュメントの構造が明確になり、ユーザーが変更内容を理解しやすくなります。

ブラウザ互換性

delタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<del> 1 12 1 4

仕様書

タグの仕様書
仕様書
<del> HTML Standard
#the-del-element

参考資料

関連項目