HTML5 การใช้งาน s Tag

แท็ก <s> ใน HTML5 ใช้ในการแสดงข้อความที่เป็น “strikethrough” หรือขีดฆ่าข้อความนั้น ๆ โดยทั่วไปจะใช้เพื่อบอกว่าข้อความดังกล่าวไม่เกี่ยวข้องแล้วหรือไม่ถูกต้องอีกต่อไป แต่ยังคงแสดงไว้เพื่อการอ้างอิง ตัวอย่างเช่น การแสดงราคาเก่าที่ถูกยกเลิกไปแล้ว หรือข้อผิดพลาดในข้อความ

รูปแบบการใช้งานพื้นฐาน

<p>This is a <s>wrong text</s> and this is the correct one.</p>

ผลลัพธ์: ข้อความ “wrong text” จะถูกขีดฆ่า และข้อความ “and this is the correct one” จะแสดงตามปกติ

การใช้งานร่วมกับสไตล์ CSS

สามารถใช้ <s> ร่วมกับ CSS เพื่อปรับแต่งลักษณะการแสดงผลได้ เช่น เปลี่ยนสีของข้อความที่ถูกขีดฆ่า

<p>This product was <s style="color: red;">$50</s> but now it's only $30!</p>

ผลลัพธ์: ข้อความราคา $50 จะถูกขีดฆ่าด้วยสีแดง แสดงว่าราคานั้นถูกลดลงมา

การประยุกต์ใช้ใน E-commerce

ในเว็บไซต์ขายสินค้า เราสามารถใช้แท็ก <s> เพื่อแสดงราคาเก่าที่ถูกลดลง เช่น

<p>Original Price: <s>$100</s></p>
<p>Discounted Price: $75</p>

ผลลัพธ์: ราคา $100 จะถูกขีดฆ่าเพื่อแสดงว่ามีการลดราคาเหลือ $75

การประยุกต์ใช้ในเนื้อหาที่แก้ไข

ในเนื้อหาที่มีการแก้ไขข้อมูล เช่น บล็อกโพสต์ หรือบทความข่าว สามารถใช้แท็ก <s> เพื่อแสดงข้อมูลที่ถูกลบหรือแก้ไขแล้ว

<p>The event will be held on <s>July 20</s> August 10, 2024.</p>

ผลลัพธ์: วันที่ “July 20” จะถูกขีดฆ่า และแสดงวันที่ใหม่เป็น “August 10, 2024”

การใช้งานร่วมกับ JavaScript

เรายังสามารถประยุกต์การใช้งาน <s> ร่วมกับ JavaScript เพื่อเปลี่ยนแปลงลักษณะข้อความได้ตามเหตุการณ์ต่าง ๆ เช่น

<p id="text">This is the old price: <s>$100</s></p>
<button onclick="changePrice()">Update Price</button>

<script>
function changePrice() {
  document.getElementById("text").innerHTML = 'This is the new price: $80';
}
</script>

ผลลัพธ์: เมื่อกดปุ่ม “Update Price” ข้อความจะเปลี่ยนจากราคาเดิม $100 ที่ถูกขีดฆ่าเป็น $80 โดยอัตโนมัติ

สรุป

การใช้แท็ก <s> เหมาะสำหรับการแสดงข้อมูลที่ไม่เกี่ยวข้องหรือยกเลิกไปแล้ว แต่ยังคงแสดงไว้เพื่อการอ้างอิง และสามารถประยุกต์ใช้ในหลากหลายบริบท เช่น การแสดงราคาสินค้าเก่า ข้อมูลที่ถูกแก้ไข หรือข้อผิดพลาดในเนื้อหา