シュウ

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

こんな方に読んでほしい

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

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

Chrome	Safari	Firefox	IE	Edge

ins要素について

ins要素とは、追加になった内容に下線を引いてくれます。
「ins」とは、「insert(追加、挿入の意味を表す)」の略になります。

前回解説した、del要素と合わせて使用する事が多いです。
del要素で削除した内容に対して、ins要素で追加内容を表すことができます。
書き方は以下のようになります。

<b>例1:</b>今月のイベント情報
<ol>
 	<li><del>4月1日 1部:12:00〜　終了</del><ins>2部:16:00〜</ins></li>
 	<li>4月2日 12:00〜</li>
 	<li>4月3日 12:00〜</li>
</ol>

<hr />

<b>例2:</b><del>〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del><br>
<ins>〇〇〇〇サイトの方は、2ヵ月期間延長になりました。</ins>

del要素の使い方

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

「del」とは、「delete(削除の意味を表す)」の略になります。

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

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

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

<del>〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del>
<ins cite="http://sample.com/about">〇〇〇〇サイトの方は、2ヵ月期間延長になりました。</ins>

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

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

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

<del datetime="2021-04-01">〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del>
<ins datetime="2021-04-10">〇〇〇〇サイトの方は、2ヵ月期間延長になりました。</ins>

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

s要素の使い方

s要素の使い方、無効になった内容に取り消し線を引こう!

無効になった内容や、正確ではなくなった内容に
取り消し線を引いてくれます。

まとめ

今回はこれで以上です。

Chrome	Safari	Firefox	IE	Edge

< 前の記事

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

次の記事 >

【HTML】sub要素の使い方、下付き文字を表示させよう!