HTML에서 취소선(strikethrough) 텍스트를 표시하려면 과거에는 <strike>...</strike> 태그를 사용했습니다. 이 태그는 텍스트 가운데에 선을 그어 취소선 효과를 나타냅니다. 하지만 이 태그는 HTML 표준에서 더 이상 사용되지 않으며(deprecated), HTML5에서는 지원되지 않으므로 사용을 피해야 합니다.
대신 CSS의 text-decoration 속성을 사용하는 것이 권장됩니다. CSS 속성을 적용하려면 style 속성을 활용하면 됩니다. style 속성은 요소에 인라인 스타일을 지정하는 역할을 하며, HTML <p> 태그를 비롯한 다양한 요소에 사용할 수 있습니다. HTML5에서는 <strike> 태그를 지원하지 않으므로, 취소선은 반드시 CSS 스타일로 구현해야 합니다.
참고: HTML5에서 사용할 수 있는 대체 태그
HTML5에서는 의미를 담은 태그인 <s>(더 이상 정확하지 않은 텍스트)와 <del>(삭제된 텍스트)를 사용할 수도 있습니다. 이 태그들은 별도의 CSS 없이도 기본적으로 취소선을 표시하며, 텍스트의 의미를 명확하게 전달할 수 있어 접근성 측면에서도 유리합니다.
예제
아래 코드를 실행하면 HTML에서 취소선 텍스트가 어떻게 표시되는지 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Strikethrough text</title> </head> <body> <h1>Heading</h1> <p style="text-decoration: line-through;"> Strikethrough text </p> </body> </html>
실행 결과
