Gạch chân và gạch ngang chữ trong HTML: thẻ u, ins, s, del

Cách gạch chân chữ trong HTML

Có hai cách: thẻ <u>, hoặc thuộc tính CSS text-decoration: underline. Cả hai vẽ ra cùng một đường gạch:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

Vấn đề với mọi kiểu gạch chân nằm ở dòng thứ ba: người đọc nghĩ chữ được gạch chân là liên kết và bấm vào. Chỉ gạch chân chữ thường khi có lý do rõ ràng.

Ý nghĩa của thẻ u

<u> không phải nút "gạch chân" đa năng. Trong HTML hiện nay, nó có nghĩa là chữ mang một chú thích không nói thành lời: một dấu hiệu cho biết "chỗ này có điều đặc biệt" mà không nói là gì. Những cách dùng thực tế phổ biến:

• đánh dấu lỗi chính tả (như trình soạn thảo văn bản vẫn làm, thường bằng đường lượn sóng màu đỏ),
• đánh dấu tên riêng trong văn bản tiếng Trung, một quy ước trình bày ở đó.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Để nhấn mạnh, hãy dùng <em> hoặc <strong> (xem chữ đậm), còn tên sách thì dùng <cite>. Nếu chỉ muốn vẻ ngoài, hãy dùng CSS.

Gạch ngang chữ: s và del

HTML có hai thẻ vẽ đường ngang qua chữ, và chúng mang ý nghĩa khác nhau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Đánh dấu chỉnh sửa bằng ins và del

<ins> là bạn đồng hành của <del>: nó đánh dấu chữ được thêm vào. Mặc định trình duyệt gạch chân nó. Cả hai đều nhận datetime (thời điểm thay đổi) và cite (URL giải thích lý do):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Kiểu đỏ và xanh lá này chính là vẻ ngoài quen thuộc của một bản diff. text-decoration: none trên ins bỏ đường gạch chân mặc định để nó không trông giống liên kết.

Gạch chân và gạch ngang bằng CSS

text-decoration lo phần hiển thị cho mọi phần tử: nó nhận màu và kiểu đường, còn text-decoration-thickness đặt độ dày. Với những đường gạch chỉ để trang trí, đây là công cụ đúng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Cách bỏ gạch chân khỏi liên kết, khoảng cách đường gạch chân và các chi tiết khác của text-decoration có ở trang gạch chân trong CSS.

Khả năng tiếp cận

Trình đọc màn hình hỗ trợ <s>, <del> và <ins> không đồng đều: một số đọc ra là đã xóa hay đã chèn, nhiều trình đọc chúng như chữ bình thường, nên người nghe có thể nghe "Price 49 dollars 29 dollars" mà không biết giá nào là hiện tại. Khi sự khác biệt quan trọng, hãy nói rõ bằng lời, ví dụ bằng chữ ẩn khỏi màn hình nhưng vẫn được đọc, hoặc đơn giản là "Giá cũ $49, giá mới$29".

Lỗi thường gặp

• Gạch chân chữ không phải liên kết. Người đọc sẽ thử bấm vào. Hãy làm nổi bật bằng chữ đậm, màu sắc hoặc nền.
• Dùng <u> để nhấn mạnh. Hãy dùng <em> hoặc <strong>.
• Dùng <strike>. Thẻ này đã lỗi thời. Hãy dùng <s>, <del> hoặc text-decoration: line-through.
• Dùng <s> cho nội dung đã xóa trong lịch sử tài liệu. Đó là việc của <del>, thẻ còn ghi lại được thời điểm thay đổi.
• Chỉ dựa vào đường gạch để truyền đạt ý nghĩa. Nhiều trình đọc màn hình không đọc nó ra.