<ruby>: The Ruby Annotation element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Phần tử <ruby> trong HTML đại diện cho các chú thích nhỏ được hiển thị phía trên, phía dưới hoặc bên cạnh văn bản cơ sở, thường được dùng để hiển thị cách phát âm của các ký tự Đông Á. Nó cũng có thể được dùng để chú thích các loại văn bản khác, nhưng cách dùng này ít phổ biến hơn.

Thuật ngữ ruby có nguồn gốc từ đơn vị đo lường được thợ sắp chữ sử dụng, đại diện cho cỡ chữ nhỏ nhất có thể in trên giấy báo mà vẫn đọc được.

Try it

<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>

ruby {
  font-size: 2em;
}

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Kết quả

Ví dụ 2: Từ

html

<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>

Kết quả

Tóm tắt kỹ thuật

Danh mục nội dung	Nội dung luồng, nội dung cụm từ, nội dung rõ ràng.
Nội dung được phép	Một hoặc nhiều nhóm, mỗi nhóm gồm hai phần: Văn bản cơ sở, là một trong: Nội dung cụm từ, nhưng không có phần tử `<ruby>` và không có phần tử con `<ruby>`, hoặc Một phần tử `<ruby>` đơn lẻ không có phần tử con `<ruby>`. Chú thích cho văn bản cơ sở, là một trong: Một hoặc nhiều phần tử `<rt>`, hoặc Một phần tử `<rp>` theo sau là một hoặc nhiều phần tử `<rt>`, mỗi phần tử lại theo sau bởi một phần tử `<rp>` (tức là `rp, rt, rp, rt, ..., rp`).
Bỏ thẻ	Không được phép, cả thẻ mở và thẻ đóng đều bắt buộc.
Phần tử cha được phép	Bất kỳ phần tử nào chấp nhận nội dung cụm từ.
Vai trò ARIA ngầm định	Không có vai trò tương ứng
Vai trò ARIA được phép	Bất kỳ
Giao diện DOM	`HTMLElement`