HTML5로 의미상 취소선 처리하는 방법

문서에서 무언가가 제거되었음을 시각적으로 표시하거나 (할 일, 위시리스트) 목록에서 교차하는 시각적 표현을 원하십니까? 할인 가격 구성 요소를 생성하시겠습니까? 이 결과에 일부 CSS를 쉽게 사용할 수 있지만 HTML5는 더 의미론적인 대안을 제공합니다. <del> 및 <s> 태그를 사용하여 코드에 의미를 부여하십시오! 👌

Hello <s>world!</s>

Hello world!
 

Hello <del>world!</del>

Hello world!
 

<del> 태그

무엇을합니까?

<del> 태그는 취소선이 있는 텍스트를 렌더링하고 문서에서 삭제된 일부 텍스트를 나타냅니다.

언제 사용합니까?

문서/페이지에서 항목이 제거되었음을 표시하려면 <del>를 사용하십시오.

사용 방법?

가장 일반적인 사용 사례는 소스 코드 차이 정보(예: GitHub에서 PR 변경 내용)를 표시하는 것입니다. <ins> 요소와 함께 사용하여 문서에 추가된 텍스트를 나타낼 수 있습니다.

예시

<p>Is There Life Before Coffee? <del>Yes</del> <ins>No!</ins></p>

<s> 태그

언제 사용합니까?

HTML<s> 태그는 취소선이 있는 텍스트를 렌더링하고 더 이상 관련이 없거나 정확하지 않은 항목(또는 텍스트)을 나타냅니다.

예시

<p><s>Today's Special: Chocolate pancakes</s> SOLD OUT</p>

<델> 대 <s>

두 태그 모두 동일한 시각적 표현을 갖기 때문에(예, 둘 다 취소선입니다) 어느 것을 사용해야 하는지 헷갈릴 수 있습니다.

다음과 같은 좋은 경우와 나쁜 경우를 살펴보겠습니다.

<들>

✅ 좋은 케이스 <s> : 할인

<span><s>100€</s> 99.99€</span>

⛔️ A bad case for <s> : 문서 편집

<델>

✅ <del>의 좋은 예 : 위시리스트/할일 목록

<ul>
    <li><s>2021 plans</s></li>
    <li>Social Distance</li>
    <li>Get vaccinated</li>
    <li>Travel 2022</li>
</ul>

⛔️ <del>에 대한 나쁜 사례: 더 이상 정확하지 않은 정보

스트라이크

특히 이전 코드베이스에서 작업한 경우 태그를 보았을 수 있습니다. 이것은 HTML4에서 더 이상 사용되지 않는 태그입니다. HTML5에서는 의미상 더 적절한 and 태그로 대체되었습니다. 설명서에서 알 수 있듯이 더 이상 사용하지 않는 것이 좋습니다!

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.

그것들은 충분히 의미론적입니까?

del 및 s 태그는 대부분의 화면 판독기에서 알리지 않습니다.::before 및::after 의사 요소와 함께 CSS 콘텐츠 속성을 사용하여 알릴 수 있습니다.

It is important to not abuse this technique and only apply it in situations where not knowing content has been deleted would adversely affect understanding

del::before,
del::after {
  /* CSS rules */
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

참조

<del> : The Deleted Text element

<s> : The striked Text element

What is the difference between <s> and <del> in HTML, and do they affect website rankings?

<s> vs <del> in HTML

HTML del tag