<ruby>
- 25 января 2023
Тег <ruby>
используется для отображения японских кандзи, китайских иероглифов и других идейных алфавитов внутри текста, которые неизвестны или не знакомы читателю. Он позволяет добавлять маленькие дополнительные знаки — руби — над или под основным текстом для помощи в произношении и понимании.
Синтаксис тега <ruby>
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
Спецификация HTML
Тег <ruby>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <ruby>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Добавление руби над кандзи 漢字, которое показывает их произношение かんじ на японском языке:
<p>Представленный текст написан на японском языке с использованием <ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>, которые представляют собой китайские иероглифы.</p>
Добавление руби над кандзи 猫, которое показывает их произношение ねこ на японском языке:
<p>Этот текст содержит <ruby>猫<rp>(</rp><rt>ねこ</rt><rp>)</rp></ruby>, что означает "кошка" на японском языке.</p>
Для чего использовать тег <ruby>
- Для добавления аннотации к японским символам в веб-манге.
- Для добавления аннотации к китайским символам в онлайн-курсах китайского языка.
- Для добавления аннотации к японским и китайским символам на сайтах, посвященных истории и культуре этих стран.
- Для добавления аннотации к японским и китайским символам в онлайн-словарях.
- Для добавления аннотации к японским и китайским символам в учебных материалах на языках, отличных от японского и китайского.
- Для добавления аннотации к японским и китайским символам в медицинских отчетах, исследованиях и статьях.
Атрибуты тега <ruby>
У тега <ruby>
нет специфических атрибутов.
Глобальные атрибуты
Тег <ruby>
поддерживает все глобальные атрибуты HTML.
Нюансы
Тег <ruby>
используется для отображения фонетической транскрипции над текстом на другом языке. Она состоит из двух частей: основного текста, который отображается на странице, и руби-текста, который отображается над или под основным текстом.
Важно знать, что тег <ruby>
не является самостоятельным, он всегда используется с тегом <rt>
, который содержит руби-текст. Также следует учитывать, что не все браузеры поддерживают этот тег и его атрибуты.
Поддержка браузерами
Поддержка тега <ruby>
достаточно ограничена, его не рекомендуется использовать в качестве основного метода отображения фонетической транскрипции или перевода на другой язык. Актуальная информация — на сaniuse.
Альтернативные теги
Тег <ruby>
не имеет прямых альтернатив в HTML, однако, вместо использования данного тега, можно применять комбинацию тегов <span>
и <sup>
для добавления аннотаций.
Чем заменить этот тег
Если браузер не поддерживает тег <ruby>
, он проигнорирует его и отобразит текст без аннотаций. В этом случае можно использовать альтернативные методы, например, изображения с аннотациями или комбинацию тегов <span>
и <sup>
.
Актуальность
Тег <ruby>
является актуальным и используется в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023