追加された部分であることを示すinsタグ【HTML】

最終更新日:

公開日:2024-07-12

ページ内に広告が含まれています。
追加された部分であることを示すinsタグ【HTML】

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;
}

追加で情報を記載しました。

さいごに

いかがでしたでしょうか。
中々使用する事は無いタグにはなりますが、使用する際は属性も含めしっかりと記述していきたいですね。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP