HTML <ins> 요소는 문서에서 추가한 텍스트 범위를 나타냅니다. 문서 변경점 추적 기능 등에 사용할 수 있습니다. 반대로, <del> 요소는 문서에 새로 추가한 텍스트 범위를 나타냅니다.

불러오는 중...

<p>저 황소는 <del>숫소</del> <ins>수소</ins>인가 암소인가?</p>

특성

전역 특성을 포함합니다.

cite

회의록이나 이슈 링크처럼, 해당 변경사항을 설명하는 리소스의 URL입니다.

datetime

변경이 발생한 시점을 나타내는 날짜 문자열입니다. 시간도 포함할 수 있습니다. 유효한 ISO 8601 형식으로 지정하세요. 인식할 수 없는 잘못된 값을 지정한 경우 날짜를 지정하지 않은 것으로 취급합니다.

접근성 고려사항

대부분의 스크린 리더는 기본 설정에서 <ins> 요소의 존재를 표현하지 않습니다. 사용자가 반드시 <ins>가 있다는 것을 알아야 한다면 CSS ::before::after 의사 선택자의 content 속성을 사용하세요.

ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: ' [삭제 시작] ';
}

ins::after {
  content: ' [삭제 끝] ';
}

그러나 일부 스크린 리더 사용자는 필요한 정보만 들을 수 있도록 상세한 표현을 의도적으로 끄는 경우가 있습니다. 따라서 이렇게 임의로 표현을 강제하는 방법을 남용해서는 안되고, <ins>의 유무가 콘텐츠의 이해에 직접 영향을 줄 때만 적용하세요.

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefox
지원12지원지원1
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원4지원
cite
IEEdgeChromeSafariFirefox
지원12지원지원1
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원4지원
datetime
IEEdgeChromeSafariFirefox
지원12지원지원1
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원지원지원4지원
MDN BCD에서 가져오는 데이터입니다.

같이 보기

  • 반대로, 삭제한 텍스트를 나타내는 <del>

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)