HTML5 <ruby> Tag
Introduction to HTML5 <ruby> Tag
<ruby> tag किसी text के लिए annotation specify करता है। एक annotation एक small text होता है जो main text का मतलब समझाता है या फिर उसमे use होने वाले characters का सही pronunciation करने में मदद करता है।
मूलतः इसे east asian languages जैसे की Chinese, Japanese, Korean आदि के pronunciation में help provide करने के लिए use किया जाता है। लेकिन इस tag को आप normal purpose के लिए जैसे की किसी text का meaning बताने के लिए भी use कर सकते है।
Ruby text user के reading experience को बढ़ाता है। उदाहरण के लिए यदि आप अपने program में कँही भी technical terms use कर रहे है तो ruby text के द्वारा उनके साथ एक explanation attach कर सकते है। इससे पढ़ते समय user बिना किसी परेशानी के आसानी से आपके document को समझ पायेगा।
Ruby text main text से बहुत छोटा होता है। Horizontal text के संदर्भ में यह main text के ऊपर show होता है और vertical text के सन्दर्भ में यह main text के right में show होता है। ऐसे browsers जो ruby tag को support नहीं करते है वह इसे main text के बाद inline element की तरह show करते है।
Syntax of HTML5 <ruby> Tag
निचे <ruby> tag का general syntax दिया जा रहा है।
<ruby>
<rb>main text</rb>
<rt>ruby text (explanation)</rt>
</ruby>
किसी भी webpage में ruby text create करने के लिए <ruby>, <rt> ,<rp> और <rb> tags use किये जाते है। इनके बारे में निचे बताया जा रहा है।
- <ruby> - यह एक inline element होता है। यह tag दूसरे tags के लिए container की तरह काम करता है। इसमें main text और ruby text को <rb> और <rt> tag के द्वारा specify किया जाता है।
- <rb> - इस tag को ruby base कहा जाता है। इस tag के द्वारा आप main text define करते है।
- <rt> - इस tag को ruby text कहा जाता है। इस tag के द्वारा आप ruby text define करते है।
- <rp> - यह tag ruby text के दोनों तरफ parenthesis add कर देता है। यह उन browser में काम करता है जो ruby tag को support नहीं करते है। जो browser ruby tag को support करते है वे इस tag को ignore कर देते है।
Attributes of HTML <ruby> Tag
<ruby> tag का कोई भी element specific tag नहीं है। लेकिन यह सभी HTML global attributes (class, id आदि ) और event attributes (onclick, onmouseover आदि) को support करता है।
Example of HTML5 <ruby> Tag:
<html>
<head>
<title>ruby tag demo</title>
</head>
<body>
<ruby>
<rb>BHT</rb>
<rt>Best Hindi Tutorials</rt>
</ruby>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
