×

Cách sử dụng thẻ <ins> và <del> để hiển thị văn bản chèn và xóa trong HTML

Trong HTML, việc sử dụng các thẻ <ins> và <del> giúp dễ dàng biểu thị những thay đổi trong nội dung văn bản, đặc biệt là các đoạn văn bản được thêm vào hoặc xóa đi. Điều này không chỉ giúp người đọc dễ dàng nhận biết các thay đổi mà còn hỗ trợ trong việc theo dõi và kiểm tra các phiên bản khác nhau của tài liệu.

Thẻ <ins>

Thẻ <ins> được sử dụng để hiển thị văn bản được chèn vào tài liệu. Khi sử dụng thẻ này, trình duyệt thường sẽ mặc định hiển thị văn bản được chèn dưới dạng gạch chân. Dưới đây là cú pháp cơ bản:

<ins>Đoạn văn bản được chèn vào.</ins>

Ví dụ cụ thể:

<p>Đây là một đoạn văn bản <ins>được chèn vào</ins> trong tài liệu HTML.</p>

Kết quả trình duyệt sẽ hiển thị như sau:

Đây là một đoạn văn bản _được chèn vào_ trong tài liệu HTML.

Thẻ <del>

Ngược lại, thẻ <del> được sử dụng để biểu thị văn bản đã bị xóa khỏi tài liệu. Văn bản trong thẻ này thường sẽ xuất hiện với gạch ngang trên trình duyệt, cho biết nó đã được xoá bỏ. Cú pháp cơ bản như sau:

<del>Đoạn văn bản đã xóa.</del>

Ví dụ cụ thể:

<p>Đây là một đoạn văn bản <del>đã bị xóa</del> trong tài liệu HTML.</p>

Kết quả trình duyệt sẽ hiển thị như sau:

Đây là một đoạn văn bản ~đã bị xóa~ trong tài liệu HTML.

Kết hợp <ins> và <del>

Trong một số trường hợp, chúng ta có thể sử dụng kết hợp cả hai thẻ để cho thấy sự thay đổi từ đoạn văn bản cũ sang đoạn văn bản mới. Ví dụ:

<p>Đây là đoạn văn bản <del>đã bị xoá</del> và <ins>được chèn mới</ins> trong tài liệu HTML.</p>

Kết quả trình duyệt sẽ hiển thị như sau:

Đây là đoạn văn bản ~đã bị xoá~ và _được chèn mới_ trong tài liệu HTML.

Sử dụng CSS để tăng cường trình bày

Nếu muốn tùy chỉnh hiển thị của các thẻ này, chúng ta có thể áp dụng CSS. Ví dụ:

<style>
  del {
    color: red;
    text-decoration: line-through;
  }
  ins {
    color: green;
    text-decoration: underline;
  }
</style>

Với đoạn CSS này, thẻ <del> sẽ hiển thị văn bản màu đỏ và có gạch ngang, trong khi thẻ <ins> sẽ hiển thị văn bản màu xanh lá cây và có gạch chân.

Ứng dụng trong thực tế

Các thẻ <ins><del> rất hữu ích khi làm việc với các tài liệu cần theo dõi sự thay đổi, ví dụ như bài viết, báo cáo hoặc mã nguồn. Chúng cho phép người dùng dễ dàng nhận ra những phần nội dung nào đã được thay đổi hoặc thêm mới so với phiên bản trước.

Tóm lại, việc sử dụng thẻ <ins><del> không chỉ giúp văn bản rõ ràng hơn mà còn cung cấp một cách hiệu quả để theo dõi và quản lý sự thay đổi trong tài liệu HTML.

Comments