【insタグ】文書にテキストを追加して編集してみよう！「HTML・解説・初心者向け」- ノブレコ

★<ins>タグの特徴

<ins>の説明

<ins>とは

「insert（インサート）」の略で、挿入や追加の意味があります。

HTMLでは、既存の文書に「新たに追加されたテキスト」を示すためのタグです。

追加されたテキストは、下線が引かれてブラウザ上に表示されます。

<ins>とは反対の意味のタグで、削除を示す<del>タグというものもあります。

■使用目的

主に文書の編集や修正を後から行う場合に使います。

実は<ins>タグで囲んだ範囲が「追加した部分である」ということを、検索エンジンやクローラーに解釈してもらうために使用するという意図もあります。

追加したい部分を<ins>タグでマークアップしておくと、SEO対策の向上にも繋がるということですね。

■よく使う属性

【cite属性】

<ins>要素で追加したテキストで、その変更理由を説明するために他のサイトページなどのURLを記述する際に使用します。

【datetime属性】

<ins>要素を追加した日付や日時を指定するときに使います。

datetime属性で日付などを記述しておくと、検索エンジンなどで、いつ追加されたテキストなのかを判断することができるよになります。ちなみに時刻のみの値は受け付けません。

※ 属性は<ins>の開始タグ内に記述して使用することができます。

使用上の注意点

① 下線を引くためだけに使用しない。

下線を引きたいのであれば、CSSを使ってください。

CSSプロパティ

{ text-decoration: underline; }などで表現できます。

② ul要素の子要素にはできない。

ul要素は内容モデルにフローコンテンツとフレージングコンテンツを含まないため、ul要素の直下で<ins>要素を子要素として使うことはできません。

もしも「項目に順序がない<ul>要素」でテキスト追加する場合は、<ul>要素の子要素である<li>要素内で使用することができます。

③ 段落ちを跨ぐような使い方はできない。

例えば、１段目の段落ちに<ins>の開始タグだけを使用して、3段目の段落ちに<ins>の終了タグを使用するということはできません。このような記述の仕方は構文エラーとなります。

また構文エラーにはなりませんが、暗黙の段落ち（<p>タグで囲んでいない段落ちのこと）を跨ぐこともできませんので注意してください。

必ず１つの段落ちの子要素として<ins>要素を使ってください。

ちなみに、逆に<p>要素を<ins>タグで囲んで使いこともできます。

④ インライン要素とブロックレベル要素。

<del>と<ins>は、使う状況で、インライン要素とブロックレベル要素の2パターンに分かれます。

例えば、<del>や<ins>を段落ちの<p>タグに使用したとします。

・<p>要素の中で記述した場合は、インライン要素に。

・<p>要素を丸ごと囲んで使う場合は、ブロックレベル要素になります。

内容モデル

<ins>要素の内容モデルは「transparent」です。

トランスペアレントモデルは、親要素の内容モデルの引き継ぎをします。

アクセシビリティでの注意点

<ins>要素は、標準でARIAロールを持っていません。

ほとんどのスクリーンリーダなどでは<ins>要素に差し掛かると「追加」と読み上げられます。

ですから、テキストを後から追加した部分には、SEO対策の向上の観点からも<ins>要素でマークアップする方が良いでしょう。

補足として、<ins>要素の存在が常に伝わるとは限りませんので注意してください。

注意する例として、<ins>要素と<del>要素を同じテキスト内で併用するといったことが挙げられます。

<ins>の記述例

■通常の使用例

★HTML

★実行結果

まとめ

この記事では、<ins>タグについての解説をいたしました。

このタグは下線を引いて、それが新たに追加されたテキストであることを示すためのタグです。

SEO対策にも反映する場合があるので、追加したい内容があるときは是非使っておきたい要素ですね。

また属性を使って、追加した理由を説明するURLや、追加した日付を記述することもできるので、これらの属性も合わせて使用したいところです。

この記事が少しでも皆さんのお役に立てれば幸いです。

最後まで読んでいただき、ありがとうございました。またなん😃