<del> 태그의 정의 및 사용법

<del> 태그는
HTML 문서에 삭제된(deleted) 텍스트 범위를 나타내는 데 사용됩니다.

삭제는 제거를 의미할 수 있으며, "변경 내용 추적"이나 내용의 차이점 정보를 렌더링할 때 사용할 수 있습니다.

HTML 
<h3>할 일 목록</h3>
<ul>
  <li>식기세척기 비우기</li>
  <li><del datetime="2019-10-11T01:25-07:00">학교 강의 보기</del></li>
  <li><del datetime="2019-10-10T23:38-07:00">음악 파일 더 받기</del></li>
  <li>프린터 구매하기</li>
</ul>
브라우저에서 실제 표시된 모습

<del> 태그는 주로 삭제된 텍스트를 강조하고 문서나 소스코드의 변경 내용을 시각적으로 보여주는 데 사용됩니다. 이 경우 문서나 소스 코드의 변경점 추적 등에 활용할 수 있습니다.
대부분의 브라우저는 텍스트에 취소선을 표시합니다.

<ins> 태그는 이와 반대되는 용도로 HTML 문서에서 추가된 텍스트 범위를 나타내는 데 사용됩니다.

알아두세요!
콘텐츠가 "제거" 또는 "삭제"의 의미보다는, 그저 콘텐츠 정보가 정확하지 않거나 생각이 바뀌어 취소되었다는 의미로 사용하려면 <s> 태그가 더 적합합니다.

<del> 태그의 cite 속성 사용법

<del> 태그의 cite 속성은
삭제된 내용에 대한 설명을 제공하는 리소스의 URL입니다.

<del> 태그에 cite 속성이 반드시 있어야 하는 것은 아닙니다. 그러나, cite 속성은 변경 내용의 원본이나 설명을 찾을 수 있는 링크를 제공함으로써, 문서의 사용자에게 추가 정보를 제공하는 데 도움을 줍니다.

HTML cite 속성 - 올바른 이해와 사용 방법

예를 들어, 변경 내용에 대한 자세한 설명이나 배경 정보를 회의록, 이슈 추적 시스템의 티켓 번호 등 대한 링크를 cite 속성으로 지정할 수 있습니다.

HTML 
<p>
    다음의 기능은 삭제되었습니다.
    <del cite="https://example.com/changelog">
        삭제된 기능에 대한 내역.....
    </del>
</p>

위 예제에서는 cite 속성이 원본 리소스인 "취소나 삭제된 기능에 대한 내역" 페이지의 URL을 제공합니다.

cite 속성은 사용자가 브라우저를 볼 때에는 이 속성이나 값이 표시되지 않지만, 이 웹 페이지의 관리자나 검색 엔진 등은 이 정보를 활용할 수 있습니다.

<del> 태그의 datetime 속성 사용법

<del> 태그의 datetime 속성은
삭제된 내용의 시간 및 날짜를 나타냅니다.

datetime 속성도 cite 속성처럼 <del> 태그에 반드시 있어야 하는 것은 아닙니다. 그러나 이 속성을 사용하면 해당 삭제 내용이 발생한 정확한 시간과 날짜를 나타내고 있습니다. 이것은 문서의 업데이트 히스토리를 관리하고 시간 기반 정보를 전달하는 데 많은 도움이 됩니다.

datetime 속성의 유효한 값

datetime 속성은 HTML에서 사용할 수 있는 유효한 형식으로 된 날짜와 시간 값이어야 합니다.

datetime 속성의 유효한 값 확인하기

다음은 datetime 속성을 사용한 예제입니다

HTML 
<p>
    다음의 기능은 삭제되었습니다.
    <del cite="https://example.com/changelog" datetime="2022-11">
        삭제된 기능에 대한 내역.....
    </del>
</p>

주의할 점

<del> 태그는 단락의 구분을 명확히 해야 합니다.
애매모호하게 단락의 경계를 넘어서 사용해서는 안 됩니다. 다음의 코드 예제로 보겠습니다.

HTML 
<!-- 첫 번째 예제: 단락을 가로지르는 <del> 태그 사용 -->
<aside>
    <!-- 주의: 아래와 같이 하지 말아야 합니다. -->
    <del>
        <!-- 애매모호하게 단락의 경계를 넘어서 사용했습니다. -->
        <p>나는 과일을 좋아해.</p> <!-- 첫 번째 단락 시작 -->
        사과는 <em>맛있어</em>. <!-- 첫 번째 단락 종료: 단락의 구분이 명시적이지 않습니다. -->
    </del>
    <del>
        배도 맛있어. <!-- 두 번째 단락 시작 -->
    </del> <!-- 두 번째 단락 종료 -->
</aside>

<!-- 두 번째 예제: 올바른 구조로 <del> 태그 사용 -->
<aside>
    <!-- <del> 태그가 명시적으로 각각을 개별 단락으로 표현 -->
    <del>
        <p>나는 과일을 좋아해.</p> <!-- 첫 번째 단락 시작 -->
    </del> <!-- 첫 번째 단락 종료 -->
    <del>
        사과는 <em>맛있어</em>. <!-- 두 번째 단락 시작 -->
    </del> <!-- 두 번째 단락 종료 -->
    <del>
        배도 맛있어. <!-- 세 번째 단락 시작 -->
    </del> <!-- 세 번째 단락 종료 -->
</aside>
  • 첫 번째 예제에서는 <del> 태그가 두 개의 단락을 가로지르고 있습니다. 이것은 단락의 구분 없이 애매모호하게 단락 경계를 넘어가는 부적절한 사용 예시입니다.
  • 두 번째 예제에서는 각각의 변경된 부분을 별도의 <del> 태그로 구분하고 각각을 개별 단락으로 표현하고 있습니다. 이것이 더 명확한 구조를 제공하며, 변경 내용과 단락 경계를 명확하게 나타냅니다.

브라우저 호환성

del 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<del> 1 12 1 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

del 태그의 명세서 사양
명세서 사양
<del> HTML Standard
#the-del-element

참고문헌

같이 보기