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

<ins> 태그는
HTML 문서에 추가된(inserted) 텍스트 범위나 삽입된 콘텐츠를 나타내는 데 사용됩니다.

사용 예제

추가된 텍스트 범위

HTML 
<p>내가 가장 좋아하는 색은 <del>빨강입니다.</del> <ins>파랑입니다.</ins></p>
브라우저에서 실제 표시된 모습

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

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

# 삽입된 콘텐츠

주로 제 삼자(third party)가 제공하는 광고의 태그로 많이 사용됩니다. 광고는 웹페이지에 삽입된 콘텐츠의 일종이기 때문입니다.

다음은 Google의 광고 시스템인 'Google AdSense'에서 사용하는 <ins> 태그 예제입니다.

HTML 
<ins class="adsbygoogle">
    <!-- 광고 소재 -->
</ins>

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

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

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

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

예를 들어, 변경 내용에 대한 자세한 설명이나 배경 정보를 포함하는 웹 페이지, 미팅 기록, 문제 해결 시스템에서의 티켓, 또는 관련 문서에 대한 링크를 cite 속성으로 지정할 수 있습니다.

HTML 
<p>
    최신 업데이트에 대한 설명입니다.
    <ins cite="https://example.com/changelog">
        최신 업데이트 내역.....
    </ins>
</p>

위 예제에서는 cite 속성이 원본 리소스인 "최신 업데이트 내역" 페이지의 URL을 제공합니다.

cite 속성은 사용자가 웹 페이지를 볼 때는 cite 속성의 값이 표시되지 않습니다. 그러나 웹 페이지의 저작자나 웹 개발자, 검색 엔진 등은 이 정보를 활용할 수 있습니다.

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

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

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

datetime 속성의 유효한 값

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

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

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

HTML 
<p>
    최신 업데이트에 대한 설명입니다.
    <ins cite="https://example.com/changelog" datetime="2022-11">
        최신 업데이트 내역.....
    </ins>
</p>

주의할 점

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

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

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

따라서 두 번째 예제처럼 <ins> 태그를 사용할 때는 변경 내용과 단락 구조를 명확하게 유지하는 것이 중요합니다. 이렇게 하면 문서의 구조가 명확해지고 사용자가 변경 내용을 이해하기 쉬워집니다.

브라우저 호환성

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

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

명세서

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

참고문헌

같이 보기