insタグ -文書内に追加されたテキストを示す｜HTML辞典
<ins>タグとは？
<ins> タグは、文書内に追加されたテキストを示すためのタグです。
文章の変更履歴を明確にするために使用され、SEO にも有利とされています。
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<ins> は 開始タグ（<ins>）と閉じタグ（</ins>）の両方が必要 です。
基本的な記述方法
<p>この製品は <ins>新機能付き</ins> になりました！</p>
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
cite | 変更の根拠となる URL を指定 | <ins cite="https://example.com">追加テキスト</ins> |
datetime | 変更された日時を指定 | <ins datetime="2024-07-01T12:00:00Z">追加テキスト</ins> |
cite と datetime の使用例
<p>利用規約が変更されました:</p>
<p><ins cite="https://example.com/terms" datetime="2024-07-01T12:00:00Z">新しい利用規約を確認してください。</ins></p>
CSSを使ったデザイン変更
<ins> のデフォルトのスタイルは 下線（underline） ですが、スタイルをカスタマイズできます。
ins {
text-decoration: none;
color: green;
font-weight: bold;
background-color: #e6ffe6;
}
適切な使用例
✅ 追加された情報を明示する
<p>このサービスには <ins>無料トライアル</ins> も含まれます。</p>
✅ 変更履歴を残しながら更新を示す
<p>本日の営業時間: <ins>9:00 AM - 8:00 PM</ins></p>
✅ cite と datetime を使用して、情報の出典と変更日時を示す
<p><ins cite="https://example.com/news" datetime="2024-07-01T09:00:00Z">新機能が追加されました。</ins></p>
適切でない使用例（誤った使い方）
❌ <ins> を単なる強調目的で使用する
<!-- NG: 文章の強調として使用 -->
<p>この製品は <ins>とても便利</ins> です！</p>
✅ 正しい書き方（追加情報として使用）
<p>この製品には <ins>新しい機能</ins> が追加されました。</p>
❌ <ins> を削除された情報に使用する（削除部分には <del> を使う）
<!-- NG: 削除部分を <ins> でマークアップ -->
<p><ins>旧モデル</ins> は販売終了しました。</p>
✅ 正しい書き方（削除部分には <del> を使用）
<p><del>旧モデル</del> は販売終了しました。</p>
<ins>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<ins> | 追加されたテキストを示す | 下線が適用される | 文書の更新履歴、修正部分の表示 |
<del> | 削除されたテキストを示す | 取り消し線が適用される | 変更前の内容を保持 |
<strong> | 重要なテキストを示す | 太字で表示 | 強調表現 |
使用上の注意点
✅ <ins> は新しく追加された情報を示す際にのみ使用する
- 単なる強調やデザイン目的では使用しない。
✅ <del> と組み合わせて変更履歴を明確にする
<del>で削除部分を示し、<ins>で新しい情報を示す。
✅ cite や datetime を適切に活用する
- 変更の出典や日時を明示することで、情報の透明性を向上できる。
関連タグ
まとめ
<ins> タグは、HTML 文書内で 新しく追加された情報を示すためのタグ です。
変更履歴を明示し、SEO やアクセシビリティの向上に役立ちます。
