--- title: <ruby> slug: Web/HTML/Element/ruby tags: - Element - HTML - HTML text-level semantics - Reference - Web translation_of: Web/HTML/Element/ruby --- <div>{{HTMLRef}}</div> <p><strong>HTML <code><ruby></code> 요소</strong>는 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.</p> <div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div> <table class="properties"> <tbody> <tr> <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td> </tr> <tr> <th scope="row">가능한 콘텐츠</th> <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> </tr> <tr> <th scope="row">태그 생략</th> <td>{{no_tag_omission}}</td> </tr> <tr> <th scope="row">가능한 부모</th> <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td> </tr> <tr> <th scope="row">가능한 ARIA 역할</th> <td>모두</td> </tr> <tr> <th scope="row">DOM 인터페이스</th> <td>{{domxref("HTMLElement")}}</td> </tr> </tbody> </table> <h2 id="특성">특성</h2> <p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p> <h2 id="Examples" name="Examples">예제</h2> <h3 id="문자별_표기">문자별 표기</h3> <pre class="brush:html"><ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby></pre> <p>{{EmbedLiveSample("문자별_표기")}}</p> <h3 id="단어별_표기">단어별 표기</h3> <pre class="brush:html"><ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby></pre> <p>{{EmbedLiveSample("단어별_표기")}}</p> <h2 id="명세">명세</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '<ruby>')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> <td></td> </tr> <tr> <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-ruby-element', '<ruby>')}}</td> <td>{{Spec2('HTML5 W3C')}}</td> <td></td> </tr> </tbody> </table> <h2 id="브라우저_호환성">브라우저 호환성</h2> <p>{{Compat("html.elements.ruby")}}</p> <h2 id="같이_보기">같이 보기</h2> <ul> <li>{{HTMLElement("rt")}}</li> <li>{{HTMLElement("rp")}}</li> <li>{{HTMLElement("rb")}}</li> <li>{{HTMLElement("rtc")}}</li> <li>{{HTMLElement("rbc")}}</li> </ul>