HTML and CSS Reference
In-Depth Information
instance of a search term with a
<mark>
element, which is then
styled a pretty pink. It would have been wrong to wrap these
search terms in
<strong>
or
<em>
as they're not emphatic—and
this would have changed the meaning of the content of our
page—but are relevant to the user's current activity: arriving
at a page on our site looking for information about a certain
search term.
<ruby>, <rp>, <rt>
ruby
is a useful addition for those writing content in some Asian
languages. Daniel Davis has a very useful article, “The HTML5
<ruby>
element in words of one syllable or less” (
http://my.opera.
lable-or-less
),
in which he explains how it works in the context of
Japanese (quoted with kind permission):
Any piece of Japanese text (banner ad, article, legal doc, and so
on) uses a combination of kanji, hiragana, and katakana writing
systems. It is sometimes the case that people reading the text
can't read the kanji, especially because kanji characters can have
more than one pronunciation. People and place names are one
example of kanji having numerous or irregular pronunciations.
can be pronounced “nichi,” “hi,” or “ka”
can be pronounced “hon” or “moto”
can be pronounced “nihon” or “nippon”
To h e l p t h e r e a d e r, is To m e t i m e is t h e p r To n u n c i a t i To n i is w r i t t e n
above the kanji using the hiragana alphabet. This is called
furigana in Japanese and ruby in English (from the name of
the small 5.5pt type size used for similar sorts of annotations
in British print tradition). It is often used in newspapers and
topics but not so much on websites, due to the diiculty of
squeezing miniature text above larger text on a single line.
The
<ruby>
element aims to solve this.
According to the current HTML5 spec, the
<ruby>
element is an
inline element and is placed around the word or character you'd
like to clarify, like so:
<ruby>
</ruby>
