이 포스트는 HTML의 <ins> … </ins> 태그와 <del> … </del> 태그에 관한 내용입니다.
이름에서도 보다시피 <ins> 태그는 내용의 추가를 의미하는 태그이고 <del> 태그는 내용의 삭제를 의미하는 태그입니다. 얼핏 보면 오해할 수 있지만 <del> 태그는 내용 자체가 눈에 보이지 않게 하는 게 아니라 가로줄을 그어 삭제된 내용임을 표시하는 태그입니다. 이와 같은 기능을 하는 태그로 <s> 태그와 <strike> 태그가 있지만 <strike> 태그는 HTML5 표준에서 제외되고 <s> 태그는 존속하고 있습니다. 그리고 <ins> 태그는 밑줄을 그어 추가된 내용임을 표시하는 태그입니다. 이와 같은 기능을 하는 태그로 <u> 태그가 있습니다. CSS를 이용하면 두 태그가 어떻게 표시되는지를 변경할 수 있기 때문에 <ins> 태그라 하여 반드시 밑줄이 그어지기만 하는 것은 아니고 <del> 태그라 하여 반드시 가로줄이 그어지기만 하는 것은 아닙니다.
<ins>와 <del> 태그는 <u>와 <s> 태그와 같아 보이지만 다른 점이 있는데, 전자는 datetime 속성값을 이용하여 내용의 추가와 삭제가 언제 이루어졌는지를 의미적으로 지정할 수 있다는 점입니다. 그러나 후자는 그렇지 않기 때문에 가급적이면 전자를 사용할 것을 권장합니다. datetime 속성에 들어갈 값은 <time> 태그의 그것과 같은 형식입니다. 다만 특정 기간이 아닌 ‘특정 시점’으로 지정해야 한다는 점이 차이점입니다.
<p> 대한민국 제35-37대 서울시장 박원순은 2011년 10월 27일 취임하였으며 <del datetime="2020-07-10">2022년 6월 30일 퇴임할 예정이다.</del> <ins datetime="2020-07-10">2020년 7월 9일 성폭력 의혹이 제기되었고 다음날 북악산에서 숨진 채 발견되었다.</ins> </p>
이 예제는 다음과 같이 표시됩니다.
이와 같이 <del> 태그로 감싼 부분은 가로줄이 그려지고 <ins> 태그로 감싼 부분은 밑줄이 그려집니다. datetime 속성값은 눈에 보이지 않지만 의미적으로 그 시점에서 내용의 추가와 삭제가 이루어졌음을 나타내게 됩니다.