HTML5의 <ruby> 태그는 동아시아 문자의 발음을 나타내는 루비 주석(ruby annotation)을 정의할 때 사용됩니다. 루비 주석은 주로 한자 위에 작은 글씨로 읽는 법을 덧붙이는 방식으로, 중국어의 병음이나 일본어의 후리가나를 표기할 때 널리 활용됩니다.
루비 주석을 구성하는 태그
루비 주석은 세 가지 요소를 조합하여 만듭니다.
- <ruby> – 루비 주석 전체를 감싸는 컨테이너 요소입니다.
- <rt> – 원본 문자 위에 실제로 표시될 발음(읽는 법) 텍스트를 정의합니다.
- <rp> – 루비 주석을 지원하지 않는 구형 브라우저를 위한 괄호를 제공합니다. 루비를 지원하는 브라우저에서는 이 괄호가 화면에 나타나지 않습니다.
예제 코드
다음 코드를 실행하면 루비 주석이 어떻게 표시되는지 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Ruby Tag</title>
</head>
<body>
<ruby>
漢字 <rp>(</rp><rt>kanji</rt><rp>)</rp>
</ruby>
</body>
</html>실행 결과 및 동작 원리
위 코드를 실행하면 '漢字'라는 한자 바로 위에 작은 글씨로 'kanji'라는 발음이 표시됩니다. 만약 사용 중인 브라우저가 루비 주석을 지원하지 않더라도, <rp> 태그 덕분에 '漢字(kanji)'처럼 괄호와 함께 발음이 나타나므로 가독성이 유지됩니다.
이처럼 <ruby>, <rt>, <rp> 태그만 활용하면 별도의 CSS나 스크립트 없이도 동아시아 언어의 발음 표기를 손쉽게 구현할 수 있습니다.