W3C

HTML 5.1

W3C Recommendation,

4.6. 편집

insdel 요소(element)들은 문서에 대한 편집을 나타냅니다.

4.6.1. ins 요소(element)

카테고리:
흐름(flow) 콘텐트.
어구(phrasing) 콘텐트.
분명한(palpable) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:
투명.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
cite - Link to the source of the quotation or more information about the edit
datetime - Date and (optionally) time of the change
허용된 ARIA 역할(role) 속성(attribute) 값들:
모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
HTMLModElement 인터페이스를 사용.

ins 요소(element)는 문서에 대한 삽입을 나타냅니다.

다음은 단일 문단의 삽입을 나타냅니다:
<aside>
  <ins>
  <p> I like fruit. </p>
  </ins>
</aside>

다음과 같이 할 경우, because aside 요소(element) 내 모든 것이 여기서 어구(phrasing) 콘텐트로 세기 때문에 단 하나의 문단만 존재합니다:

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

ins 요소(element)들은 암묵적 문단 경계들을 가로지르지 않아야(should) 합니다.

다음 예는 두 문단들의 추가를 보여주며, 두 번째 것이 두 개 부분들에 삽입되었습니다. 이 예에서 첫 번째 ins 요소(element)는 따라서 문단 경계를 가로지르며, 이는 잘못된 형식으로 간주됩니다.
<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>

여기 이것을 마크업하는 더 나은 방법이 있습니다. 더 많은 요소(element)들을 사용하지만, 암묵적인 문단 경계들을 가로지르는 요소(element)들은 없습니다.

<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 요소(element)

카테고리:
흐름(flow) 콘텐트.
어구(phrasing) 콘텐트.
이 요소(element)가 사용될 수 있는 컨텍스트:
어구(phrasing) 콘텐트가 기대되는 곳.
콘텐트 모델:
투명.
text/html에서 태그 생략:
어느 태그도 생략 가능하지 않습니다
콘텐트 속성(attribute)들:
범용 속성(attribute)들
cite - 인용구(quotation) 혹은 편집에 대한 더 많은 정보의 소스로의 링크
datetime - 변경의 날짜와 (선택적으로) 시간
허용된 ARIA 역할(role) 속성(attribute) 값들:
모든 역할(role) 값.
허용된 ARIA 상태(state)와 속성(property) 속성(attribute)들:
범용 aria-* 속성(attribute)들
허용된 역할(role)들에 적용 가능한 모든 aria-* 속성(attribute)들.
DOM 인터페이스:
HTMLModElement 인터페이스를 사용.

del 요소(element)는 문서로부터의 제거를 나타냅니다.

del 요소(element)는 암묵적 문단 경계를 가로지르지 않아야(should) 합니다.

다음은 완료된 것의 날짜와 시간을 줄을 그어 지워진 항목들이 있는 "할 일" 목록을 보여줍니다.
<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 요소(element)들에 공통된 속성(attribute)들

cite 속성(attribute)은 변경을 설명하는 문서의 주소를 명시하는데 사용될 수 있습니다. 그 문서가 긴 경우, 예를 들어 회의록의 경우, 작성자들은 변경을 논하는 그 문서의 특정 부분을 가리키는 문서 조각 식별자를 포함하도록 권장됩니다.

cite 속성(attribute)이 존재한다면, 그것은 변경을 설명하는 유효한 잠정적으로 공백으로 둘러 싸일 수 있는 URL이어야(must) 합니다. 해당하는 출처(citation) 링크를 얻기 위해, 속성(attribute)의 값은 요소(element)에 관련하여 반영되어야(must) 합니다. 유저 에이전트들은 그러한 출처(citation) 링크드를 따라가는 것을 허용할 수 있지만, 그것들은 독자들을 위한 것이 아닌, 주로 특정한 사용을 (예를 들어, 사이트의 편집들에 대한 통계를 수집하는 서버 사이드 스크립트들) 위해 의도된 것입니다.

datetime 속성(attribute)은 변경의 시간과 날짜를 명시하는데 사용 될 수 있습니다.

존재한다면, datetime 속성(attribute)이 값은 선택적인 시간을 가진 유효한 날짜 문자열이어야(must) 합니다.

유저 에이전트들은 날짜나 시간 문자열 해석 알고리즘에 따라 datetime 속성(attribute)을 해석해야(must) 합니다. 그것이 날짜세계 날짜와 시간을 반환하지 않는다면, 수정 사항은 연관된 타임스탬프를 (값은 비 규범적입니다; 이것은 선택적인 시간을 가진 유효한 날짜 문자열이 아닙니다) 가지지 않습니다. 그렇지 않으면, 수정 사항은 주어진 날짜세계 날짜와 시간에 만들어진 것으로 표기됩니다. 주어진 값이 세계 날짜와 시간이라면 유저 에이전트들은 주어진 일시(datetime)이 존재하는 표준 시간대를 결정하기 위해 연관된 표준시간대 편차 정보를 사용해야(should) 합니다.

이 값은 사용자에게 보여질 수 있지만, 주로 특정한 사용에 대해 의도된 것입니다.

insdel 요소(element)들은 HTMLModElement 인터페이스를 구현해야(must) 합니다:

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

cite IDL 속성(attribute)은 요소(element)의 cite 콘텐트 속성(attribute)을 반영해야(must) 합니다. dateTime IDL 속성(attribute)은 요소(element)의 datetime 콘텐트 속성(attribute)을 반영해야(must) 합니다.

4.6.4. 편집과 문단

이 섹션은 비규범적입니다.

insdel 요소(element)들은 문단화에 영향을 가지지 않기 때문에, 문단들이 암묵적 인 경우 (명시적인 p 요소(element)들 없이), insdel 요소(element)가 전체 문단이나 다른 비 어구(phrasing) 콘텐트들과 다른 문단의 일부 모두에 걸치는 것이 가능합니다. 예를 들어:

<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 요소(element)들 내 일부 문단들을 감싸는 것만으로, 동일한 insdel 요소(element)에 의해 씌워지는 한 개 문단의 말미, 두 번째 문단 전체, 세 번째 문단의 서두를 얻게 될 수 있습니다 (하지만 이것은 매우 혼란스럽고, 좋은 사례로 간주되지 않습니다):

<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>

하지만, 암묵적인 문단들이 정의되는 방법 때문에, 동일한 insdel 요소(element)를 사용하여 한 개 문단의 말미와 다음 문단의 서두를 마크업하는 것을 가능하지 않습니다. 대신 예를 들어 다음과 같이, 하나의 (혹은 두 개의) p 요소(element)들과 두 개의 insdel 요소(element)들을 사용해야(have to) 합니다:

<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>

부분적으로 위에 설명된 혼란의 이유로, 작성자들은 암묵적 문단들 경계들을 가로지르는 insdel 요소(element)들을 가지는 대신, 항상 모든 문단을 p 요소(element)를 가지고 마크업 하도록 강하게 권장됩니다.

4.6.5. 편집과 목록

이 섹션은 비규범적입니다.

olul 요소(element)들의 콘텐트 모델들은 자식으로 insdel 요소(element)들을 허용하지 않습니다. 목록들은 삭제된 것으로 표기된 항목들을 포함하여, 항상 모든 그들의 항목들을 나타냅니다.

항목이 삽입되었거나 삭제되었음을 나타내기 위해, insdel 요소(element)는 li 요소(element)의 콘텐츠를 둘러 감쌀 수 있습니다. 항목이 다른 것으로 교체되었다는 것을 나타내기 위해, 단일 li 요소(element)가 하나 이상의 ins 요소(element)들이 뒤따르는 하나 이상의 del 요소(element)들을 가질 수 있습니다.

다음 예에서, 빈 것으로 시작된 항목은 시간이 지남에 따라 추가되고 제거된 항목들을 가집니다. 예에서 강조되어진 부분은 목록의 "현재" 상태인 부분들을 보여줍니다. 하지만, 목록 항목 번호들은 편집들을 고려하지 않습니다.
<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. 편집과 표

이 섹션은 비규범적입니다.

표 모델의 일부를 형성하는 요소(element)들은 insdel 요소(element)들을 허용하지 않는 복잡한 콘텐트 모델을 가지므로, 표에 대한 편집을 나타내는 것은 어려울 수 있습니다.

전체 행 또는 전체 열이 추가 혹은 제거되었음을 나타내기 위해, 그 행이나 열 내의 각 칸의 전체 콘텐츠가 insdel 요소(element)들로 (각각) 감싸질 수 있습니다.

여기, 표의 행이 추가되었습니다:
<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>

일반적으로 말해서, 더 복잡한 편집들을 (예를 들어, 모든 이후 칸테들이 위나 왼쪽으로 이동시켜 칸이 삭제되는) 나타내는 좋은 방법은 없습니다.