後から削除された部分であることを示すdelタグ【HTML】

delタグは「delete」の略であり、後から削除された部分である事を示します。
「追加された部分を示すinsタグ」と対をなす要素です。
昔はstrikeタグやsタグで示されていましたが、HTML5からは廃止となっています。

delタグの使い方

わざわざ削除して部分を残さなくてもいいとは思いますが、削除する前はこうだったという事を明記する場合には有効なタグとなります。

<p><del>変更前のテキスト</del>変更後のテキスト</p>

上記の内容で以下のように表示されます。

delタグで利用できる属性

delタグで利用できる属性と使い方は以下となります。

• class
• id
• cite : 変更理由の参照先(引用元の情報)を指定する属性
• datetime : 変更した日時を表す属性

<!-- cite -->
<p><del cite="https://www.test.com/">変更前のテキスト</del>変更後のテキスト</p>

<!-- datetime -->
<p><del datetime="2024-01-01">変更前のテキスト</del>変更後のテキスト</p>

属性の記述は必須では無く、ユーザーに見えるものでもありませんが、情報の管理がしやすくなる他、将来的に検索エンジン等のクローラーが情報を参照する可能性もあります。

delタグの使用場所についての違い

delタグは使用する場所によってインライン要素とブロック要素のどちらになるか変わります。
例えば、pタグの中に記述したらインライン要素、pタグの外に記述した場合はブロック要素となります。

<!-- インライン要素になる場合 -->
<p><del>変更前のテキスト</del>変更後のテキスト</p>

<!-- ブロック要素になる場合 -->
<del>
  <p>変更前のテキスト</p>
</del>
<p>変更後のテキスト</p>

また、以下のように段落ごとに記述する必要があり、複数の段落をまたいで記述してはいけません。

<!-- 間違った記述 -->
<del>
  <p>変更前のテキスト</p>
  <p>変更前のテキスト</p>
</del>

<!-- 正しい記述 -->
<del><p>変更前のテキスト</p></del>
<del><p>変更前のテキスト</p></del>

打ち消し線の色の変更

打消し線の色を変更する場合cssのcolorで指定するのですが、ちょっと面倒な記述が必要になります。
そのまま変更してしまうと、打消し線と同時に文字色も変更になってしまうので、spanタグを入れて別々に指定します。

<p><del><span>変更前のテキスト</span></del>変更後のテキスト</p>

del {
  color: red;
}
del span {
  color: #000;
}

上記のように指定すると以下のように文字色と打消し線の色が別々に指定できます。

さいごに

いかがでしたでしょうか。
中々使用する事は無いタグにはなりますが、使用する際は属性も含めしっかりと記述していきたいですね。