HTML テキスト 挿入「ins要素」、削除「del要素」

<ここから挿入>挿入した文章<ここまで挿入>
<ここから削除>削除した文章<ここまで削除>

テキストを挿入する「ins要素」

 HTML文書を公開したのち、状況の変化などで文章の追記や挿入をすることがあります。
後から文章を追加・挿入する場合、追加・挿入したことがわかるように、「ins要素」を使います。
<ins>と</ins>で後から追加、挿入したという範囲を示すことができます。

 この「ins要素」は追記時に使わなければいけない、ということではありません。
昔は無かったけど今は新しく追加された、というようなときに、「ins要素」で追記した部分を明らかにしておくと、文章を見る人にとってもわかりやすくなります。

 ちなみに、「ins要素」の「ins」はInserted Text(挿入文)の略です。

追加した日時情報を指定する「datetime属性」

 「ins要素」には、追加した日時情報を指定する、「datetime属性」があります。
属性とは、日本語のHTMLであることを指定するためにHTML要素に指定した<html lang="ja">の「lang="ja"」の部分です。

 日時の指定の仕方は、「2014/10/29 21:30:00」の場合、日本時間では"2014-10-29T21:30:00+09:00"となります。
最後の+09:00は時差(タイムゾーン)のことで、協定世界時(UTC)より9時間進んでいるということです。協定世界時であればZをつけます。("2014-10-29T21:30:00Z")
詳しい表記の方法はWikipedia・ISO 8601のページにあるのでそちらを参照してください。

 日本時間「2014/10/29 21:30:00」を追加した場合、以下のようになります。

<ins datetime="2014-10-29T21:30:00+09:00">

テキストを削除する「del要素」

 HTML文書を公開したのち、状況の変化やミスなどで文章の削除をすることがあります。
後から文章を削除する場合、削除したことがわかるように、「del要素」を使います。
<del>と</del>で削除した範囲を示すことができます。

 「ins要素」と同じく、削除時に使わなければいけない、ということではありません。削除するべき部分を「del要素」で明らかにしておくと、文章を見る人にとってもわかりやすくなります。

 ちなみに、「del要素」のdelはDeleted Text(削除文)の略です。

削除した日時情報を指定する「datetime」属性

 「del要素」には、「ins要素」と同じように削除した日時情報を指定する、「datetime属性」があります。日付の指定の仕方も「ins要素」と同じです。
日本時間「2014/10/29 21:30:00」を追加した場合、以下のようになります。

<del datetime="2014-10-29T21:30:00+09:00">

サンプル

 今回説明した、「ins要素」要素と「del要素」要素を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>~</body>)に書いてください。

サンプルソースコード

この文章はもとからある文章です。<br>
<ins datetime="2014-10-29T22:10:00+09:00">ここは、2014/10/29 22:10:00に追記、</ins>
<del datetime="2014-10-29T22:10:00+09:00">ここは、2014/10/29 22:10:00に削除</del><br>

 (<br>とは「改行」を意味する要素です。)

表示結果

この文章はもとからある文章です。
ここは、2014/10/29 22:10:00に追記、ここは、2014/10/29 22:10:00に削除

「ins要素」と「del要素」のまとめと次回記事について

 今回説明した「ins要素」と「del要素」は、追加・削除に必須というわけではないのですが、後で追加・削除されたことがわかり便利です。

 次回は下線を引く「u要素」と打消し線を引く「s要素」の説明します。
以上、当サイト管理人のAsterismでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


上の画像に表示されている英数字を入力してください *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>