完全無料!授業料0円のプログラミング教室特集はこちら

【insタグとは】訂正された追記テキストを表すHTMLタグ

【insタグとは】訂正された追記テキストを表すHTMLタグ

一年前に書いたブログ記事の情報が古くなっちゃったな。

内容を書き換えたいけど、普通に削除して、新情報を書けば良いのだろうか…?

追記した情報であることを伝えるにはどうしたら良いの?

 

こんな疑問を解決する記事です。

HTMLで追記情報を示すには、<ins>というタグを使います。

本記事で、<ins>の使い方を解説するので参考にどうぞ。

 

スポンサードサーチ

【insタグとは】意味と基本を解説

【insタグとは】意味と基本を解説

<ins>とは「Insert(インサート)」の略でして、挿入という意味の英単語から来ています。

“挿入する”。つまり、新たに文言を書き加えるという目的で使われるHTMLタグです。

ニュースやブログ記事に用いることで、読者や検索エンジンのクローラーに「この部分は新しく追記された箇所です」というのを知らせることができます。

 

insタグの書き方

<ins>の書き方は簡単です。

 

insタグの書き方

<p>江戸時代後の日本の元号は、明治、大正、昭和、平成、<ins>令和</ins>です。</p>

江戸時代後の日本の元号は、明治、大正、昭和、平成、令和です。

 

平成のときにブログの記事を書いていて、令和になってから新しく元号を追記したいなら、このようになります。

<ins>で追記した部分には下線が引かれます。

 

このように、<ins><p>の中で使うこともできるし、<p>をまるっと囲むこともできます。

 

pタグをまるっと囲む

<p>江戸時代後の日本の元号は、明治、大正、昭和、平成です。</p>
<ins><p>2019年5月に令和になりました。</p></ins>

江戸時代後の日本の元号は、明治、大正、昭和、平成です。

2019年5月に令和になりました。

 

注意点として、<ins>の中に2つ以上の<p>は使えません。

段落を2つ以上追記したいなら、それぞれを<ins>で囲みましょう。

 

delタグ(取り消し)と合わせて使う

<ins>は、情報の取り消しを示す<del>(デルタグ)と合わせて使われることが多いです。

» 【delタグとは】取り消し線を引くためのhtmlタグを解説

 

delタグと合わせて使う

<p>江戸時代後の日本の元号は、明治、大正、昭和です。そして、最新の元号は<del>平成</del>です。</p>
<ins><p>2019年5月に令和になりました。</p></ins>

江戸時代後の日本の元号は、明治、大正、昭和です。そして、最新の元号は平成です。

2019年5月に令和になりました。

 

このように、<del>で文章を削除して、<ins>で追記することにより、情報の変更や修正を表すことができるので、資料やニュースを後から追記する場合に便利な使い方ですね。

 

下線を引きたいだけならCSSで

すでに述べた通り、<ins>で囲った部分には、下線が引かれます。

ですが、単純に“下線を引きたいから”というデザイン目的の理由で<ins>を使うのはやめましょう。

デザインとして下線を引きたいなら、<span>で囲んでCSSを当てるのが賢明です。

 

デザイン目的の下線を引く

HTML

<p>ここに<span class="underline">下線</span>を引きます。</p>
CSS

.underline {
 text-decoration: underline;
}

 

insタグの詳細設定

<ins>には属性を追記することで、追記内容の詳細を書き加えることが可能です。

これによって、ブラウザ上の見た目に変化がああるわけではありませんが、検索エンジンのクローラーに追記情報の詳細を伝えることができるようになります。

必須ではないので、必要だったら加えるくらいの使い方でOKです。

 

追記の日時を指定する

その情報がいつ追記されたのかを示すための指定方法です。

ここでは、datetimeという属性を指定します。

 

datetimeで日時指定

<p>江戸時代後の日本の元号は、明治、大正、昭和、平成、<ins datetime="2019-05-01">令和</ins>です。</p>

令和に変わったのは、2019年5月1日なので、その日付を入れると上記のようになりますね。

日付は「-(ハイフン)」で指定し、時間まで指定したければ「:(コロン)」を使えばOKです。

 

引用元の情報を記載する

その情報が追記された理由を示すための関連リンクを示しておくと、追記情報の信ぴょう性も高まります。

この場合は、cite属性を使いましょう。

 

citeで関連リンク指定

<p>江戸時代後の日本の元号は、明治、大正、昭和、平成、<ins cite="https://ja.wikipedia.org/wiki/reiwa">令和</ins>です。</p>

これで、この情報が追記された根拠を、関連リンクと結びつけることが可能になります。

 

スポンサードサーチ

まとめ:情報を更新したら追記タグ(ins)を使おう

まとめ

本記事では、追記情報を示す<ins>の使い方をまとめました。

情報を更新する場合は、単純に書き換えるのではなく、<ins>を使って“ここを変更したよ”というのを適切に伝えることを心がけましょう。

おわり。