<u>: Phần tử Chú thích Không có Phát âm (Gạch chân)

Try it

<p>
  You could use this element to highlight <u>speling</u> mistakes, so the writer
  can <u>corect</u> them.
</p>

p {
  margin: 0;
}

u {
  text-decoration: red wavy underline;
}

Xem phần Ghi chú sử dụng để biết thêm chi tiết về khi nào nên và không nên sử dụng <u>.

Thuộc tính

Phần tử này chỉ bao gồm các thuộc tính toàn cục.

Ghi chú sử dụng

Cùng với các phần tử tạo kiểu thuần túy khác, phần tử HTML Gạch chân gốc (<u>) đã bị loại bỏ trong HTML 4; tuy nhiên, <u> đã được phục hồi trong HTML 5 với ý nghĩa ngữ nghĩa mới: để đánh dấu văn bản có một dạng chú thích không phải văn bản nào đó được áp dụng.

Các trường hợp sử dụng

Các trường hợp sử dụng hợp lệ của phần tử <u> bao gồm chú thích lỗi chính tả, áp dụng dấu tên riêng để biểu thị tên riêng trong văn bản tiếng Trung, và các dạng chú thích khác.

Bạn không nên dùng <u> để gạch chân văn bản vì mục đích trình bày, hoặc để biểu thị tiêu đề sách.

Các phần tử khác cần cân nhắc sử dụng

Trong hầu hết các trường hợp, bạn nên sử dụng một phần tử khác thay vì <u>, chẳng hạn:

• <em> để biểu thị nhấn mạnh
• <b> để thu hút sự chú ý vào văn bản
• <mark> để đánh dấu từ hoặc cụm từ quan trọng
• <strong> để cho biết văn bản có tầm quan trọng cao
• <cite> để đánh dấu tiêu đề sách hoặc các ấn phẩm khác
• <i> để biểu thị thuật ngữ kỹ thuật, phiên âm, suy nghĩ, hoặc tên tàu trong văn bản phương Tây

Để cung cấp chú thích văn bản (thay vì chú thích không phải văn bản được tạo bằng <u>), sử dụng phần tử <ruby>.

Để áp dụng giao diện gạch chân mà không có ý nghĩa ngữ nghĩa, sử dụng giá trị underline của thuộc tính text-decoration.

Ví dụ

Chỉ thị lỗi chính tả

Ví dụ này sử dụng phần tử <u> và một số CSS để hiển thị một đoạn văn có lỗi chính tả, với lỗi được chỉ thị bằng kiểu đường gạch chân lượn sóng màu đỏ thường được dùng cho mục đích này.

HTML

<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>

Trong HTML, chúng ta thấy cách sử dụng <u> với một lớp, spelling, được dùng để chỉ thị lỗi chính tả của từ "wrongly".

CSS

u.spelling {
  text-decoration: red wavy underline;
}

CSS này chỉ thị rằng khi phần tử <u> được tạo kiểu với lớp spelling, nó sẽ có một đường gạch chân lượn sóng màu đỏ phía dưới văn bản. Đây là kiểu tạo kiểu thông dụng cho lỗi chính tả. Một kiểu phổ biến khác có thể được trình bày bằng red dashed underline.

Kết quả

Kết quả sẽ quen thuộc với bất kỳ ai đã từng sử dụng các trình xử lý văn bản phổ biến hiện nay.

Tránh dùng <u>

Trong hầu hết các trường hợp, bạn thực sự không muốn dùng <u>. Dưới đây là một số ví dụ cho thấy những gì bạn nên làm thay thế trong một số trường hợp.

Gạch chân không có ngữ nghĩa

Để gạch chân văn bản mà không ngụ ý bất kỳ ý nghĩa ngữ nghĩa nào, sử dụng phần tử <span> với thuộc tính text-decoration được đặt thành "underline", như minh họa dưới đây.

HTML

<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots

CSS

.underline {
  text-decoration: underline;
}

Kết quả

Trình bày tiêu đề sách

Tiêu đề sách nên được trình bày bằng phần tử <cite> thay vì <u> hay thậm chí <i>.

Sử dụng phần tử cite

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

Tạo kiểu cho phần tử cite

Kiểu mặc định của phần tử <cite> hiển thị văn bản in nghiêng. Bạn có thể ghi đè điều đó bằng CSS:

<p>The class read <cite>Moby-Dick</cite> in the first term.</p>

cite {
  font-style: normal;
  text-decoration: underline;
}

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Các phần tử <span>, <i>, <em>, <b>, và <cite> thường nên được sử dụng thay thế.
• Thuộc tính CSS text-decoration nên được dùng để gạch chân không có ngữ nghĩa.