1. 4.7 編集
      1. 4.7.1 ins要素
      2. 4.7.2 del要素
      3. 4.7.3 insdel要素の共通属性
      4. 4.7.4 編集と段落
      5. 4.7.5 編集とリスト
      6. 4.7.6 編集とテーブル

4.7 編集

insおよびdel要素は文書への編集を表す。

4.7.1 ins要素

Element/ins

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
datetime — 変更日付および(任意の)時刻
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLModElementを使用する。

ins要素は、文書への追加を表す

以下は1つの段落の追加を表す:

<aside>
 <ins>
  <p> I like fruit. </p>
 </ins>
</aside>

ここでaside要素内のすべてがフレージングコンテンツとしてカウントされるため、以下において、ただ1つの段落がある:

<aside>
 <ins>
  Apples are <em>tasty</em>.
 </ins>
 <ins>
  So are pears.
 </ins>
</aside>

ins要素は、暗黙の段落の境界を越えるべきでない。

次の例は、2つの段落、2つの部分に挿入される第2段落の追記を表す。この例において最初のins要素は、貧弱な形式と考えられる段落の境界をこのように横切る。

<aside>
 <!-- don't do this -->
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

次は、このマークアップのより良い方法である。このマークアップはより多くの要素を使用するが、どの要素も暗黙の段落の境界を越えない。

<aside>
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
 </ins>
 <ins datetime="2005-03-16 00:00Z">
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

4.7.2 del要素

Element/del

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
datetime — 変更日付および(任意の)時刻
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLModElementを使用する。

del要素は、文書からの削除を表す

del要素は、暗黙の段落の境界を越えるべきでない。

以下は、実施済み項目が完了した日付と時刻を線で消される"to do"リストを示す。

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

4.7.3 insdel要素の共通属性

cite属性は、変更を説明する文書のURLを指定するために使用してもよい。たとえば会議の議事録など、その文書が長い場合、著者は変更について説明するその文書の特定の部分を指す断片を含めることを勧める。

cite属性が存在する場合、変更を説明する潜在的にスペースで囲まれた妥当なURLでなければならない。対応する引用リンクを取得するために、属性値は、要素のノード文書に対して解析されなければならない。ユーザーエージェントは、ユーザーがそのような引用のリンクをたどることを可能にしてもよいが、これは主に読者のためでなく、(サイトの編集に関する統計を収集するサーバーサイドスクリプトによってなど)私的使用のために意図される。

datetime属性は、変更の日付と時刻を指定するために使用してもよい。

存在する場合、datetime属性値は、任意の時刻で妥当な日付文字列でなければならない。

ユーザーエージェントは、構文解析日付または時刻文字列アルゴリズムに従ってdatetime属性を解析しなければならない。それが日付またはグローバル日付および時刻を返さない場合、修正は関連するタイムスタンプを持たない(値は不適合であり、値は任意の時刻をもつ妥当な日付文字列ではない)。そうでなければ、変更は指定した日付またはグローバル日付および時刻で行われたものとしてマークされる。指定される値がグローバル日付および時刻である場合、ユーザーエージェントは、与えられる日時を提示するためにどの時間帯で決定するかの関連するタイムゾーンオフセット情報を使用すべきである。

この値はユーザーに示してもよいが、値は主に私的使用のために意図される。

insおよびdel要素はHTMLModElementインターフェイスを実装しなければならない:

HTMLModElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
[Exposed=Window]
interface HTMLModElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString cite;
  [CEReactions] attribute DOMString dateTime;
};

cite IDL属性は、要素のciteコンテンツ属性を反映しなければならない。dateTime IDL属性は、要素のdatetimeコンテンツ属性を反映しなければならない。

4.7.4 編集と段落

この節は非規範的である。

insおよびdel要素は、段落付けに影響しないので、段落が暗黙的に定義される(明示的なp要素のない)一部の場合において、insdel要素にとって、全体の段落または他の非フレージングコンテンツ要素と別段落の一部の両方にまたがることが可能である。たとえば:

<section>
 <ins>
  <p>
   This is a paragraph that was inserted.
  </p>
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 </ins>
 This is a second sentence, which was there all along.
</section>

p要素でいくつかの段落を包むことによってのみ、段落は第1段落の終わり、第2段落全体、insまたはdel要素によって包まれる第3段落の始まりを得る(以下は非常に紛らわしく、よく考えたグッドプラクティスでない):

<section>
 This is the first paragraph. <ins>This sentence was
 inserted.
 <p>This second paragraph was inserted.</p>
 This sentence was inserted too.</ins> This is the
 third paragraph in this example.
 <!-- (don't do this) -->
</section>

しかし、暗黙の段落が定義される方法のために、同じinsまたはdel要素を使用する、段落の終わりおよび次の段落の始まりをマークアップできない。代わりに、たとえば次のように、1つ(もしくは2つ)のp要素と2つのinsまたはdel要素を使用する必要がある:

<section>
 <p>This is the first paragraph. <del>This sentence was
 deleted.</del></p>
 <p><del>This sentence was deleted too.</del> That
 sentence needed a separate &lt;del&gt; element.</p>
</section>

上記で説明した一部の混乱のために、暗黙の段落の境界を越えるinsまたdel要素を持つ代わりに、著者は、常にp要素を持つすべての段落をマークアップすることが強く推奨される。

4.7.5 編集とリスト

この節は非規範的である。

olおよびul要素のコンテンツモデルは、子としてinsおよびdel要素を許可しない。リストは常に、他の場合に削除済みとしてマークされているだろうアイテムを含む、すべての項目を表す。

項目が挿入または削除されたことを示すために、insまたはdel要素はli要素のコンテンツの周囲に配置できる。項目が別のものに置き換えられていることを示すために、1つのli要素は、1つ以上のdel要素の後に1つ以上のins要素を持つことができる。

次の例において、空の状態で出発したリストが項目を持ち、時間をかけてリストから追加および削除される。強調された例における部分は、リストの"current"状態となる部分を表示する。しかし、リスト項目の番号は、編集を考慮しない。

<h1>Stop-ship bugs</h1>
<ol>
 <li><ins datetime="2008-02-12T15:20Z">Bug 225:
 Rain detector doesn't work in snow</ins></li>
 <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
 Water buffer overflows in April</ins></del></li>
 <li><ins datetime="2008-02-16T13:50Z">Bug 230:
 Water heater doesn't use renewable fuels</ins></li>
 <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
 Carbon dioxide emissions detected after startup</ins></del></li>
</ol>

次の例において、ちょうどフルーツで始まるリストは色のリストに置き換えられた。

<h1>List of <del>fruits</del><ins>colors</ins></h1>
<ul>
 <li><del>Lime</del><ins>Green</ins></li>
 <li><del>Apple</del></li>
 <li>Orange</li>
 <li><del>Pear</del></li>
 <li><ins>Teal</ins></li>
 <li><del>Lemon</del><ins>Yellow</ins></li>
 <li>Olive</li>
 <li><ins>Purple</ins></li>
</ul>

4.7.6 編集とテーブル

この節は非規範的である。

編集をテーブルに示すことが困難になるかもしれないので、テーブルモデルの一部を形成する要素は、insdel要素に対して許可しない複雑なコンテンツモデルの要件を持つ。

行全体または列全体が追加または削除されたことを示すために、その行または列の各セルの内容全体がinsまたはdel要素で(めいめいに)包むことができる。

ここでは、テーブルの行が追加されている:

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> Verdict
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
  <tr> <td> Portal              <td> Valve            <td> 10/10
  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
</table>

ここでは、列が削除されている(削除された時刻がまた指定され、理由を説明するページへのリンクがある):

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
</table>

一般的にいえば、より複雑な編集(たとえば、セルが削除され、後続のすべてのセルが上または左に移動するなど)を示す良い方法はない。