---
title: <ruby>
slug: Web/HTML/Element/ruby
translation_of: Web/HTML/Element/ruby
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;ruby&gt;</code> 元素</strong>的意思是旁註標記。旁註標記用於標示東亞文字的發音。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/zh-TW/docs/Web/HTML/Content_categories" title="HTML/Content_categories">內容類型</a></th>
   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Phrasing_content">流內容</a>、<a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落型內容</a>、捫及內容</td>
  </tr>
  <tr>
   <th scope="row">允許內容</th>
   <td><a href="/zh-TW/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">段落型內容</a></td>
  </tr>
  <tr>
   <th scope="row">標籤省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允許父元素</th>
   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a></td>
  </tr>
  <tr>
   <th scope="row">DOM 介面</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">屬性</h2>

<p>這個元素只支援<a href="/zh-TW/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">全域屬性</a>。</p>

<h2 id="Examples" name="Examples">範例</h2>

<h3 id="範例一：字">範例一：字</h3>

<pre class="brush:html">&lt;ruby&gt;
  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
&lt;/ruby&gt;</pre>

<h3 id="範例二：詞">範例二：詞</h3>

<pre class="brush:html">&lt;ruby&gt;
  明日 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Ashita&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
&lt;/ruby&gt;</pre>

<h2 id="Specifications" name="Specifications">規範</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">規範</th>
   <th scope="col">狀態</th>
   <th scope="col">註解</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

<p>{{Compat("html.elements.ruby")}}</p>

<h2 id="See_also" name="See_also">參閱</h2>

<ul>
 <li>{{HTMLElement("rt")}}</li>
 <li>{{HTMLElement("rp")}}</li>
 <li>{{HTMLElement("rb")}}</li>
 <li>{{HTMLElement("rtc")}}</li>
 <li>{{HTMLElement("rbc")}}</li>
 <li>{{CSSxRef("text-transform")}}: full-size-kana</li>
</ul>