Để hiển thị văn bản gạch ngang trong HTML, chúng ta có thể sử dụng thẻ <s>. Thẻ này thường được dùng để biểu thị rằng văn bản bên trong nó không còn đúng hoặc không còn thích hợp sử dụng. Khi một đoạn văn bản được bao bọc bởi thẻ <s>, trình duyệt sẽ hiển thị nó với một đường gạch ngang giữa, giúp người đọc dễ dàng nhận biết rằng thông tin này đã bị loại bỏ hoặc thay thế.
1. Các ứng dụng phổ biến
Hiển thị thông tin đã lỗi thời
Một trong những ứng dụng thực tiễn của thẻ <s> là để chỉ rõ khi nào nội dung đã trở nên lỗi thời hoặc không còn phù hợp. Ví dụ, bạn có thể dùng thẻ này để gạch ngang một giá cũ khi hiển thị một giá mới thay thế trong các trang thương mại điện tử.
<p>Giá cũ: <s>500.000 VND</s> Giờ chỉ còn: 400.000 VND!</p>
Chỉnh sửa văn bản
Trong các tài liệu yêu cầu sự chỉnh sửa trực tiếp, việc sử dụng thẻ <s> có thể giúp chỉ rõ những phần bị sai hoặc cần thay thế. Đặc biệt hữu ích trong các quy trình kiểm tra bài viết hoặc tài liệu.
<p>Chúng tôi sẽ <s>đóng cửa vào ngày 1 tháng 1</s> mở cửa suốt dịp lễ.</p>
2. Cú pháp cơ bản
Cách sử dụng thẻ <s> rất đơn giản. Bạn chỉ cần đặt văn bản mà bạn muốn gạch ngang vào bên trong thẻ này.
<s>Đây là đoạn văn gạch ngang.</s>
Thẻ này có thể được sử dụng độc lập hoặc kết hợp với các thẻ HTML khác như <p>, <div>, <span>, và nhiều thẻ khác nữa.
3. Thẻ thay thế
Song song với thẻ <s>, bạn có thể sử dụng các thẻ khác như <del> để chỉ rõ một đoạn văn bản bị xóa đi, nhất là trong các tài liệu hoặc bài viết có tính chất lịch sử.
<del>Văn bản này đã bị xóa.</del>
Thẻ <del> cũng hiển thị một đoạn văn bản với đường gạch ngang, nhưng có thêm ý nghĩa về mặt ngữ nghĩa liên quan đến việc “xóa bỏ”.
4. Thẻ <s> so với thẻ <strike>
Trước đây, người ta thường sử dụng thẻ <strike> để hiển thị văn bản bị gạch ngang. Tuy nhiên, thẻ này đã bị lỗi thời và không còn được hoạt động trong hầu hết các phiên bản HTML hiện đại.
5. Styling với CSS
Nếu bạn muốn tùy chỉnh đường gạch ngang hoặc thêm các hiệu ứng khác cho văn bản, bạn có thể kết hợp thẻ <s> với CSS.
<s style="text-decoration: line-through; color: red;">Giá cũ</s>
Bạn cũng có thể áp dụng các lớp CSS để điều chỉnh phong cách của văn bản gạch ngang một cách nhất quán trên toàn bộ trang web.
<style>
.old-price {
text-decoration: line-through;
color: gray;
}
</style>
<p class="old-price">500.000 VND</p>
Kết luận
Thẻ <s> là một công cụ mạnh mẽ và dễ sử dụng trong HTML để biểu thị văn bản bị gạch ngang, cho dù đó là thông tin lỗi thời, giá cũ, hoặc phần nội dung bị chỉnh sửa. Sử dụng thẻ này đúng cách không chỉ giúp trang web của bạn thêm phần chuyên nghiệp mà còn giúp người đọc dễ dàng nắm bắt thông tin hơn.
Comments