HTML del·ins 태그: 삭제·추가 내용과 변경 날짜 표시하기

HTML의 <del>은 문서에서 삭제된 내용을, <ins>는 추가된 내용을 표시합니다. 기본 표시가 취소선과 밑줄이어도 핵심 역할은 변경의 의미를 전달하는 것이며, 실제 문서 버전 관리나 편집 이력을 자동으로 저장하는 기능은 아닙니다.

삭제와 추가를 함께 표시하는 전체 예제

다음은 연습용 일정 안내입니다. changes.html로 저장하고 브라우저에서 열면 이전 값과 새 값을 함께 볼 수 있습니다. 변경 날짜와 이유도 화면에 적어 색이나 선을 구분하기 어려운 상황에서 내용을 이해할 수 있도록 했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>일정 변경 표시 예제</title>
</head>
<body>
  <h1>실습 모임 일정 변경</h1>
  <p>시작 시간:
    <del datetime="2026-10-30" cite="#reason">오전 10시</del>
    <ins datetime="2026-10-30" cite="#reason">오전 11시</ins>
  </p>
  <p>이전 시작 시간은 오전 10시이며, 변경된 시작 시간은 오전 11시입니다.</p>
  <p id="reason">2026년 10월 30일, 준비 시간을 확보하기 위해 일정을 변경했습니다.</p>
</body>
</html>

일반적인 기본 스타일에서는 오전 10시에 취소선이, 오전 11시에 밑줄이 나타납니다. 실제 표시 모양은 CSS의 영향을 받습니다. del을 적용했다고 원문이 데이터에서 지워지는 것은 아니므로, 비밀번호나 개인정보처럼 공개하면 안 되는 내용을 감추는 용도로 사용해서는 안 됩니다.

datetime과 cite 속성의 역할

datetime은 해당 변경이 이루어진 날짜 또는 날짜·시간을 기록하는 선택 속성입니다. 예제의 2026-10-30은 연-월-일 형식의 날짜입니다. 구체적인 시각이 필요하면 2026-10-30T09:00:00+09:00처럼 시간대까지 명확히 기록할 수 있습니다. 날짜를 적는다고 문서가 그 시각에 자동으로 바뀌거나 예약 게시되지는 않습니다.

cite에는 변경 이유를 설명하는 자료의 URL을 지정합니다. 예제에서는 같은 문서의 설명 문단을 가리키는 #reason을 사용했습니다. 속성을 지정해도 설명이나 링크가 자동으로 화면에 나타나지 않으므로, 필요한 이유와 날짜는 독자가 읽을 수 있는 본문에도 표시합니다.

취소선·밑줄만 필요할 때와 구분하기

문서를 수정한 사실을 나타낼 때 del·ins를 사용합니다. 더 이상 유효하지 않은 정보에 취소선을 표시하는 경우에는 <s>의 의미도 검토하고, 단순한 장식은 CSS의 text-decoration으로 처리합니다. 선의 모양이 같다는 이유만으로 의미가 같은 것은 아닙니다.

화면 낭독기는 기본 설정에서 삭제·삽입의 시작과 끝을 모두 안내하지 않을 수 있습니다. 중요한 변경이라면 예제처럼 이전 값과 현재 값을 문장으로 설명하세요. 변경 전후를 색상만으로 구별하지 않고, 현재 유효한 내용이 무엇인지 명확히 적습니다. 요소의 정의와 속성은 MDN del 문서와 MDN ins 문서에서 확인할 수 있습니다.