HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの```html タグとは？追加されたテキストを表示する使い方を解説

HTMLの <ins> タグは、文書に後から追加されたテキストを明示的に表示するための要素です。たとえば、新しく追記したコンテンツや更新された価格情報などを挿入した際に使用します。

ブラウザ上では、このタグで囲まれたテキストは自動的に下線付きで表示されるため、訪問者は「ここが新しく加えられた部分だ」とひと目で把握できます。削除されたテキストを示す <del> タグ（打ち消し線表示）と対になる存在であり、両者を組み合わせて使うことで、文書の編集履歴を視覚的に伝えられます。

<ins>タグで使える主な属性

<ins> タグでは、以下の2つの属性が利用できます。

  • cite：変更の理由や出典を説明するページのURLを指定します。追加されたテキストに関する補足情報への参照として機能します。
  • datetime：テキストが挿入された日付・時刻を指定します。「2023-04-01T10:30」のような形式で記述します。

<ins>タグの実装例

それでは、実際にHTMLで <ins> 要素を使ったサンプルを見てみましょう。ここでは、選手の詳細情報と報告時間を入力するフォームを作成しています。

<!DOCTYPE html>
<html>
<body>
<h2>Player Details with Reporting Time</h2>
<form>
<p>These are the <ins>details with reporting time</ins>:</p>
<fieldset>
<legend>New Details:</legend>
Player: <input type="text"><br>
Rank: <input type="number"><br>
Email: <input type="email"><br>
Reporting Time: <input type="time">
</fieldset>
</form>
</body>
</html>

実行結果

上記のコードを実行すると、<ins> タグで設定した部分が下線付きのテキストとして表示されます。

コードのポイント解説

この例では、<form> 要素の中に <fieldset> を配置し、その中に4つの入力項目を含めています。

<fieldset>
<legend>New Details:</legend>
Player: <input type="text"><br>
Rank: <input type="number"><br>
Email: <input type="email"><br>
Reporting Time: <input type="time">
</fieldset>

さらにその前の段落では、<ins> タグを使って「新しく追加されたテキスト」であることを明示しています。

<p>These are the <ins>details with reporting time</ins>:</p>

このように、「details with reporting time」の部分が追加された内容として下線付きで強調表示され、ユーザーにとって分かりやすい情報提示が可能になります。

まとめ

<ins> タグは、文書への追記・修正履歴を視覚的に伝えるシンプルながら有用な要素です。cite 属性で変更理由の参照先を、datetime 属性で追加日時を指定できるため、更新情報の透明性を高めたい場面でぜひ活用してみてください。

  1. HTML DOM Input Time の type プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Time type プロパティは、<input type=time> 要素の type 属性の値を取得または設定するために使用されます。このプロパティを使うことで、JavaScript から動的に入力フィールドの種類を確認したり変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 type の値を取得する場合 inputTimeObject.type type に値を設定する場合 inputTimeObject.type = stringValue 指定できる文字列値（stringValue） stri

  2. HTML DOMのInput Time stepUp()メソッドとは？使い方とサンプルコードを解説

    HTML DOMのInput Time stepUp()メソッドは、時刻入力フィールド（<input type=time>）の値を、指定した分数だけ増加させるためのメソッドです。例えば「10」を引数として渡せば、現在の時刻から10分進めた値に更新されます。 構文 stepUp()メソッドの基本的な構文は以下の通りです。引数には増加させたい分数を数値で指定します。引数を省略した場合のデフォルト値は「1」です。 inputTimeObject.stepUp(number) パラメータ number（省略可）：時刻フィールドを増加させる分数。デフォルトは1。 サンプルコード ここでは