【HTML】del要素やins要素の使い方【テキストの削除や追加の箇所を示します】

Program

del要素やins要素を使うことで、テキストの削除や追加の箇所を示すことができます。

del要素とins要素の基本的な使い方

まず、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ins要素、del要素</title>
</head>
<body>
    <p>スーパーの生鮮食品の値段は、<del>仕入れ時500円</del><ins>閉店時300円</ins>です。</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、『スーパーの生鮮食品の値段は、仕入れ時500円閉店時300円です。』と書かれた文章があります。

そして、「仕入れ時500円」と書かれたフレーズはdel要素でマークアップされ、「閉店時300円」と書かれたフレーズはins要素でマークアップされています。

このため、ブラウザの表示結果の通り、「仕入れ時500円」には取り消し線が付けられ、テキスト中の削除されたフレーズであることが理解できます。

その一方で、「閉店時300円」には下線が付けられ、テキストに追加されたフレーズであることが理解できます。

datetime属性の使い方

では、ins要素にdatetime属性を使ってみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ins要素、del要素</title>
</head>
<body>
    <p>スーパーの生鮮食品の値段は、<del>仕入れ時500円</del><ins datetime="2022-10-01T18:00:00+09:00">閉店時300円</ins>です。</p>
</body>
</html>

先ほどのins要素に、datetime属性を追加で記述しました。追加したdatetime属性は、「2022-10-01T18:00:00+09:00」です。

datetime属性「2022-10-01T18:00:00+09:00」は、真ん中の文字「T」を挟んで、前半の「2022-10-01」が年月日の情報を示し、後半の「18:00:00+09:00」が時分秒の情報を示します。

年月日の情報である「2022-10-01」は、2022年10月1日を意味します。

時分秒の情報である「18:00:00+09:00」は、「18:00:00」が18時00分00秒を意味し、「+09:00」が、「日本におけるグローバル日時」を示しています。

ここで、「グローバル日時」は、「協定世界時(UTC)」をベースに指定する日時のことをいいます。

「協定世界時(UTC)」は、世界の公式な標準時刻のことを指し、天体観測から決定されるグリニッジ標準時とほぼ同じ時刻を意味します。

そして、日本のローカル時刻は「協定世界時(UTC)」に対して9時間進んでいるので、日本におけるグローバル日時として、「+09:00」を記述しています。

よって、ins要素でマークアップされた「閉店時300円」について、datetime属性で指定された時刻がブラウザで認識され、クローラー等にて情報収集されることになります。

また、サンプルで示したプログラムでは、テキストに追加された「閉店時300円」をins要素でマークアップした際に、ins要素内でdatetime属性を使って指定しましたが、「仕入れ時500円」をdel要素でマークアップする際に、同じようにdatetime属性を用いて、「仕入れ時500円」に関する年月日や時分秒に関する情報を指定することもできます。

なお、datetime属性により指定された日時等の情報「2022-10-01T18:00:00+09:00」は、ブラウザ上における表示として、特別に示されることはありません。

cite属性の使い方

次に、ins要素にcite属性を使ってみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ins要素、del要素</title>
</head>
<body>
    <p>スーパーの生鮮食品の値段は、<del>仕入れ時500円</del><ins cite="http://example.com/close.html">閉店時300円</ins>です。</p>
</body>
</html>

先ほどのins要素に、datetime属性の代わりに、cite属性を記述しました。記述したcite属性の値は「http://example.com/close.html」です。即ち、cite属性は、追加した「閉店時300円」に関するURLを指定する属性になります。

このため、ins要素でマークアップされた「閉店時300円」の元情報のリンク先として、cite属性で指定されたURLがブラウザで認識され、クローラー等にて情報収集されることになります。

cite属性による値(URL)の指定は、ins要素に限らず、del要素においても可能です。

なお、cite属性により指定された引用元「cite=”http://example.com/close.html”」は、ブラウザ上に表示されることはありません。

各種ブラウザでの表示結果

del要素やins要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
del要素
ins要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、del要素、ins要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました