วิธีทำข้อความทับเส้น (Strikethrough) ใน HTML5 อย่างถูกต้อง

แท็ก <strike> ถูก deprecated ใน HTML5 ห้ามใช้ ต้องใช้ CSS property text-decoration: line-through แทน

วิธีที่ถูกต้อง (HTML5)

<p style="text-decoration: line-through;">ข้อความที่ทับเส้น</p>
<!-- หรือใช้แท็ก s สำหรับความหมาย semantic -->
<s>ข้อความที่ไม่ถูกต้องแล้ว</s>

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML Strikethrough text</title>
</head>
<body>
  <h1>Heading</h1>
  <p style="text-decoration: line-through;">Strikethrough text</p>
  <p>ราคาเดิม: <s>1,000 บาท</s> ราคาพิเศษ: 750 บาท</p>
</body>
</html>

ผลลัพธ์

Strikethrough text

ราคาเดิม: 1,000 บาท ราคาพิเศษ: 750 บาท

ความแตกต่างระหว่าง s และ del