【HTML】del要素の使い方、削除になった内容に線を引こう!

シュウ

今回は【HTML】del要素の使い方、削除になった内容に線を引こう!
の解説になります！

こんな方に読んでほしい

HTMLを学び始めた方へ
HTMLについて学びたい方へ
今回はdel要素(削除になった内容)について解説しております。

左の図が、del要素を指定なしの場合は、通常通りのテキスト表示になります。
右の図が、del要素を指定することにより、削除になった内容に線を引いてくれます。

Chrome	Safari	Firefox	IE	Edge

[記事の内容]

del要素について

del要素とは、削除になった内容に線を引いてくれます。
「del」とは、「delete(削除の意味を表す)」の略になります。

del要素を使わずにコードを削除すれば、良いと思う方もいますが、
削除前の記述を残すことで、ユーザーが削除の内容を理解しやすいメリットもあります。
書き方は以下のようになります。

del要素について

例1:今月のイベント情報

~~4月1日 12:00〜　終了~~
4月2日 12:00〜
4月3日 12:00〜

例2:~~〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。~~

<b>例1:</b>今月のイベント情報
<ol class="s-list">
 	<li><del>4月1日 12:00〜　終了</del></li>
 	<li>4月2日 12:00〜</li>
 	<li>4月3日 12:00〜</li>
</ol>

<hr />

<b>例2:</b><del>〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del>

使用できる属性

cite属性
削除した内容についてのURLを指定します。
datetime属性
削除した日時を指定します。

cite属性(削除した内容についてのURL)について

cite属性とは、削除した内容についてのURL(説明に関するページ)を指定します。

ブラウザ画面では表示されません。
開発者(記述者)が、後で見たときに分かりやすいようにする為です。

cite属性について

~~〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。~~

<del cite="http://sample.com/">〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del>

datetime属性(削除した日時)について

datetime属性とは、削除した日時を指定します。
今回は、「年月日」の指定のみでしたが、更に詳しく指定できます。

STEP 01	「年月日」例:2021-04-01
STEP 02	「時分秒」例:12:00:00
STEP 03	「年月日T時分秒」例:2021-04-01T12:00:00 年月日と時分秒Tで繋げます。
STEP 04	「+9:00を付ける」例:2021-04-01T12:00:00+9:00 UTC（協定世界時）とJST（日本標準時）の時差が9時間にたる為、「+9:00」を付けます。

ブラウザ画面では表示されません。
開発者(記述者)が、後で見たときに分かりやすいようにする為です。

datetime属性

~~〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。~~

<del datetime="2021-04-01">〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del>

ポイント！
今回は、del要素について解説しました。
del要素は、削除になった内容に線を引いてくれます。
似たような要素にs要素があります。
s要素は、無効になった内容や、正確ではなくなった内容に取り消し線を引いてくれます。
必ず、使い分けて使用しましょう。下記に関連記事を載せておきます。

s要素の使い方