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

<s> 태그는
더 이상 정확하지 않거나 관련성, 유효성이 없는 콘텐츠를 나타냅니다.

주로 정보나 생각이 바뀌어 취소된 글자에 취소선을 그을 때 사용됩니다.

사용 예제

HTML 
<p>
    <s>오늘부터는 다이어트를 반드시 시작할거야!</s>
</p>
<p>아니야! 내일부터 하지 뭐 😅</p>
실제 적용된 모습

대부분의 브라우저에서는 <s> 태그의 텍스트 중앙을 가로지르는 취소선(CSS의 text-decoraion-line 속성의 값 line-through를 기본값으로 설정하고 있음)을 추가합니다.

아래의 예제처럼 약간의 CSS를 추가하면 <s> 태그의 사용 방법에 대해 좀 더 쉽게 이해할 수 있습니다.

CSS 
s {
    text-decoration-color: red;
    text-decoration-thickness: 2px;
}
실제 적용된 모습

이와 같이 <s> 태그는 콘텐츠가 "제거" 또는 "삭제"의 의미보다는,
그저 콘텐츠 정보가 정확하지 않거나 생각이 바뀌어 취소되었다는 의미로 사용됩니다.

주의하세요!
<s> 태그는 문서의 편집을 나타내는 "삭제", "제거" 등에는 사용할 수 없습니다.
문서의 편집을 나타내는 "삭제", "제거" 등의 텍스트 범위를 나타내려면 <del> 태그를 사용하세요.

속성

<s> 태그는 모든 글로벌 속성을 사용할 수 있습니다. 하지만, <s>만을 위한 관련 속성은 없습니다.

기술적인 문법 요약

s 태그의 구문 형식
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소
허용되는 콘텐츠 구문 콘텐츠
암시적인 role 속성 값 deletion
허용된 role 속성 값 모두(Any)

브라우저 호환성

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

명세서

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

같이 보기