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

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

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

<ins>ข้อความที่เพิ่มเข้ามา</ins>

คุณสมบัติ (Attributes) ของแท็ก <ins>

• cite: ใช้เพื่อระบุ URL ที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับสาเหตุหรือแหล่งที่มาของการเพิ่มข้อความนี้
• datetime: ใช้ระบุวันที่และเวลาเมื่อมีการเพิ่มข้อความ โดยต้องใช้รูปแบบ YYYY-MM-DDThh:mm:ssTZD ซึ่งเป็นรูปแบบวันที่-เวลาในมาตรฐาน ISO 8601

การใช้งานทั่วไป

การเน้นข้อความที่เพิ่มเข้ามา: ใช้เมื่อต้องการแสดงข้อความใหม่ที่ถูกเพิ่มเข้ามา เช่นในการแก้ไขบทความหรือเอกสาร

<p>นี่คือย่อหน้าเดิม <ins>และประโยคนี้ถูกเพิ่มเข้ามาใหม่</ins></p>

การติดตามการเปลี่ยนแปลงในเอกสาร: แท็ก <ins> มักใช้ร่วมกับแท็ก <del> ซึ่งใช้ระบุข้อความที่ถูกลบออกไป การใช้ทั้งสองแท็กนี้ช่วยให้เราสามารถติดตามการแก้ไขเวอร์ชันของเอกสารได้

<p>นี่คือเวอร์ชัน <del>เก่า</del> <ins>ใหม่</ins> ของประโยคนี้</p>

การเพิ่มข้อความพร้อมระบุแหล่งที่มา (Citation): การใช้แอตทริบิวต์ cite สามารถเชื่อมโยงไปยังแหล่งที่มาหรืออธิบายสาเหตุของการเพิ่มข้อความได้

<p>นโยบายใหม่นี้ได้รวมถึงแนวทางการปฏิบัติที่อัปเดต: <ins cite="https://example.com/guidelines">ดูเอกสารใหม่สำหรับรายละเอียดเพิ่มเติม</ins></p>

การเพิ่มข้อความพร้อมระบุวัน/เวลา: แอตทริบิวต์ datetime ใช้เพื่อระบุวันที่และเวลาที่มีการเพิ่มข้อความ ซึ่งช่วยในการติดตามเวลาแก้ไขหรือการเพิ่มข้อมูล

<p>มีการแก้ไขเนื้อหาเมื่อ: <ins datetime="2024-10-04T10:30:00+00:00">ประโยคนี้ถูกอัปเดตด้วยข้อมูลใหม่</ins></p>

การใช้แอตทริบิวต์ทั้งสองร่วมกัน: สามารถใช้ทั้งแอตทริบิวต์ cite และ datetime ร่วมกัน เพื่อให้มีทั้งข้อมูลเกี่ยวกับแหล่งที่มาของการเพิ่มข้อความ และเวลาที่ทำการเพิ่ม

<p>เอกสารโครงการได้รับการแก้ไข: <ins cite="https://example.com/revision" datetime="2024-10-01T12:00:00+00:00">ส่วนนี้ถูกเพิ่มเพื่อชี้แจงคำแนะนำ</ins></p>

การตกแต่งแท็ก <ins> ด้วย CSS

สามารถตกแต่งแท็ก <ins> ด้วย CSS ได้ เช่น การเปลี่ยนสีของการขีดเส้นใต้หรือการเน้นข้อความ

<style>
  ins {
    background-color: #e6ffe6;
    text-decoration: underline;
    text-decoration-color: green;
  }
</style>

<p>นี่คือ <ins>ข้อความที่เพิ่มใหม่พร้อมการตกแต่งพิเศษ</ins></p>

ข้อสังเกต

• การแสดงผลเริ่มต้น: แท็ก <ins> จะแสดงผลด้วยการขีดเส้นใต้ในเว็บเบราว์เซอร์ส่วนใหญ่
• การใช้งานหลัก: มักใช้ในการติดตามการแก้ไข การเพิ่มแหล่งที่มาสำหรับการเปลี่ยนแปลง และการควบคุมเวอร์ชันที่อิงตามเวลา