insタグは「insert」の略であり、追加された部分である事を示します。
「後から削除された部分を示すdelタグ」と対をなす要素です。
insタグの使い方
記事などの文章に用いる事で、ユーザーや、検索エンジンのクローラーに追加された部分だという事を明確に伝える事ができます。
insタグで囲った部分には下線が表示されます。
<p>記事を作成しました。<ins>追加で情報を記載しました。</ins></p>上記の内容で以下のように表示されます。
記事を作成しました。追加で情報を記載しました。
insタグで利用できる属性
insタグで利用できる属性と使い方は以下となります。
- class
- id
- cite : 追加情報の参照先(引用元の情報)を指定する属性
- datetime : 追加した日時を表す属性
<!-- cite -->
<p>記事を作成しました。<ins cite="https://www.test.com/">追加で情報を記載しました。</ins></p>
<!-- datetime -->
<p>記事を作成しました。<ins datetime="2024-01-01">追加で情報を記載しました。</ins></p>属性の記述は必須では無く、ユーザーに見えるものでもありませんが、情報の管理がしやすくなる他、将来的に検索エンジン等のクローラーが情報を参照する可能性もあります。
insタグの使用場所についての違い
insタグは使用する場所によってインライン要素とブロック要素のどちらになるか変わります。
例えば、pタグの中に記述したらインライン要素、pタグの外に記述した場合はブロック要素となります。
<!-- インライン要素になる場合 -->
<p>記事を作成しました。<ins>追加で情報を記載しました。</ins></p>
<!-- ブロック要素になる場合 -->
<p>記事を作成しました。</p>
<ins>
<p>追加で情報を記載しました。</p>
</ins>また、以下のように段落ごとに記述する必要があり、複数の段落をまたいで記述してはいけません。
<!-- 間違った記述 -->
<ins>
<p>追加で情報を記載しました</p>
<p>追加で情報を記載しました</p>
</ins>
<!-- 正しい記述 -->
<ins><p>追加で情報を記載しました</p></ins>
<ins><p>追加で情報を記載しました。</p></ins>下線を消す方法
insタグでデフォルトで表示される下線を消したい場合はcssで指定します。
※下線があるとリンクと間違えてしまう可能性があるので、下線を消した方がいいかもしれません。
ins {
text-decoration: none;
}追加で情報を記載しました。
さいごに
いかがでしたでしょうか。
中々使用する事は無いタグにはなりますが、使用する際は属性も含めしっかりと記述していきたいですね。
