訳注: この文書はHTML 5.1 Recommendationの日本語訳ではありません。代わりに最新のW3C HTML仕様を参照ください。

この日本語訳はメンテナンスされていません。この翻訳文書の代わりにWHATWG HTML日本語訳を参照することができます。

4.6 編集

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

4.6.1 ins要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
コンテンツ属性
グローバル属性
cite - 編集に関する引用またはより多くの情報源へのリンク
datetime - 変更日付および(任意の)時刻
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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.6.2 del要素

カテゴリ
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
コンテンツ属性
グローバル属性
cite - 編集に関する引用またはより多くの情報源へのリンク
datetime - 変更日付および(任意の)時刻
text/htmlにおけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値:
任意のrole値
許可されるARIAステートおよびプロパティー
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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.6.3 insdel要素の共通属性

cite属性は、変更を説明する文書のアドレスを指定するために使用してもよい。たとえば会議の議事録など、その文書が長い場合、著者が変更について説明する、その文書の特定の部分を指示するフラグメント識別子を含むことが推奨される。

cite属性が存在する場合、変更を説明する潜在的にスペースで囲まれた妥当なURLでなければならない。To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g. by server-side scripts collecting statistics about a site's edits), not for readers.

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

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

User agents must parse the datetime attribute according to the parse a date or time string algorithm. If that doesn't return a date or a global date and time, then the modification has no associated timestamp (the value is non-conforming; it is not a valid date string with optional time). Otherwise, the modification is marked as having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated time-zone offset information to determine which time zone to present the given datetime in.

This value may be shown to the user, but it is primarily intended for private use.

The ins and del elements must implement the HTMLModElement interface:

interface HTMLModElement : HTMLElement {
           attribute DOMString cite;
           attribute DOMString dateTime;
};

The cite IDL attribute must reflect the element's cite content attribute. The dateTime IDL attribute must reflect the element's datetime content attribute.

4.6.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.6.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.6.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>

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