HTML의 <del> 태그는 문서에서 삭제된 텍스트를 나타낼 때 사용합니다. 이 태그로 감싼 텍스트에는 자동으로 취소선(strikethrough)이 그어지기 때문에, 내용이 수정되었거나 더 이상 유효하지 않다는 사실을 시각적으로 명확하게 전달할 수 있습니다.
<del> 태그의 주요 속성
<del> 태그에서 사용할 수 있는 대표적인 속성은 다음과 같습니다.
- cite − 해당 텍스트가 삭제된 이유를 설명하는 문서의 URL을 지정합니다.
- datetime − 텍스트가 삭제된 날짜와 시간을 지정합니다.
<del> 태그 사용 예제
이제 HTML에서 <del> 요소를 실제로 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html> <html> <body> <h2>Player Details with Reporting Time</h2> <p>These are the <ins>details with reporting time</ins></p> <form> <fieldset> <legend>New Details −</legend> Player − <input type="text"><br> Rank − <input type="number"><br> Email − <input type="email"><br> Reporting Time − <input type="time"> </fieldset> </form> <p><del>All data captured before the World Cup.</del></p> </body> </html>
실행 결과
위 코드를 실행하면 아래와 같은 화면이 출력됩니다. 삭제 처리된 문장 전체에 취소선이 그어져 있는 것을 확인할 수 있습니다.
위 예제에서는 <del> 요소를 사용해 다음 문장을 삭제 처리했습니다.
<del> All data captured before the World Cup. </del>
결과적으로 브라우저 화면에서 해당 텍스트 위에 취소선이 표시되는 것을 볼 수 있습니다. 참고로 <del> 태그는 반대 개념인 <ins>(삽입된 텍스트) 태그와 함께 사용하면 문서의 수정 이력을 더욱 직관적으로 표현할 수 있습니다.