catnose
catnose
HTMLの<ins>タグは、文書に後から追加されたテキストを表します。「ins」は「insert（挿入の意味）」の略です。
<p>会員登録をします。<ins>次にメール認証を行います。</ins></p>
ニュースやブログ投稿などの文章に用いることで、読者やプログラム（例：検索エンジンのクローラー）に対して「この部分が追記されたよ」と明確に伝えることができます。
😺ただし「insタグを使ったから検索順位が上がる…」のようなSEO効果は期待できません。
insタグの使い方
<ins>タグは多くの場合、<del>タグと合わせて使われます。
✍️delタグは「削除」
<ins>とは反対に「delete（削除）」の意味を持つ<del>というHTMLタグもあります。<del>は文書から削除されたテキストを表します。
delタグと合わせて使い、文書を変更・修正する
<p>Amazon.comは
<del>オンラインの書店</del>
<ins>世界最大級のネット通販サイト</ins>
です。</p>
👆削除を意味する<del>と、追記を意味する<ins>を合わせて使うことで「削除して追記」つまり変更や修正を表すことができます。
HTMLで書かれた「資料」や「議事録」「ブログの投稿」「ニュース記事」などに後から修正を加えるときに有用です。
insには取り消し線が表示される
<ins>サンプルテキスト</ins>
主要ブラウザでは、<ins>内のテキストには下線が表示されます。これは以下のようなCSSが指定されているためです。
ブラウザのデフォルトCSS
ins {
text-decoration: underline;
}
下線を引きたいだけならCSSを使う
<ins>は、文書に追加されたテキストに対してのみ使います。単に取り消し線をひきたいだけならCSSを使いましょう。
.underline {
text-decoration: underline;
}
👆たとえばCSSでunderlineというclassのテキストには下線を引くように設定しておきます。あとはHTMLで下線を引きたい部分にそのclassを指定すればOKです。
insの下線を消す
逆にinsにデフォルトで表示される下線を非表示にしたい場合は、以下のCSSを追加します。
ins {
text-decoration: none;
}
😺デフォルトのように下線が引かれているとテキストリンクと間違えられる可能性があるため、指定しておくのが親切でしょう。
1つの段落をinsタグで囲んでも良い
<ins><p>追記した段落</p></ins>
👆段落ごと追記されたことを表すために、<p>を<ins>でマークアップしてもOKです。
<!-- 🙅不適切な例 -->
<ins>
<p>サンプルテキスト</p>
<p>サンプルテキスト</p>
</ins>
<!-- 🙆段落ごとにinsを使う -->
<ins><p>サンプルテキスト</p></ins>
<ins><p>サンプルテキスト</p></ins>
👆ただし、複数の段落が追加されたことを表すときには1つの段落ごとに<ins>を使うようにしましょう。
datetime属性で追加した日付を表す
<ins>タグのdatetime属性には「テキストを追加した日」を記入できます。
<p><ins datetime="2019-05-01">令和になりました。</ins></p>
👆2019年5月1日にテキストが追加されたと分かります。この日付はブラウザの画面に直接表示されるものではありません（＝読者が見るものではありません）。基本的には「自分や共同編集者が後から見たときに、いつ編集されたか分かるようにするため」に指定します。
😺場合によっては検索エンジンなどのロボット（プログラム）がdatetimeの日付を参考にする可能性があります。
😺もちろん必須ではありません。
cite属性で関連リンクを指定する
<ins>タグのcite属性には「テキストの追加に関するリンク（URL）」を指定することができます。「なぜ追記したのか」などの編集の意図が詳しく書かれたページのURLを貼るイメージです。
<p>期間は<del>2025年までです。</del><ins cite="https://example.com/logs/edit/">2030年までに延長になりました。</ins></p>
こちらもブラウザの画面には表示されません。自分が後から見たときに分かりやすいように記入するものです（もちろん必要な場合にのみ指定すればOKです）。