Thẻ del trong HTML
Bùi Tấn Lực - 1026
- 27/09/2025
Chức năng của Thẻ del trong HTML
Thẻ del trong HTML dùng để chỉ ra văn bản vừa bị xóa bằng cách css mặc định text-decoration bằng line-through gạch ngang chữ, thẻ này thường kết hợp thẻ ins để chỉ ra văn bản vừa thêm vào để thay thế văn bản đó.
Cú pháp của Thẻ del trong HTML
<del>vanbangachngang</del>
vanbangachngang: Văn bản gạch ngang.
Code Thẻ del trong HTML
Thẻ del mặc định trong HTML
<h1 style="color:blue">Thẻ del mặc định trong HTML</h1>
<p>Mình đã xóa <del>Màu đỏ</del> và thay bằng <ins>màu xanh dương</ins></p>
Css cho Thẻ del trong HTML
<!DOCTYPE html>
<html>
<head>
<title>Css cho Thẻ del trong HTML</title>
<style>
del{background:red;color:#fff}
ins{background:blue;color:#fff}
</style>
</head>
<body>
<h1 style="color:blue">Thẻ del mặc định trong HTML</h1>
<p>Mình đã xóa <del>Màu đỏ</del> và thay bằng <ins>màu xanh dương</ins></p>
</body>
</html>
Các trường hợp nên sử dụng thẻ del trong HTML
Thẻ del trong HTML thường được sử dụng khi muốn đánh dấu một phần nội dung đã bị xóa, thay đổi hoặc không còn được áp dụng trong tài liệu. Thay vì loại bỏ hoàn toàn đoạn văn bản cũ, thẻ này giúp người đọc nhận biết được sự thay đổi và hiểu rõ quá trình cập nhật nội dung.
Trong thực tế, thẻ del phù hợp với các trang có nội dung thường xuyên chỉnh sửa như bảng giá, tài liệu hướng dẫn, bài viết cập nhật thông tin hoặc các trang so sánh sản phẩm. Việc giữ lại nội dung cũ dưới dạng bị gạch ngang giúp tăng tính minh bạch và hỗ trợ người dùng theo dõi sự thay đổi.
Hiển thị nội dung đã thay đổi trong tài liệu
Một trong những cách dùng phổ biến của thẻ del là đánh dấu những nội dung không còn chính xác hoặc đã được thay thế bằng thông tin mới. Trình duyệt sẽ hiển thị phần văn bản bên trong thẻ del với đường gạch ngang, giúp người xem dễ dàng nhận ra phần nội dung đã bị loại bỏ.
Ví dụ, khi cập nhật một thông tin cũ trong bài viết, thay vì xóa trực tiếp đoạn văn bản trước đó, lập trình viên có thể dùng thẻ del để thể hiện sự thay đổi rõ ràng hơn.
<p>Giá cũ: <del>500.000đ</del></p>
<p>Giá mới: 350.000đ</p>
Cách trình bày này thường được sử dụng trong các chương trình khuyến mãi, danh sách sản phẩm hoặc tài liệu có lịch sử chỉnh sửa.
Kết hợp thẻ del với thẻ ins để thể hiện sự chỉnh sửa
Khi cần thể hiện cả nội dung bị xóa và nội dung được thêm mới, thẻ del có thể kết hợp với thẻ ins trong HTML. Trong đó, del đại diện cho phần thông tin cũ đã được loại bỏ, còn ins dùng để đánh dấu phần nội dung mới được bổ sung.
Sự kết hợp này giúp người đọc dễ dàng so sánh trước và sau khi chỉnh sửa, đặc biệt hữu ích trong tài liệu cộng tác, bài viết cập nhật hoặc hệ thống quản lý nội dung.
<p>
Phiên bản trước: <del>HTML là ngôn ngữ lập trình</del>
</p>
<p>
Phiên bản mới: <ins>HTML là ngôn ngữ đánh dấu dùng để xây dựng cấu trúc trang web</ins>
</p>
Việc sử dụng đúng hai thẻ này giúp nội dung trở nên trực quan hơn thay vì chỉ thay thế văn bản mà không giải thích sự thay đổi.
Lưu ý khi dùng thẻ del để tối ưu trải nghiệm người dùng
Mặc dù thẻ del giúp thể hiện nội dung đã xóa, nhưng không nên lạm dụng quá nhiều trong một trang web. Việc xuất hiện quá nhiều đoạn văn bản bị gạch ngang có thể khiến nội dung khó đọc và làm giảm trải nghiệm của người dùng.
- Chỉ sử dụng thẻ del khi cần thể hiện sự thay đổi hoặc loại bỏ nội dung có chủ đích.
- Không dùng thẻ del thay cho việc ẩn hoặc xóa nội dung không còn giá trị.
- Kết hợp với thẻ ins khi muốn trình bày rõ phần cũ và phần mới.
- Đảm bảo nội dung bên trong thẻ del vẫn có ý nghĩa đối với người đọc.
Sử dụng thẻ del đúng cách giúp tài liệu HTML trở nên rõ ràng hơn, đồng thời hỗ trợ người dùng hiểu được quá trình cập nhật nội dung thay vì chỉ nhìn thấy một phiên bản cuối cùng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ del trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
