HTML del / ins 태그, 웹에서 삭제와 추가를 정확하게 표현하는 법
웹사이트를 운영하다 보면 글을 수정하거나 가격을 바꾸는 일이 자주 발생합니다.
이때 단순히 글씨에 줄을 긋거나 밑줄을 긋는 것으로 끝내면 안 됩니다.
시맨틱 웹에서는 ‘삭제’와 ‘추가’의 의미를 정확하게 전달해야 합니다.
그 역할을 하는 태그가 바로 del과 ins입니다.
이번 글에서 이 두 태그를 완벽하게 알아봅니다.
Step 1. del 태그란?
del은 delete의 줄임말입니다.
텍스트에 취소선을 넣는 태그로, “이 내용은 삭제되었다”는 의미를 담고 있습니다.
<del>5,000원</del> 5,000원
이렇게 작성하면 단순한 디자인이 아니라, 문서의 변경 사항을 구조적으로 표현할 수 있습니다.
Step 2. ins 태그란?
ins는 insert의 줄임말입니다.
텍스트에 밑줄을 넣으며, “이 내용은 새로 추가되었다”는 의미를 전달합니다.
하지만 일부 브라우저나 환경에서는 밑줄이 보이지 않을 수도 있습니다.
그래서 대부분의 경우 text-decoration: underline; 속성을 명시적으로 지정하는 것이 좋습니다.
<ins style="text-decoration: underline;">4,000원</ins>4,000원
이렇게 하면 모든 환경에서 추가된 정보임을 확실하게 시각적으로 표현할 수 있습니다.
Step 3. 왜 꼭 del / ins을 써야 할까?
시맨틱 웹에서는 정보의 의미를 정확하게 전달하는 것이 중요합니다.
단순히 CSS로 취소선이나 밑줄을 그릴 수도 있지만, 검색엔진이나 스크린리더는 그걸 “삭제”나 “추가”로 인식하지 못합니다.
SEO와 접근성까지 생각한다면 꼭 del / ins을 사용해야 합니다.
Step 4. 자주 쓰는 예제 모음
실제 웹에서 del / ins은 이런 상황에서 많이 사용됩니다.
- 1. 삭제만 할 때
코드
<del>공지사항 삭제됨</del>렌더링 결과공지사항 삭제됨 - 2. 추가만 할 때
코드
<ins style="text-decoration: underline;">신규 공지사항 등록</ins>렌더링 결과신규 공지사항 등록
- 3. 가격 변경
가격이 바뀔 때원래 가격→ 새로운 가격으로 표시합니다.코드<del>5,000원</del> → <ins style="text-decoration: underline;">4,000원</ins>렌더링 결과5,000원→ 4,000원 - 4. 서비스 수정 공지
기존 내용을 삭제하고 새로운 내용을 추가할 때 사용합니다.코드<del>기존 서비스 제공 종료</del> <ins style="text-decoration: underline;">신규 서비스 시작</ins>렌더링 결과기존 서비스 제공 종료신규 서비스 시작 - 5. 블로그 수정 내역
글을 수정했을 때 삭제된 부분과 추가된 부분을 명확히 구분합니다.코드<del>오전 9시까지 배송</del> <ins style="text-decoration: underline;">오후 1시까지 배송</ins>렌더링 결과오전 9시까지 배송오후 1시까지 배송
정리하며
del과 ins는 단순한 꾸밈이 아닙니다.
삭제와 추가의 의미를 정확하게 표현하는 시맨틱 태그입니다.
CSS로 비슷하게 표현할 수 있지만, 검색엔진과 접근성을 고려한다면 반드시 del과 ins을 사용하고,
ins 태그는 밑줄을 명시적으로 추가하는 것이 좋습니다.
웹 개발자라면 이 태그를 정확히 이해하고 써야 합니다.